{% from 'bacteria/form.html' import bacteria_add_form %}
{% from 'plasmids/pane.html' import pane_details with context %}


<h1 class="mb-4">{{ stock.plasmid.label }} in {{ stock.strain }}</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"
                    data-bs-toggle="tab"
                    data-bs-target="#tab-plasmid"
                    type="button"
                    role="tab"
                    aria-selected="true">
                Plasmid
            </button>
        </li>

    </ul>

</div>


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

    <div class="tab-pane container active" id="tab-info">

        <div class="d-flex justify-content-between align-items-center mb-3">

            <h2 class="flex-grow-1 mb-0">Details</h2>

            <div class="flex-shrink-0">

                {% if current_user.has_permission('add-glycerol-stock') %}
                    <a class="text-primary me-2"
                       data-bs-toggle="modal"
                       data-bs-target="#modal-edit-glycerol-stock-{{ stock.id }}">
                        <i class="bi bi-pencil-fill"></i></a>
                {% endif %}

            </div>

        </div>


        <table class="table table-details">
            <tbody>
            <tr>
                <td>Database ID</td>
                <td>{{ stock.id }}</td>
            </tr>
            <tr>
                <td>Plasmid</td>
                <td><a href="{{ url_for('plasmids.index', id=stock.plasmid_id) }}">{{ stock.plasmid.label }}</a></td>
            </tr>
            <tr>
                <td>Strain</td>
                <td>{{ stock.strain }}</td>
            </tr>
            <tr>
                <td>Generated by</td>
                <td>{{ stock.owner.username }}</td>
            </tr>
            <tr>
                <td>Transformation date</td>
                <td>{{ stock.transformation_date }}</td>
            </tr>
            <tr>
                <td>Storage place</td>
                <td>{{ stock.storage_place }}</td>
            </tr>
            <tr>
                <td>Disposed on</td>
                <td>{% if stock.disposal_date %}{{ stock.disposal_date }}{% endif %}</td>
            </tr>
            </tbody>
        </table>

    </div>

    {{ pane_details(
            status='fade',
            pane_id='tab-plasmid',
            plasmid=stock.plasmid,
            form=plasmid_form
        ) }}

</div>