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

{% block extra_head %}
<link rel="stylesheet"
      href="/mojo-static/dist/vendored/litegraph.css" />
<script src="/mojo-static/dist/vendored/litegraph.js"></script>
<script type="module"
        src="/mojo-static/dist/trial-viewer.js"></script>
<style>
    /* Firefox's scrollbar theming API (no equivalent to ::-webkit-scrollbar-thumb
       below); main.css's .custom-scrollbar rule doesn't set this, so it's
       added here rather than duplicating the webkit thumb color rule too.
       That duplicate previously had its own slightly different dark shade
       (slate-700 vs main.css's token-driven slate-600) and, loading after
       main.css in the cascade at equal specificity, silently won on this
       page only, making the scrollbar thumb one shade darker here than on
       every other page. */
    .custom-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: var(--color-scrollbar-thumb) transparent;
    }

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

    /* LiteGraph context menus and dialogs must sit above the lab overlay (z-500) */
    .litecontextmenu,
    .litegraph.litecontextmenu {
        z-index: 600 !important;
    }
</style>
{% endblock %}

{% block content %}
<div x-data="trialViewer('{{ trial_id }}', '{{ external_url }}', {{ 'true' if show_quick_filters else 'false' }})"
     @dragenter.prevent="$event.dataTransfer?.types.includes('Files') && dragCounter++"
     @dragleave.prevent="$event.dataTransfer?.types.includes('Files') && dragCounter--"
     @dragover.prevent
     @drop.prevent="dragCounter = 0; handleDrop($event)"
     class="space-y-4 relative">

    {% include 'partials/trial_viewer/_overlays.html' %}
    {% include 'partials/trial_viewer/_header.html' %}
    {% include 'partials/trial_viewer/_plot_tabs.html' %}
    {% include 'partials/trial_viewer/_series_panel.html' %}
    {% include 'partials/trial_viewer/_chart.html' %}
    {% include 'partials/trial_viewer/_media_player.html' %}
    {% include 'partials/trial_viewer/_distributions.html' %}
    {% include 'partials/trial_viewer/_trial_status.html' %}
    {% include 'partials/trial_viewer/_trial_logs.html' %}
    {% include 'partials/trial_viewer/_json_editor.html' %}
    {% include 'partials/trial_viewer/_signal_lab.html' %}

</div>
{% endblock %}