{% load static %}

{% partialdef experiment-create-card %}
{% include  "lara_django_projects/partials/experiment_create_card.html" %}
{% endpartialdef experiment-create-card %}

{% partialdef project-experiment-card %}
{% include  "lara_django_projects/partials/project_experiment_card.html" %}
{% endpartialdef project-experiment-card %}


<div id="experiment-detail-content" class="max-w-6xl mx-auto py-6 sm:px-6 lg:px-8">
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
        <div class="col-span-3 md:col-span-1 text-left md:text-right mt-2 md:mt-0">
            <a href="{% url update_link object.pk %}"
               hx-get="{% url update_link object.pk %}"
               hx-target="#main-content"
               hx-swap="innerHTML show:window:top"
               hx-push-url="true"
               class="btn bg-orange-500 hover:bg-orange-600 text-white">Edit</a>
            <a href="{% url update_link object.pk %}"
               class="btn bg-blue-500 hover:bg-blue-600 text-white">Clone</a>
            <a href="{% url 'lara_django_projects:experiment-create' %}"
               hx-get="{% url 'lara_django_projects:experiment-create' %}"
               hx-target="#main-content"
               hx-swap="innerHTML show:window:top"
               hx-push-url="true"
               class="btn bg-green-500 hover:bg-green-600 text-white"
               role="button">New sub-experiment</a>
        </div>
        <div class="px-4 py-5 sm:px-6">
            <h3 class="text-4xl leading-6 font-bold text-gray-900 mb-3">
                {% if object.name_display %}
                    {{ object.name_display }}
                {% else %}
                    {{ object.name_full }}
                {% endif %}
                {% if object.data_type %}({{ object.data_type }}){% endif %}
            </h3>
            <h4 class="card-text h4 pl-2 mb-3">Description:</h4>
            <p class="pl-4">{{ object.description }}</p>
        </div>
        <div class="border-t border-gray-200 bg-gray-50 px-4 py-5 sm:gap-4 sm:px-6">
            <ul class="list-group list-group-flush">
                <li class="list-group-item mb-3">
                    <p>Name: <span class="font-bold">{{ object.name }}</span></p>
                </li>
                <li class="list-group-item mb-3">
                    <p>Started: <span class="font-bold">{{ object.datetime_start }}</span></p>
                </li>
                <li class="list-group-item mb-3">
                    <p>
                        Entities:
                        {% for entity in object.entities.all %}
                            <span class="font-bold">{{ entity.name_full }} ({{ entity.acronym }})</span>
                            {% if not forloop.last %},{% endif %}
                        {% endfor %}
                    </p>
                </li>
                {% if object.groups.all %}
                <li>
                    <p>
                        Groups:
                        {% for group in object.groups.all %}<span class="font-bold">{{ group.name }}</span>{% endfor %}
                    </p>
                </li>
                {% endif %}
            </ul>
        </div>
        <div role="tablist" class="tabs tabs-lifted">
            <input type="radio" name="experiment-tabs" role="tab" class="tab" checked="checked" aria-label="Data" />
            <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
                <p>
                    Data File:
                    <span class="font-bold"><a href="{% get_media_prefix %}{{ object.file }}">{{ object.file }}</a></span>
                </p>
            </div>
            <input type="radio" name="experiment-tabs" role="tab" class="tab" aria-label="Experiments" />
            <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
                {% if experiments %}
                <div class="grid gap-2 grid-cols-3 px-6">
                    {% for item in experiments %}
                        {% with item_id=item.experiment_id %}
                            {% with item_url='lara_django_projects:experiment-detail' %}
                                {% partial project-experiment-card %}
                            {% endwith %}
                        {% endwith %}
                    {% endfor %}
                </div>
                {% else %}
                    {% partial experiment-create-card %}
                {% endif %}
            </div>
        </div>
    </div>
</div>