{% extends 'base.html.j2' %}

{% block content %}

<div class="content-navigation-tabs">

    <button onclick="window.location='{{ form.url_index_view }}';" style="vertical-align: middle; padding: auto; margin: 0px">
        <svg xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="0 -960 960 960" width="25px"
            style="vertical-align: middle; margin: 0px; padding: 0px border: none; " fill="#6a6e73">
            <path d="m313-480 155 156q11 11 11.5 27.5T468-268q-11 11-28 11t-28-11L228-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T468-692q11 11 11 28t-11 28L313-480Zm264 0 155 156q11 11 11.5 27.5T732-268q-11 11-28 11t-28-11L492-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T732-692q11 11 11 28t-11 28L577-480Z" />
        </svg>
        Back to {{ form.model_name_plural }}
    </button>

    {% for key, tab in form.tabs.items %}

        {% if forloop.first %}

            <button id="defaultOpen" class="content-navigation-tabs-link" onclick="openContentNavigationTab(event, '{{ tab.slug }}')">{{ tab.name }}</button>

        {% else %}

            <button id="tab-{{ tab.slug }}" class="content-navigation-tabs-link" onclick="openContentNavigationTab(event, '{{ tab.slug }}')">{{ tab.name }}</button>

        {% endif %}

    {% endfor %}

</div>

{% block tabs %}{% endblock %}

{% if open_tab %}

    <script>
      document.getElementById("tab-{{ open_tab }}").click();
    </script>

{% else %}

    <script>
        document.getElementById("defaultOpen").click();
    </script>

{% endif %}

{% endblock %}