{% extends "base.html" %}
{% block title %}{{ trial_id }} | MuJoCo Mojo{% endblock %}

{% block extra_head %}
<script src="/mojo-static/vendored/plotly-3.4.0.min.js"></script>
<script src="/mojo-static/vendored/lz-string.min.js"></script>
<script src="/mojo-static/vendored/iro.min.js"></script>
<script src="/mojo-static/js/trial-viewer.js"></script>
<style>
    .custom-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: #94a3b8 transparent;
    }

    .custom-scrollbar::-webkit-scrollbar {
        height: 3px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: #cbd5e1;
        border-radius: 10px;
    }

    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: #334155;
    }
</style>
{% endblock %}

{% block content %}
{# ── Repeated CSS class strings ─────────────────────────────────────────── #}
{% set dropdown_panel    = "absolute top-full left-0 w-full mt-1 bg-white dark:bg-slate-800 border border-slate-400 dark:border-slate-700 rounded-lg shadow-2xl z-[250] overflow-hidden" %}
{% set dropdown_option   = "w-full text-left px-3 py-2 text-sm font-mono border-b last:border-none border-slate-100 dark:border-slate-700" %}
{% set clear_btn         = "absolute right-0 top-0 h-full w-7 flex items-center justify-center text-slate-400 hover:text-rose-500 z-10 transition-colors" %}
{# sidebar-btn, sidebar-btn-plain, sidebar-btn-lock → .sidebar-btn CSS class in base.html #}
{% set dropdown_trigger  = "w-full flex items-center justify-between bg-slate-100 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-lg p-2 text-sm font-mono text-slate-700 dark:text-slate-200 transition-all hover:border-cyan-500/50" %}
{% set dropdown_trigger_disabled = "w-full flex items-center justify-between bg-slate-100 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-lg p-2 text-sm font-mono text-slate-700 dark:text-slate-200 transition-all hover:border-cyan-500/50 disabled:cursor-not-allowed" %}
{% set dropdown_trigger_sm = "w-full flex items-center justify-between bg-slate-100 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-md p-1.5 text-sm font-mono text-slate-700 dark:text-slate-200" %}
{# ─────────────────────────────────────────────────────────────────────────── #}

<div x-data="trialViewer('{{ trial_id }}', '{{ external_url }}')"
     @dragenter.prevent="dragCounter++"
     @dragleave.prevent="dragCounter--"
     @dragover.prevent
     @drop.prevent="dragCounter = 0; handleDrop($event)"
     class="space-y-4 relative pb-10">

    {% include 'partials/trial_viewer/_overlays.html' %}
    {% include 'partials/trial_viewer/_header.html' %}
    {% include 'partials/trial_viewer/_series_panel.html' %}
    {% include 'partials/trial_viewer/_chart.html' %}
    {% include 'partials/trial_viewer/_json_editor.html' %}

</div>
{% endblock %}