{% from 'preparations/form.html' import preparations_add_form %}


{% macro pane_details(preparation, form) %}

    {% if preparation.emptied_date %}
        <div class="rounded border p-3 mb-3 opacity-50">
    {% else %}
        <div class="rounded border p-3 mb-3">
    {% endif %}

<div class="d-flex align-items-start mb-3">

    <div class="flex-fill">
        <h5 class="mb-1">{{ preparation.owner.username }}</h5>
        <p class="text-muted mb-1">
            Prepared on {{ preparation.preparation_date | format_date }}
            {% if preparation.emptied_date %}
            <br>Emptied on {{ preparation.emptied_date | format_date }}
            {% endif %}
        </p>
    </div>

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

        {% if current_user.has_permission('Add preparations') %}
            <a class="text-primary mx-2"
               data-bs-toggle="modal"
               data-bs-target="#modal-edit-preparation-{{ preparation.id }}">
                <i class="fa-solid fa-pen"></i></a>

            {% if preparation.owner_id == current_user.id %}
                <a class="text-danger"
                   onclick="delete_entity('{{ url_for("plasmids.preparations.delete", id_=preparation.id) }}')">
                    <i class="fa-solid fa-trash"></i></a>
            {% endif %}
        {% endif %}
    </div>

</div>

<div class="d-flex align-items-stretch">
    <div class="flex-fill pe-2 border-end">
        <p class="mb-0 text-center">Storage place</p>
        <p class="text-info fw-bold text-center">{{ preparation.storage_place }}</p>
    </div>
    <div class="flex-fill px-2 border-end">
        <p class="mb-0 text-center">Concentration</p>
        <p class="fw-bold text-center">{{ preparation.concentration }} ng/µl</p>
    </div>
    <div class="flex-fill px-2 border-end">
        <p class="mb-0 text-center">Eluent</p>
        <p class="fw-bold text-center">{{ preparation.eluent }}</p>
    </div>
    <div class="flex-fill ps-2">
        <p class="mb-0 text-center">Strain</p>
        <p class="fw-bold text-center">{{ preparation.stock.strain }}</p>
    </div>
</div>

</div>

    {{ preparations_add_form(form(None, obj=preparation), "plasmids.preparations.edit", "PUT", preparation.id, preparation.plasmid_id) }}

{% endmacro %}


{% macro preparations_pane(status, pane_id, plasmid, form) %}
    <div class="tab-pane container {{ status }}" id="{{ pane_id }}">

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

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

            <div class="flex-shrink-0">
                {% if current_user.has_permission('Add preparations') %}
                <button
                    type="button"
                    class="btn btn-success btn-sm"
                    data-bs-toggle="modal"
                    data-bs-target="#modal-edit-preparation--1">
                    <i class="fa-solid fa-plus"></i>
                </button>
                {% endif %}
            </div>

        </div>

        {% for preparation in plasmid.preparations %}
            {{ pane_details(preparation, form) }}
        {% else %}
            <div class="fw-bold text-center mb-3">No preparations of this plasmid!</div>
        {% endfor %}

        {{ preparations_add_form(form(), "plasmids.preparations.add", "POST", -1, plasmid.id) }}

    </div>
{% endmacro %}
