{% extends 'lara_django_base/lara_base.html' %}
{% load static %}
{% partialdef project-create-card %}
{% include 'lara_django_projects/components/project_create_card.html' %}
{% endpartialdef project-create-card %}
{% partialdef experiment-create-card %}
{% include 'lara_django_projects/components/experiment_create_card.html' %}
{% endpartialdef experiment-create-card %}
{% partialdef project-experiment-card %}
{% include 'lara_django_projects/components/project_experiment_card.html' %}
{% endpartialdef project-experiment-card %}
{% block toolbar %}
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">{{ section_title }}</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <div class="btn-group me-2">
                <a href="{% url 'lara_django_projects:project-create' %}"
                   class="btn bg-green-400 hover:bg-green-500 text-white"
                   role="button">New</a>
                <a href="{% url update_link  object.pk %}"
                   class="btn bg-orange-400 hover:bg-orange-500 text-white"
                   role="button">Edit Project</a>
            </div>
        </div>
    </div>
{% endblock %}
{% block content %}
    <div 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 %}"
                   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:project-create' %}"
                   class="btn bg-green-500 hover:bg-green-600 text-white"
                   role="button">New subproject</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 style="font-weight: bold;">{{ object.name }}</span>
                        </p>
                    </li>
                    <li class="list-group-item mb-3">
                        <p>
                            Started:
                            <span style="font-weight: bold;">{{ object.datetime_start }}</span>
                        </p>
                    </li>
                    <li class="list-group-item mb-3">
                        <p>
                            Entities:
                            {% for entity in object.entities.all %}
                                <span style="font-weight: bold;">{{ entity.name_full }} ({{ entity.acronym }}, {{ entity.role.name }})</span>
                                {% if not forloop.last %},{% endif %}
                            {% endfor %}
                        </p>
                    </li>
                    {% if object.groups.all %}
                    <li>
                        <p>
                            Groups:
                            {% for group in object.groups.all %}<span style="font-weight: bold;">{{ group.name }}</span>{% endfor %}
                        </p>
                    </li>
                    {% endif %}
                </ul>
            </ul>
            <div role="tablist" class="tabs tabs-lifted">
                <input type="radio"
                       name="project-tabs"
                       role="tab"
                       class="tab"
                       aria-label="Projects"
                       checked="checked" />
                <div role="tabpanel"
                     class="tab-content bg-base-100 border-base-300 rounded-box p-6">
                     {% if subprojects %}
                    <div class="grid gap-2 grid-cols-3 px-6">
                       
                            {% for item in subprojects %}
                                {% with item_id=item.project_id %}
                                    {% with item_url='lara_django_projects:project-detail' %}
                                        {% partial project-experiment-card %}
                                    {% endwith %}
                                {% endwith %}
                            {% endfor %}
                        </div>
                        {% else %}
                    {% partial project-create-card %}
                    {% endif %}
                    </div>
                <input type="radio"
                       name="project-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>
                <input type="radio"
                       name="project-tabs"
                       role="tab"
                       class="tab"
                       aria-label="Data" />
                <div role="tabpanel"
                     class="tab-content bg-base-100 border-base-300 rounded-box p-6">
                    <p>
                        Data File:
                        <span style="font-weight: bold;"> <a href="{% get_media_prefix %}{{ object.file }}">{{ object.file }}</a>  </span>
                    </p>
                </div>
            </div>
        </div>
    </div>    
</div>
{% endblock %}
{% block scripts %}
<script src="{% static 'lara_django_base/js/toggle-drawer-on-load.js' %}" defer></script>
{% endblock %}