{% extends base_template %}
{% load debusine %}
{% load users %}
{% block tail_js %}
    {{ block.super }}
    <script type="module">
    import { DebusineClipboardCopy } from "debusine";

    document.addEventListener("DOMContentLoaded", () => {
        DebusineClipboardCopy.setup_all();
    });
    </script>
    {% include "web/_tab_selector.html" %}
{% endblock %}
{% block content %}
    {% ui work_request as work_request_ui %}
    <nav>
        <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
            {% for tab in tabs %}
                <button class="nav-link {% if forloop.first %}active{% endif %}"
                        id="nav-{{ tab.name }}-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#nav-{{ tab.name }}"
                        type="button"
                        role="tab"
                        aria-controls="nav-{{ tab.name }}"
                        aria-selected="false">{{ tab.label }}</button>
            {% endfor %}
        </div>
    </nav>
    <div class="tab-content" id="nav-content">
        {% for tab in tabs %}
            <div class="tab-pane {% if forloop.first %}show active{% endif %}"
                 id="nav-{{ tab.name }}"
                 role="tabpanel"
                 aria-labelledby="nav-{{ tab.name }}-tab"
                 tabindex="0">{% widget tab %}</div>
        {% endfor %}
    </div>
{% endblock %}