{% extends 'lara_django_base/lara_base.html' %}

{% load static %}

{% 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 update_link  object.pk %}" class="btn btn-warning" role="button">Edit Item</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 btn-warning bg-orange-500 text-white">
                Edit
            </a>
    </div>
        <div class="px-4 py-5 sm:px-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900">{% 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">Description: {{ object.description }}</h4>
        </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>
                    <p> Name:
                        <span style="font-weight: bold;"> {{ object.name }} </span>
                    </p>
                </li>
                <li>
                    <p>
                        Created:
                        <span style="font-weight: bold;"> {{ object.datetime_created }} </span>
                    </p>
                </li>
                <li>
                  <p>
                      Entities:
                      {% for entity in object.entities.all %}
                      
                      <span style="font-weight: bold;"> {{ entity.name }} ({{ entity.acronym }}) </span> {% if not forloop.last %},{% endif %}
                      {% endfor %}
                     
                  </p>
              </li>
              <li>
                  <p>
                      Groups:
                      {% for group in object.groups.all %}
                      <span style="font-weight: bold;"> {{ group.name }} </span>
                      {% endfor %}
                  </p>
              </li>
                </ul>
                        <li>
                            <p>
                                Data File:
                                <span style="font-weight: bold;"> <a href="{% get_media_prefix %}{{ object.filename }}">{{ object.description }}</a>  </span>
                            </p>
                        </li>
                    
                </ul>

                <div role="tablist" class="tabs tabs-lifted">
                    <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1" checked="checked"/>
                    <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
                      Tab content 1
                    </div>
                  
                    <input
                      type="radio"
                      name="my_tabs_2"
                      role="tab"
                      class="tab"
                      aria-label="Tab 2"
                       />
                    <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
                      Tab content 2
                    </div>
                  
                    <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 3" />
                    <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
                      Tab content 3
                    </div>
                  </div>

            
         
        </div>
    </div>
    <div class="flex space-x-4">
        <span>
            {% partial experiment-create-card %}
        </span>
    </div>

    <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>
</div>
{% endblock %}