{% load static %}
{% load debusine %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Debusine -
            {% block title %}{{ title }}{% endblock %}
        </title>
        <link rel="stylesheet"
              type="text/css"
              href="{% static "web/css/debusine.css" %}">
        <link rel="stylesheet"
              type="text/css"
              href="{% static "web/css/debusine-code-highlight.css" %}">
        <link rel="stylesheet"
              type="text/css"
              href="{% static "vendor/bootstrap5/css/bootstrap.min.css" %}">
        {# Currently unpackaged: see https://forgejo.debian.net/web/bootstrap-icons/src/branch/debian/debian/TODO. #}
        <link rel="stylesheet"
              href="{% static "web/vendor/bootstrap-icons/css/bootstrap-icons.min.css" %}">
        <script type="importmap">
        {
            "imports": {
            {% block importmap %}
                "bootstrap": "{% static "vendor/bootstrap5/js/bootstrap.bundle.min.js" %}",
                "debusine": "{% static "web/js/debusine.js" %}",
                "popper": "{% static "vendor/popperjs2/popper.min.js" %}"
            {% endblock %}
            }
        }
        </script>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg bg-body-tertiary mb-3">
            <div class="container-fluid">
                {% if debusine_homepage %}
                    <a class="navbar-brand" href="{% url 'homepage:homepage' %}">Debusine</a>
                {% else %}
                    <a class="navbar-brand" href="{% url 'scopes:detail' %}">
                        {% if scope.icon %}
                            <img src="{% static scope.icon %}"
                                 alt=""
                                 width="30"
                                 height="24"
                                 class="d-inline-block align-text-top">
                        {% endif %}
                        {{ scope.label }}
                    </a>
                {% endif %}
                <button class="navbar-toggler"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent"
                        aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul id="navbar-left" class="navbar-nav me-auto mb-2 mb-lg-0">
                        {% block navbar_left %}
                            {% if workspace %}
                                {% if other_workspaces %}
                                    <li class="nav-item dropdown" id="nav-workspaces">
                                        <div class="btn-group">
                                            <a class="nav-link btn btn-light"
                                               href="{{ workspace.get_absolute_url }}">
                                                <span class="bi {% icon "workspace" %}"></span> {{ workspace.name }}</a>
                                            <a class="nav-link btn btn-light dropdown-toggle dropdown-toggle-split"
                                               href="#"
                                               role="button"
                                               data-bs-toggle="dropdown"
                                               aria-expanded="false">
                                                <span class="visually-hidden">Toggle Dropdown</span>
                                            </a>
                                            <ul class="dropdown-menu">
                                                {% for other_workspace in other_workspaces %}
                                                    <li>
                                                        <a class="dropdown-item" href="{{ other_workspace.get_absolute_url }}">{{ other_workspace.name }}</a>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </li>
                                {% else %}
                                    <li class="nav-item" id="nav-workspaces">
                                        <a class="nav-link btn btn-light"
                                           href="{{ workspace.get_absolute_url }}">
                                            <span class="bi {% icon "workspace" %}"></span> {{ workspace.name }}</a>
                                    </li>
                                {% endif %}
                                <li class="nav-item">
                                    <a class="nav-link btn btn-light"
                                       href="{% url "workspaces:work-requests:list" wname=workspace.name %}"><span class="bi {% icon "work_request" %}"></span> Work requests</a>
                                </li>
                                <li class="nav-item" id="nav-workflows">
                                    {% if workflow_templates %}
                                        <div class="btn-group">
                                            <a class="nav-link btn btn-light"
                                               href="{% url "workspaces:workflows:list" wname=workspace.name %}"><span class="bi {% icon "workflow" %}"></span> Workflows</a>
                                            <a class="nav-link btn btn-light dropdown-toggle dropdown-toggle-split"
                                               href="#"
                                               role="button"
                                               data-bs-toggle="dropdown"
                                               aria-expanded="false">
                                                <span class="visually-hidden">Toggle Dropdown</span>
                                            </a>
                                            <ul class="dropdown-menu">
                                                {% for workflow_template in workflow_templates %}
                                                    <li>
                                                        <a class="dropdown-item"
                                                           href="{% url "workspaces:workflows:list" wname=workspace.name %}?filter-workflow_templates={{ workflow_template.name }}">{{ workflow_template.name }}</a>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    {% else %}
                                        <a class="nav-link btn btn-light"
                                           href="{% url "workspaces:workflows:list" wname=workspace.name %}"><span class="bi {% icon "workflow" %}"></span> Workflows</a>
                                    {% endif %}
                                </li>
                                <li class="nav-item dropdown" id="nav-collections">
                                    <div class="btn-group">
                                        <a class="nav-link btn btn-light"
                                           href="{% url "workspaces:collections:list" wname=workspace.name %}"><span class="bi {% icon "collections" %}"></span> Collections</a>
                                        <a class="nav-link btn btn-light dropdown-toggle dropdown-toggle-split"
                                           href="#"
                                           role="button"
                                           data-bs-toggle="dropdown"
                                           aria-expanded="false">
                                            <span class="visually-hidden">Toggle Dropdown</span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            {% for collection in workspace_collections %}
                                                <li>
                                                    <a class="dropdown-item" href="{{ collection.get_absolute_url }}">{{ collection }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </li>
                            {% endif %}
                            {% if workspace %}
                                <li class="nav-item dropdown">
                                    <a class="nav-link btn btn-light dropdown-toggle"
                                       href="#"
                                       id="navbar-plumbing-actions"
                                       role="button"
                                       data-bs-toggle="dropdown"
                                       aria-expanded="false">Plumbing</a>
                                    <ul class="dropdown-menu">
                                        {% if workspace and workspace|has_perm:"can_create_artifacts" %}
                                            <li>
                                                <a id="nav-create-artifact"
                                                   class="dropdown-item"
                                                   href="{% url "workspaces:artifacts:create" wname=workspace.name %}">Create artifact</a>
                                            </li>
                                        {% endif %}
                                        {% if workspace and workspace|has_perm:"can_create_work_requests" %}
                                            <li>
                                                <a id="nav-create-work-request"
                                                   class="dropdown-item"
                                                   href="{% url "workspaces:work-requests:create" wname=workspace.name %}">Create work request</a>
                                            </li>
                                        {% endif %}
                                        <li>
                                            <a id="nav-task-configuration-inspector"
                                               class="dropdown-item"
                                               href="{% url "workspaces:task_configuration_inspector" wname=workspace.name %}">Task configuration inspector</a>
                                        </li>
                                    </ul>
                                </li>
                            {% endif %}
                        {% endblock %}
                    </ul>
                    <ul id="navbar-right" class="navbar-nav mb-2 mb-lg-0">
                        {% if user.is_authenticated %}
                            <li class="nav-item dropdown">
                                <a class="nav-link btn btn-light dropdown-toggle"
                                   href="#"
                                   role="button"
                                   data-bs-toggle="dropdown"
                                   aria-expanded="false"><span class="bi {% icon "user" %}"></span> {{ user.username }}</a>
                                <ul class="dropdown-menu" id="navbar-user-actions">
                                    <li>
                                        <a class="dropdown-item"
                                           href="{% url "user:detail" username=user.username %}">{{ user.get_full_name }}
                                            <br>
                                            <small class="ms-1">{{ user.username }}</small>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item"
                                           href="{% url "user:token-list" username=user.username %}">Tokens</a>
                                    </li>
                                    {% if not debusine_homepage %}
                                        <li>
                                            <a class="dropdown-item"
                                               href="{% url "user:groups" username=user.username %}">Groups</a>
                                        </li>
                                    {% endif %}
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li>
                                        <form id="logout-form"
                                              class="dropdown-item"
                                              method="post"
                                              action="{% url "logout" %}">
                                            {% csrf_token %}
                                            <button type="submit">Log out</button>
                                        </form>
                                    </li>
                                </ul>
                            </li>
                        {% else %}
                            <li class="nav-item">
                                {% if is_logout_view or is_login_view %}
                                    <a class="nav-link btn btn-light" href="{% url "login" %}"><span class="bi {% icon 'user' %}"></span> Log in</a>
                                {% else %}
                                    <a class="nav-link btn btn-light"
                                       href="{% url "login" %}?next={{ request.get_full_path }}"><span class="bi {% icon 'user' %}"></span> Log in</a>
                                {% endif %}
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </nav>
        <div aria-live="polite"
             aria-atomic="true"
             class="position-relative"
             id="user-message-container">
            <div class="toast-container position-absolute top-0 end-0 p-3">
                {% with ERROR=DEFAULT_MESSAGE_LEVELS.ERROR %}
                    {% for message in messages %}
                        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                            <div class="toast-header{% if message.level == ERROR %} bg-danger{% endif %}">
                                {% if message.level == ERROR %}
                                    <span class="bi bi-exclamation-circle"></span>
                                {% else %}
                                    <span class="bi bi-info-circle"></span>
                                {% endif %}
                                <strong class="me-auto">{{ message.level_tag }}</strong>
                                <button type="button"
                                        class="btn-close"
                                        data-bs-dismiss="toast"
                                        aria-label="Close"></button>
                            </div>
                            <div class="toast-body">{{ message }}</div>
                        </div>
                    {% endfor %}
                {% endwith %}
            </div>
        </div>
        <div class="container-xxl">
            {% block main-layout %}
                {% block content %}{% endblock %}
            {% endblock %}
        </div>
        <div class="container">
            <footer class="mt-3 border-top text-muted text-center">
                {% block footer %}
                    {% include "web/footer.html" %}
                {% endblock %}
            </footer>
        </div>
        <div id="beta-stamp">BETA</div>
        {% block tail_js %}
            <script type="module">
            import "popper";
            import "bootstrap";

            // Enable Toast
            let toastElList = [].slice.call(document.querySelectorAll('.toast'));
            toastElList.map(function (toastEl) {
                let toast = new bootstrap.Toast(toastEl, {autohide:false});
                toast.show()
            })

            // Enable Popovers
            document.querySelectorAll('[data-bs-toggle="popover"]').forEach((popoverTriggerEl) => {
                new bootstrap.Popover(popoverTriggerEl);
            });
            </script>
        {% endblock %}
    </body>
</html>
