{% from 'antibodies/pane.html' import pane_details with context %}
{% from "comments/pane.html" import comment_pane with context %}
{% from "files/pane.html" import files_pane with context %}
{% from 'requests/pane.html' import request_pane with context %}
{% from 'batches/pane.html' import batch_pane with context %}
{% from "dilutions/pane.html" import dilutions_pane with context %}
{% from "antibodies/form.html" import antibody_add_form %}
{% from "dilutions/form.html" import dilutions_add_form %}
{% from "files/form.html" import file_upload_form %}
{% import 'macros/pill.html' as pill %}


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


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

<h1 class="mb-4">{{ antibody.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">
            <button class="nav-link"
                    data-bs-toggle="tab"
                    data-bs-target="#tab-dilutions"
                    type="button"
                    role="tab"
                    aria-selected="false">
                Dilutions
            </button>
        </li>

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

        <li class="nav-item">
            <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">
            <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">
            <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',
        antibody=antibody,
        form=form
    ) }}

    {{ dilutions_pane(
        status='fade',
        pane_id='tab-dilutions',
        antibody=antibody,
        form=dilution_form
      ) }}

    {{ batch_pane(
        status='fade',
        pane_id='tab-batches',
        consumable=antibody,
        form=batch_form
      ) }}

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

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

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

</div>

