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

{% load static %}


{% 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">

                        <div class="carousel w-full">
            {% for vis in object.visualisations.all %}
            <div id="slide{{ forloop.counter }}" class="carousel-item relative w-full {% if forloop.first %}rounded-box mb-3{% endif %}">
                <figure class="mx-18">
                <a href="{% get_media_prefix %}{{ vis.image }}">
                    <img src="{% get_media_prefix %}{{ vis.image }}" class="w-full rounded-box" alt="{{ vis.title|default:'visualisation-image' }}">
                </a>
                </figure>
                <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
                <a href="#slide{% if forloop.first %}{{ forloop.length }}{% else %}{{ forloop.counter|add:'-1' }}{% endif %}" class="btn btn-circle">❮</a>
                <a href="#slide{% if forloop.last %}1{% else %}{{ forloop.counter|add:'1' }}{% endif %}" class="btn btn-circle">❯</a>
                </div>
            </div>
            {% empty %}
            <div class="carousel-item relative w-full rounded-box mb-3">
                <figure class="mx-18">
                <img
                    src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp"
                    class="w-full rounded-box"
                    alt="No visualisations available" />
                </figure>
            </div>
            {% endfor %}
            </div>

            <ul class="list-none p-0">
                <li class="border-b border-gray-200 py-2">
                    <p>
                        Name:
                        <span class="font-bold">{{ object.name }}</span>
                    </p>
                </li>
                <li class="border-b border-gray-200 py-2">
                    <p>
                        Description:
                        <span class="font-bold">{{ object.description }}</span>
                    </p>
                </li>
                <li class="border-b border-gray-200 py-2">
                    <p>
                        Created:
                        <span class="font-bold">{{ object.datetime_created }}</span>
                    </p>
                </li>
                <li class="border-b border-gray-200 py-2">
                    <p>
                        Entities:
                        {% for entity in object.users.all %}
                            <span class="font-bold">{{ entity.name_full }} ({{ entity.acronym }})</span>
                            {% if not forloop.last %},{% endif %}
                        {% endfor %}
                    </p>
                </li>
                {% if object.groups.all %}
                <li class="border-b border-gray-200 py-2">
                    <p>
                        Groups:
                        {% for group in object.groups.all %}
                            <span class="font-bold">{{ group.name }}</span>
                        {% endfor %}
                    </p>
                </li>
                {% endif %}
            </ul>
            
                <div role="tablist" class="tabs tabs-lifted">
                    <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Links" checked="checked"/>
                    <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
                        <ul>
    
                            <li>
                              <label >PID : </label> <a href="{{ object.pid }}">{{ object.pid }}</a>
                            </li>
                            <li>
                                <label >DOI : </label> {{ object.doi }}

                            </li>
                        </ul>
                    </div>
                    <input
                      type="radio"
                      name="my_tabs_2"
                      role="tab"
                      class="tab"
                      aria-label="Metadata"
                       />
                    <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
                        {% if object.metadata %}
                        <style>
                            body {
                                font-family: Arial, sans-serif;
                                background-color: #f4f4f4;
                                padding: 20px;
                            }
                            pre {
                                background-color: #fff;
                                padding: 20px;
                                border-radius: 5px;
                                border: 1px solid #ddd;
                                white-space: pre-wrap;
                                word-wrap: break-word;
                            }
                        </style>
                        <pre id="json-content">{{ object.metadata }}</pre>
                        <!--script>
                            console.log('Metadata: ');
                            console.log('{{ object.metadata }}');
                            var json = JSON.parse('{{ object.metadata }}');
                            document.getElementById('json-content').textContent = JSON.stringify(json, null, 2);
                        </script-->


                        {% else %}
                        <p> No metadata available </p>
                        {% endif %}
                    </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>
{% endblock %}