{% 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: </h4>
                <textarea id="markdown-input" rows="10" cols="100" placeholder="Write your Markdown here...">{{ object.description }}</textarea>
               
        </div>
        Preview:
        <div id="preview"></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.file }}">{{ object.file }}</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>


<script type="module">
   import { marked } from "https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js";
   import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });

  // Initialize Mermaid
 mermaid.initialize({ startOnLoad: false });

  // Function to render Markdown and Mermaid
  function renderPreview() {
      const markdownInput = document.getElementById('markdown-input').value;
      const previewDiv = document.getElementById('preview');

      // Render Markdown
      const renderedMarkdown = marked.parse(markdownInput);
      previewDiv.innerHTML = renderedMarkdown;

      // Render Mermaid diagrams
      mermaid.init(undefined, previewDiv);
      console.log('Mermaid diagrams rendered');
  }

  // Attach event listener to the textarea
  document.getElementById('markdown-input').addEventListener('input', renderPreview);

  // Initial render
  //renderPreview();
</script>

{% endblock %}

{% block script %}

{% endblock script %}