{% from 'comments/pane.html' import comment_pane with context %}
{% from 'files/pane.html' import files_pane with context %}
{% from 'files/pane.html' import files_pane with context %}
{% from 'requests/pane.html' import request_pane with context %}
{#{% from "modifications/pane.html" import modifications_pane with context %}#}
{% from 'fly_stocks/form.html' import flystock_add_form %}
{% from 'files/form.html' import file_upload_form %}
{% from 'files/form.html' import file_edit_form %}
{% from 'fly_stocks/pane.html' import pane_details with context %}
{% from 'base_entity/pane.html' import self_reference_pane with context %}

{% import 'macros/pill.html' as pill %}


{% set n_comments = flystock.comments | length %}


<div id="sidebar-right-messages"></div>

<h1 class="mb-4">{{ flystock.label }}</h1>

<div class="btn-group btn-group-sm bg-white rounded border w-100" role="group">

    <ul class="nav nav-pills m-0" role="tablist">

        <li class="nav-item" role="presentation">
            <button class="nav-link active"
                    data-bs-toggle="tab"
                    data-bs-target="#tab-info"
                    type="button"
                    role="tab"
                    aria-selected="true">
                Details
            </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link position-relative"
                    data-bs-toggle="tab"
                    data-bs-target="#tab-comments"
                    type="button"
                    role="tab"
                    aria-selected="false">
                Comments
                {% if n_comments %}{{ pill.top_right(n_comments, 'bg-primary') }}{% endif %}
            </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link"
                    data-bs-toggle="tab"
                    data-bs-target="#tab-files"
                    type="button"
                    role="tab"
                    aria-selected="false">
                Files
            </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link"
                    data-bs-toggle="tab"
                    data-bs-target="#tab-references"
                    type="button"
                    role="tab"
                    aria-selected="false">
                Referenced
            </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link"
                    data-bs-toggle="tab"
                    data-bs-target="#tab-requests"
                    type="button"
                    role="tab"
                    aria-selected="false">
                Requests
            </button>
        </li>

    </ul>

</div>

<div class="tab-content bg-white rounded border my-3">

    {{ pane_details(
            status='active',
            pane_id='tab-info',
            flystock=flystock,
            form=form
        ) }}

    {{ files_pane(
            status='fade',
            pane_id='tab-files',
            entity=flystock,
            form=file_form
          ) }}

    {{ self_reference_pane(
            status='fade',
            pane_id='tab-references',
            entity=flystock
          ) }}

    {{ comment_pane(
            status='fade',
            pane_id='tab-comments',
            entity=flystock,
            form=comment_form
          ) }}

    {{ request_pane(
            status='fade',
            pane_id='tab-requests',
            entity=flystock,
            form=request_form
          ) }}

</div>