{% load static %}
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

.sequence-detail-modern-font {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

.sequence-detail-modern-font .tab-content {
    padding: 1rem;
}

.sequence-detail-modern-font .sequence-tabs-readonly .tab,
.sequence-detail-modern-font .sequence-tabs-edit .tab {
    border: 1px solid rgb(203 213 225);
    background: rgb(241 245 249);
    color: rgb(71 85 105);
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 600;
}

.sequence-detail-modern-font .sequence-tabs-readonly .tab:hover,
.sequence-detail-modern-font .sequence-tabs-edit .tab:hover {
    background: rgb(226 232 240);
    color: rgb(15 23 42);
}

.sequence-detail-modern-font .sequence-tabs-readonly .tab:checked {
    background: rgb(255 255 255);
    color: rgb(37 99 235);
    border-bottom-color: rgb(255 255 255);
    border-top: 1px solid rgb(37 99 235);
}

.sequence-detail-modern-font .sequence-tabs-edit .tab:checked {
    background: rgb(255 255 255);
    color: rgb(249 115 22);
    border-bottom-color: rgb(255 255 255);
    border-top: 1px solid rgb(249 115 22);
}

@media (min-width: 640px) {
    .sequence-detail-modern-font .tab-content {
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .sequence-detail-modern-font .tab-content {
        padding: 2rem;
    }
}

.sequence-detail-modern-font input,
.sequence-detail-modern-font select,
.sequence-detail-modern-font textarea {
    font-size: 0.95rem;
}

@media (max-width: 639px) {
    .sequence-detail-modern-font input,
    .sequence-detail-modern-font select,
    .sequence-detail-modern-font textarea {
        font-size: 1rem;
        min-height: 2.65rem;
    }
}
</style>
<div id="sequence-detail-content"
     class="sequence-detail-modern-font mx-auto max-w-7xl px-3 py-4 sm:px-6 sm:py-6 lg:px-10">
    <div class="overflow-hidden rounded-2xl bg-white shadow-lg ring-1 ring-slate-200">
        <div class="flex flex-wrap items-center justify-end gap-2 border-b border-slate-200 bg-slate-50 px-4 py-3 sm:px-6">
            <button id="sequence-edit-toggle-btn"
                    type="button"
                    class="btn bg-orange-500 text-white hover:bg-orange-600"
                    onclick="toggleSequenceEditMode()">Edit</button>
            <button id="sequence-save-edit-btn"
                    type="button"
                    class="btn hidden bg-green-500 text-white hover:bg-green-600"
                    onclick="document.getElementById('sequence-update-form').requestSubmit()">Save</button>
            <button id="sequence-cancel-edit-btn"
                    type="button"
                    class="btn hidden bg-gray-500 text-white hover:bg-gray-600"
                    onclick="cancelSequenceEdit()">Cancel</button>
            <a href="{% url update_link object.pk %}"
               class="btn bg-blue-500 text-white hover:bg-blue-600">Clone</a>
            <a href="{% url create_link %}"
               hx-get="{% url create_link %}"
               hx-target="#main-content"
               hx-swap="innerHTML show:window:top"
               hx-push-url="true"
               class="btn bg-green-500 text-white hover:bg-green-600"
               role="button">New Sequence</a>
        </div>
        <div class="px-4 py-5 sm:px-6 sm:py-7 lg:px-8">
            <h3 class="mb-2 text-2xl font-extrabold leading-tight text-slate-900 sm:text-3xl lg:text-4xl">
                {{ object.name_display|default:object.name|default:"Unnamed sequence" }}
            </h3>
            <p class="text-sm font-semibold uppercase tracking-wide text-slate-500">Description</p>
            <p class="mt-2 whitespace-pre-wrap text-sm leading-relaxed text-slate-700 sm:text-base">
                {{ object.description|default:"No description provided." }}
            </p>
        </div>
        <div id="sequence-readonly-mode"
             class="block border-t border-slate-200 bg-slate-50 px-3 pb-4 pt-3 sm:px-6 sm:pb-6">
            <div role="tablist"
                 class="tabs tabs-lifted sequence-tabs-readonly gap-1 sm:gap-2">
                <input type="radio"
                       name="sequence-tabs"
                       role="tab"
                       class="tab js-tab-hint text-xs sm:text-sm"
                       aria-label="Identity"
                       data-tab-hint="Names, namespace and version information"
                       checked="checked" />
                <div role="tabpanel"
                     class="tab-content rounded-box border border-slate-200 bg-white shadow-sm p-4 sm:p-6">
                    <div class="grid grid-cols-1 gap-5 md:grid-cols-2 xl:gap-8">
                        <div class="space-y-1">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">Display Name</p>
                            <p class="text-sm font-semibold text-slate-800 sm:text-base">{{ object.name_display|default:"-" }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">Name</p>
                            <p class="text-sm font-semibold text-slate-800 sm:text-base">{{ object.name|default:"-" }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">Namespace</p>
                            <p class="text-sm font-semibold text-slate-800 sm:text-base">{{ object.namespace|default:"-" }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">Version</p>
                            <p class="text-sm font-semibold text-slate-800 sm:text-base">{{ object.version|default:"-" }}</p>
                        </div>
                    </div>
                </div>
                <input type="radio"
                       name="sequence-tabs"
                       role="tab"
                       class="tab js-tab-hint text-xs sm:text-sm"
                       aria-label="Classification"
                       data-tab-hint="Classification, status and tags" />
                <div role="tabpanel"
                     class="tab-content rounded-box border border-slate-200 bg-white shadow-sm p-4 sm:p-6">
                    <div class="grid grid-cols-1 gap-5 md:grid-cols-2 xl:gap-8">
                        <div class="space-y-1">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">Sequence Class</p>
                            <p class="text-sm font-semibold text-slate-800 sm:text-base">{{ object.sequence_class|default:"-" }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">Status</p>
                            <p class="text-sm font-semibold text-slate-800 sm:text-base">{{ object.status|default:"-" }}</p>
                        </div>
                        <div class="space-y-1 md:col-span-2">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">Tags</p>
                            {% if object.tags.all %}
                                <div class="flex flex-wrap gap-2">
                                    {% for tag in object.tags.all %}
                                        <span class="rounded-full bg-slate-100 px-3 py-1 text-sm font-medium text-slate-700">{{ tag }}</span>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <p class="text-sm text-slate-500">No tags linked.</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <input type="radio"
                       name="sequence-tabs"
                       role="tab"
                       class="tab js-tab-hint text-xs sm:text-sm"
                       aria-label="Bio & Source"
                       data-tab-hint="Biological identifiers and source details" />
                <div role="tabpanel"
                     class="tab-content rounded-box border border-slate-200 bg-white shadow-sm p-4 sm:p-6">
                    <div class="grid grid-cols-1 gap-5 md:grid-cols-2 xl:gap-8">
                        <div class="space-y-1">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">UniProt Accession</p>
                            <p class="text-sm font-semibold text-slate-800 sm:text-base">{{ object.uniprot_accession|default:"-" }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">NCBI GI</p>
                            <p class="text-sm font-semibold text-slate-800 sm:text-base">{{ object.ncbi_gi|default:"-" }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">NCBI Accession Version</p>
                            <p class="text-sm font-semibold text-slate-800 sm:text-base">{{ object.ncbi_accession_version|default:"-" }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">Media Type</p>
                            <p class="text-sm font-semibold text-slate-800 sm:text-base">{{ object.media_type|default:"-" }}</p>
                        </div>
                        <div class="space-y-1 md:col-span-2">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">Source Organism</p>
                            <pre class="rounded-lg bg-slate-100 p-3 text-xs text-slate-700 overflow-x-auto">{{ object.source_organism|default:"-" }}</pre>
                        </div>
                        <div class="space-y-1 md:col-span-2">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">Sequence</p>
                            <pre class="rounded-lg bg-slate-100 p-3 text-xs text-slate-700 overflow-x-auto whitespace-pre-wrap">{{ object.sequence|default:"-" }}</pre>
                        </div>
                    </div>
                </div>
                <input type="radio"
                       name="sequence-tabs"
                       role="tab"
                       class="tab js-tab-hint text-xs sm:text-sm"
                       aria-label="Tracking"
                       data-tab-hint="Hashes and tracking metadata" />
                <div role="tabpanel"
                     class="tab-content rounded-box border border-slate-200 bg-white shadow-sm p-4 sm:p-6">
                    <div class="grid grid-cols-1 gap-5 md:grid-cols-2 xl:gap-8">
                        <div class="space-y-1">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">IRI</p>
                            <p class="break-all text-sm font-semibold text-slate-800 sm:text-base">{{ object.iri|default:"-" }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">Last Modified</p>
                            <p class="text-sm font-semibold text-slate-800 sm:text-base">{{ object.datetime_last_modified|default:"-" }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">SHA256</p>
                            <p class="break-all text-sm font-semibold text-slate-800 sm:text-base">{{ object.hash_sha256|default:"-" }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">Blockchain Hash</p>
                            <p class="break-all text-sm font-semibold text-slate-800 sm:text-base">{{ object.hash_blockchain|default:"-" }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <p id="sequence-readonly-tab-hint"
               class="mt-2 text-xs text-slate-500 lg:hidden"></p>
        </div>
        <div id="sequence-edit-mode"
             class="hidden border-t border-slate-200 bg-slate-50 px-3 pb-4 pt-3 sm:px-6 sm:pb-6">
            <form id="sequence-update-form"
                  hx-post="{% url update_link object.pk %}"
                  hx-target="#main-content"
                  hx-swap="innerHTML show:window:top"
                  hx-push-url="true"
                  class="space-y-5">
                {% csrf_token %}
                <div role="tablist"
                     class="tabs tabs-lifted sequence-tabs-edit gap-1 sm:gap-2">
                    <input type="radio"
                           name="sequence-edit-tabs"
                           role="tab"
                           class="tab js-tab-hint text-xs sm:text-sm"
                           aria-label="Core"
                           data-tab-hint="Edit core identity and classification fields"
                           checked="checked" />
                    <div role="tabpanel"
                         class="tab-content rounded-box border border-slate-200 bg-white">
                        <div class="grid grid-cols-1 gap-5 md:grid-cols-2 xl:gap-8">
                            {% for field in form %}
                                {% if forloop.counter <= 8 %}
                                    <div>
                                        <label for="{{ field.id_for_label }}"
                                               class="mb-2 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">
                                            <span>{{ field.label }}</span>
                                            {% if field.help_text %}
                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                     width="14"
                                                     height="14"
                                                     viewBox="0 0 24 24"
                                                     fill="none"
                                                     stroke="currentColor"
                                                     stroke-width="2"
                                                     stroke-linecap="round"
                                                     stroke-linejoin="round"
                                                     class="text-slate-400 hover:text-slate-500 cursor-help"
                                                     title="{{ field.help_text|safe }}">
                                                    <circle cx="12" cy="12" r="10"></circle>
                                                    <line x1="12" y1="16" x2="12" y2="12"></line>
                                                    <line x1="12" y1="8" x2="12.01" y2="8"></line>
                                                </svg>
                                            {% endif %}
                                        </label>
                                        {{ field }}
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    <input type="radio"
                           name="sequence-edit-tabs"
                           role="tab"
                           class="tab js-tab-hint text-xs sm:text-sm"
                           aria-label="Advanced"
                           data-tab-hint="Edit advanced and metadata fields" />
                    <div role="tabpanel"
                         class="tab-content rounded-box border border-slate-200 bg-white">
                        <div class="grid grid-cols-1 gap-5 md:grid-cols-2 xl:gap-8">
                            {% for field in form %}
                                {% if forloop.counter > 8 %}
                                    <div>
                                        <label for="{{ field.id_for_label }}"
                                               class="mb-2 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500 sm:text-xs">
                                            <span>{{ field.label }}</span>
                                            {% if field.help_text %}
                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                     width="14"
                                                     height="14"
                                                     viewBox="0 0 24 24"
                                                     fill="none"
                                                     stroke="currentColor"
                                                     stroke-width="2"
                                                     stroke-linecap="round"
                                                     stroke-linejoin="round"
                                                     class="text-slate-400 hover:text-slate-500 cursor-help"
                                                     title="{{ field.help_text|safe }}">
                                                    <circle cx="12" cy="12" r="10"></circle>
                                                    <line x1="12" y1="16" x2="12" y2="12"></line>
                                                    <line x1="12" y1="8" x2="12.01" y2="8"></line>
                                                </svg>
                                            {% endif %}
                                        </label>
                                        {{ field }}
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <p id="sequence-edit-tab-hint"
                   class="mt-2 text-xs text-slate-500 lg:hidden"></p>
                <div class="flex flex-wrap gap-2 pt-3">
                    <button type="submit" class="btn bg-green-500 text-white hover:bg-green-600">Save Changes</button>
                    <button type="button"
                            onclick="cancelSequenceEdit()"
                            class="btn bg-gray-500 text-white hover:bg-gray-600">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    (() => {
        const root = document.getElementById('sequence-detail-content');
        if (!root || root.dataset.detailInit === 'true') {
            return;
        }
        root.dataset.detailInit = 'true';

        const readOnlyMode = document.getElementById('sequence-readonly-mode');
        const editMode = document.getElementById('sequence-edit-mode');
        const editToggleBtn = document.getElementById('sequence-edit-toggle-btn');
        const saveEditBtn = document.getElementById('sequence-save-edit-btn');
        const cancelEditBtn = document.getElementById('sequence-cancel-edit-btn');
        const readonlyHintLine = document.getElementById('sequence-readonly-tab-hint');
        const editHintLine = document.getElementById('sequence-edit-tab-hint');

        const syncActionButtons = () => {
            const inEdit = !editMode.classList.contains('hidden');
            editToggleBtn.classList.toggle('hidden', inEdit);
            saveEditBtn.classList.toggle('hidden', !inEdit);
            cancelEditBtn.classList.toggle('hidden', !inEdit);
        };

        window.toggleSequenceEditMode = () => {
            readOnlyMode.classList.toggle('hidden');
            editMode.classList.toggle('hidden');
            syncActionButtons();
        };

        window.cancelSequenceEdit = () => {
            const form = document.getElementById('sequence-update-form');
            form.reset();
            editMode.classList.add('hidden');
            readOnlyMode.classList.remove('hidden');
            syncActionButtons();
        };

        const syncHintLine = (tabName, hintElement, desktop) => {
            if (!hintElement) {
                return;
            }
            const activeTab = root.querySelector(`input[name="${tabName}"]:checked`);
            const hint = activeTab?.dataset.tabHint || '';
            hintElement.textContent = hint;
            hintElement.classList.toggle('hidden', desktop || !hint);
        };

        const applyTabHints = () => {
            const desktop = window.matchMedia('(min-width: 1024px)').matches;
            root.querySelectorAll('.js-tab-hint').forEach((tab) => {
                const hint = tab.dataset.tabHint || '';
                if (desktop && hint) {
                    tab.setAttribute('title', hint);
                } else {
                    tab.removeAttribute('title');
                }
            });
            syncHintLine('sequence-tabs', readonlyHintLine, desktop);
            syncHintLine('sequence-edit-tabs', editHintLine, desktop);
        };

        applyTabHints();
        root.querySelectorAll('.js-tab-hint').forEach((tab) => {
            tab.addEventListener('change', applyTabHints);
            tab.addEventListener('click', applyTabHints);
        });
        window.addEventListener('resize', applyTabHints);
        syncActionButtons();
    })();
</script>