<h3>{{ path }}</h3>

<ul class="nav nav-tabs" id="tabs">
    <li class="nav-item" role="presentation">
        <button type="button" class="nav-link active" id="main-tab"
                data-bs-toggle="tab" data-bs-target="#main-tab-pane"
                role="tab" aria-controls="main-tab-pane" aria-selected="true">
            Main
        </button>
    </li>
    {% if view_url %}
    <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" id="data-tab"
                data-bs-toggle="tab" data-bs-target="#data-tab-pane"
                role="tab" aria-controls="data-tab-pane" aria-selected="true">
            Data
        </button>
    </li>
    {% endif %}
    {% if display %}
        <li class="nav-item" role="presentation">
            <button type="button" class="nav-link" id="display-tab"
                    data-bs-toggle="tab" data-bs-target="#display-tab-pane"
                    role="tab" aria-controls="display-tab-pane" aria-selected="false">
                {{ display.label }}
            </button>
        </li>
    {% endif %}
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="main-tab-pane" tabindex="0"
         role="tabpanel" aria-labelledby="tab-main">
        {% include 'includes/info_metadata.html' %}
    </div>

    {% if view_url %}
    <div class="tab-pane fade" id="data-tab-pane" tabindex="0"
         role="tabpanel" aria-labelledby="tab-data">
        <div id="info-view" hx-post="{{ view_url }}" hx-trigger="load" hx-ext="morph" hx-swap="morph:innerHTML">
        </div>
    </div>
    {% endif %}

    {% if display %}
        <div class="tab-pane fade" id="display-tab-pane" tabindex="0"
             role="tabpanel" aria-labelledby="tab-display"
             hx-get="{{ display.url }}" hx-trigger="load">
        </div>
    {% endif %}
</div>

<script>
    // If the url has a hash open the appropriate tab
    openTab(window.location.hash);

    // Append hash to the url when a tab is clicked, so the url can be copied including the hash
    document.querySelector('#tabs').addEventListener('shown.bs.tab', function (event) {
        window.location.hash = event.target.id.slice(0, -4);
    })
</script>
