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

{% block extra_head %}
<script src="/static/plotly-3.4.0.min.js"></script>
<script src="/static/lz-string.min.js"></script>
<script src="/static/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 %}
<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">
    <!-- toast for sharable link (teleported to body so it is sticky)-->
    <template x-teleport="body">
        <div x-show="showToast"
             style="display: none;"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 -translate-y-12"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 -translate-y-12"
             class="fixed top-10 left-1/2 -translate-x-1/2 z-[1000] pointer-events-none">

            <div class="flex items-center gap-3 px-6 py-3 rounded-full border transition-colors duration-300 shadow-2xl"
                 :class="{
                'bg-cyan-500 border-cyan-500 text-white dark:text-slate-950': toastType === 'success',
                'bg-rose-500 border-rose-400 text-white': toastType === 'error',
                'bg-slate-700 border-slate-600 text-white': toastType === 'info'
             }">

                <svg class="w-4 h-4 shrink-0"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24">

                    <path x-show="toastType === 'success'"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="3"
                          d="M5 13l4 4L19 7" />

                    <path x-show="toastType === 'error'"
                          style="display: none;"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="3"
                          d="M6 18L18 6M6 6l12 12" />

                    <path x-show="toastType === 'info'"
                          style="display: none;"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="3"
                          d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>

                <span class="text-[10px] font-mono font-black tracking-widest uppercase"
                      x-text="toastMessage"></span>
            </div>
        </div>
    </template>

    <!-- drag and drop json to setup plot -->
    <div x-show="dragCounter > 0"
         style="display: none;"
         x-transition:enter="transition opacity duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         class="fixed inset-0 z-[1000] bg-cyan-500/10 dark:bg-cyan-500/5 backdrop-blur-md border-4 border-dashed border-cyan-500 flex items-center justify-center pointer-events-none">
        <div class="bg-white dark:bg-slate-900 p-8 rounded-3xl shadow-2xl border border-cyan-500 flex flex-col items-center gap-4">
            <div class="w-16 h-16 bg-cyan-500/10 rounded-full flex items-center justify-center text-cyan-500">
                <svg class="w-8 h-8"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24">
                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                </svg>
            </div>
            <div class="bg-white dark:bg-slate-900 p-8 rounded-3xl shadow-2xl border border-cyan-500 flex flex-col items-center gap-4">
                <p class="text-sm font-mono font-black uppercase tracking-widest text-slate-700 dark:text-cyan-500">
                    Drop Config to Warp
                </p>
            </div>
        </div>
    </div>

    <div class="flex flex-col lg:flex-row lg:items-center justify-between border-b border-slate-400 dark:border-slate-700 pb-4 gap-4">
        <!-- back button -->
        <div class="flex items-center gap-3 text-xs sm:text-sm font-mono shrink-0">
            <a href="/mosaic"
               class="flex items-center gap-2 text-slate-500 hover:text-cyan-500 dark:hover:text-cyan-500 transition-colors whitespace-nowrap group">
                <svg class="w-4 h-4 transition-transform group-hover:-translate-x-1"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24">
                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2.5"
                          d="M11 17l-5-5m0 0l5-5m-5 5h12" />
                </svg>
                <span class="hidden sm:inline">Back to</span><span class="font-bold">All</span>
            </a>
            <span class="text-slate-300 dark:text-slate-600">/</span>
            <span class="text-cyan-500 dark:text-cyan-500 font-bold uppercase tracking-widest truncate max-w-[120px] xs:max-w-none"
                  title="{{ trial_id }}">{{ trial_id }}</span>
        </div>

        <div class="flex flex-col sm:flex-row items-end sm:items-center gap-3">
            <!-- help menu -->
            <div class="relative group hidden md:block mr-1">
                <div class="cursor-help text-slate-400 hover:text-cyan-500 dark:hover:text-cyan-500 transition-colors">
                    <svg class="w-5 h-5"
                         fill="none"
                         stroke="currentColor"
                         stroke-width="2"
                         viewBox="0 0 24 24">
                        <circle cx="12"
                                cy="12"
                                r="10" />
                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m0 4h.01" />
                    </svg>
                </div>

                <div class="absolute right-0 top-full mt-2 w-56 bg-white dark:bg-slate-800 border border-slate-400 dark:border-slate-700 rounded-xl shadow-2xl p-4 z-50 invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all z-[300]">
                    <p class="text-[10px] font-black uppercase text-slate-400 mb-3 tracking-widest border-b border-slate-200 dark:border-slate-700 pb-1">
                        Keyboard Shortcuts</p>
                    <div class="space-y-3 font-mono text-[10px]">
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">Next / Prev</span>
                            <span class="flex gap-1"><kbd>←</kbd><kbd>→</kbd></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">Focus on Warp Box</span>
                            <kbd>/</kbd>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">Inrc. / Decr. Warp Trial</span>
                            <span class="flex gap-1"><kbd>↑</kbd><kbd>↓</kbd></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">Unfocus Warp Box</span>
                            <kbd>Esc</kbd>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">Execute Warp</span>
                            <kbd>Enter</kbd>
                        </div>
                    </div>
                </div>
            </div>

            <!-- trial selector -->
            <div class="flex items-center h-9 gap-1.5 bg-slate-300/50 dark:bg-slate-800/50 p-1 rounded-md border border-slate-300 dark:border-slate-800 transition-all focus-within:border-cyan-500/50 w-full sm:w-[280px] justify-between shadow-md">
                <!-- prev. button -->
                {% if prev_id %}
                <a href="/mosaic/{{ prev_id }}"
                   id="nav-prev"
                   class="logo-style !drop-shadow-none hover:!drop-shadow-none px-2 py-1 text-[10px] sm:text-xs font-mono font-bold text-slate-500 hover:text-cyan-500 dark:hover:text-cyan-500 flex items-center gap-1 transition-all">
                    <svg class="w-3 h-3"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24">
                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="3"
                              d="M15 19l-7-7 7-7" />
                    </svg>PREV
                </a>
                {% else %}
                <span class="px-2 py-1 text-[10px] sm:text-xs font-mono font-bold text-slate-400 dark:text-slate-600 flex items-center gap-1 cursor-not-allowed opacity-50">
                    <svg class="w-3 h-3"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24">
                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="3"
                              d="M15 19l-7-7 7-7" />
                    </svg>PREV
                </span>
                {% endif %}

                <!-- manual -->
                <div class="flex items-center bg-white dark:bg-slate-950 border border-slate-300 dark:border-slate-800 rounded-md shadow-sm">
                    <input type="number"
                           x-model.number="warpId"
                           @keyup.enter="warpToTrial()"
                           inputmode="numeric"
                           pattern="[0-9]*"
                           placeholder="#"
                           class="w-10 sm:w-12 h-6 bg-transparent text-center outline-none text-base sm:text-[10px] font-mono font-bold text-cyan-500 dark:text-cyan-500 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
                    <button x-show="(warpId === 0 || warpId) && warpId != parseInt(trialId.split('_').pop())"
                            @click="warpToTrial()"
                            x-transition
                            class="mr-1 px-2 py-0.5 bg-cyan-500 dark:bg-cyan-500 text-white dark:text-slate-950 text-[9px] font-black uppercase rounded-xl shadow-sm hover:bg-cyan-500 transition-colors">Warp</button>
                </div>

                <!-- next button -->
                {% if next_id %}
                <a href="/mosaic/{{ next_id }}"
                   id="nav-next"
                   class="logo-style !drop-shadow-none hover:!drop-shadow-none px-2 py-1 text-[10px] sm:text-xs font-mono font-bold text-slate-500 hover:text-cyan-500 dark:hover:text-cyan-500 flex items-center gap-1 transition-all">
                    NEXT<svg class="w-3 h-3"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24">
                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="3"
                              d="M9 5l7 7-7 7" />
                    </svg>
                </a>
                {% else %}
                <span class="px-2 py-1 text-[10px] sm:text-xs font-mono font-bold text-slate-400 dark:text-slate-600 flex items-center gap-1 cursor-not-allowed opacity-50">
                    NEXT<svg class="w-3 h-3"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24">
                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="3"
                              d="M9 5l7 7-7 7" />
                    </svg>
                </span>
                {% endif %}
            </div>

            <!-- versus selector -->
            <div class="relative w-full sm:w-[280px]"
                 x-data="{ open: false }">
                <div @click="if(vsDraft.enabled) open = !open"
                     class="flex items-center h-9 bg-slate-300/50 dark:bg-slate-800/50 p-1 rounded-md border border-slate-300 dark:border-slate-800 transition-all w-full justify-between select-none"
                     :class="vsDraft.enabled ? 'cursor-pointer hover:border-slate-400 dark:hover:border-slate-600' : 'cursor-default'">

                    <div class="flex items-center gap-2 flex-1 min-w-0">
                        <label class="relative inline-flex items-center cursor-pointer shrink-0"
                               @click.stop>
                            <input type="checkbox"
                                   x-model="vsDraft.enabled"
                                   @change="handleVsToggle()"
                                   class="sr-only">

                            <div class="w-10 h-6 bg-slate-200 dark:bg-slate-800 border-2 border-slate-300 dark:border-slate-700 rounded-md transition-colors duration-200"
                                 :class="vsDraft.enabled ? 'bg-cyan-500/20 border-cyan-500' : ''"></div>

                            <div class="absolute left-1 top-1 w-4 h-4 rounded-sm transition-all duration-200 shadow-sm"
                                 :class="vsDraft.enabled
                        ? 'translate-x-4 bg-cyan-500'
                        : 'translate-x-0 bg-slate-400 dark:bg-slate-500'"></div>
                        </label>

                        <span class="text-[9px] font-black uppercase tracking-tighter truncate"
                              :class="vsDraft.enabled ? 'text-slate-700 dark:text-slate-200' : 'text-slate-500/30 dark:text-slate-400/20'"
                              x-text="`VS. ${vsDraft.range[0]}-${vsDraft.range[1]}`"></span>

                        <template x-if="vsDraft.enabled">
                            <button @click.stop="syncVsRange()"
                                    :disabled="vsLoading"
                                    class="ml-auto px-3 h-6 bg-cyan-500 hover:bg-cyan-600 text-white text-[10px] font-black uppercase tracking-widest rounded-lg transition-all active:scale-95 flex items-center gap-2  disabled:opacity-50">
                                <span x-show="!vsLoading">Apply</span>
                                <svg x-show="vsLoading"
                                     class="animate-spin h-3 w-3 text-white"
                                     viewBox="0 0 24 24">
                                    <circle class="opacity-25"
                                            cx="12"
                                            cy="12"
                                            r="10"
                                            stroke="currentColor"
                                            stroke-width="4"
                                            fill="none"></circle>
                                    <path class="opacity-75"
                                          fill="currentColor"
                                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                            </button>
                        </template>
                    </div>

                    <div class="px-1 h-full flex items-center transition-all"
                         :class="vsDraft.enabled ? 'text-slate-500' : 'text-slate-500/10'">
                        <svg class="w-3 h-3 transition-transform"
                             :class="open ? 'rotate-180' : ''"
                             fill="none"
                             stroke="currentColor"
                             stroke-width="3"
                             viewBox="0 0 24 24">
                            <path d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                </div>

                <div x-show="open && vsDraft.enabled"
                     x-transition:enter="transition ease-out duration-100"
                     x-transition:enter-start="opacity-0 scale-95"
                     x-transition:enter-end="opacity-100 scale-100"
                     @click.away="open = false"
                     class="absolute top-full right-0 mt-1 w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-md z-[400] p-4 space-y-4 shadow-none">

                    <p class="text-[9px] font-black uppercase text-slate-400 tracking-widest border-b border-slate-100 dark:border-slate-800 pb-1">Range Settings</p>

                    <div class="grid grid-cols-2 gap-3">
                        <div class="space-y-1">
                            <label class="text-[8px] font-bold text-slate-500">START</label>
                            <div x-show="vsDraft.enabled"
                                 class="flex items-center bg-white dark:bg-slate-950 border border-slate-300 dark:border-slate-800 rounded-md shadow-sm ml-auto">
                                <input type="number"
                                       x-model.number="vsDraft.range[0]"
                                       inputmode="numeric"
                                       pattern="[0-9]*"
                                       class="h-6 bg-transparent text-center outline-none text-base sm:text-[10px] font-mono font-bold text-cyan-500 dark:text-cyan-500 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
                            </div>
                        </div>
                        <div class="space-y-1">
                            <label class="text-[8px] font-bold text-slate-500">END</label>
                            <div x-show="vsDraft.enabled"
                                 class="flex items-center bg-white dark:bg-slate-950 border border-slate-300 dark:border-slate-800 rounded-md shadow-sm ml-auto">
                                <input type="number"
                                       x-model.number="vsDraft.range[1]"
                                       inputmode="numeric"
                                       pattern="[0-9]*"
                                       class="h-6 bg-transparent text-center outline-none text-base sm:text-[10px]  font-mono font-bold text-cyan-500 dark:text-cyan-500 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
                            </div>
                        </div>
                    </div>

                    <div class="relative h-6 flex items-center px-2"
                         x-data="{
        get fleetIds() {
            return allTrials.filter(t => t?.id).map(t => parseInt(t.id.split('_').pop()) || 0)
        },
        get fMin() { return this.fleetIds.length ? Math.min(...this.fleetIds) : 0 },
        get fMax() { return this.fleetIds.length ? Math.max(...this.fleetIds) : 1000 },
        get total() { return (this.fMax - this.fMin) || 1 },
        get lo() { return Math.min(vsDraft.range[0], vsDraft.range[1]) },
        get hi() { return Math.max(vsDraft.range[0], vsDraft.range[1]) }
     }">

                        <div class="absolute inset-x-2 h-1 bg-slate-200 dark:bg-slate-950 rounded-full"></div>

                        <div class="absolute h-1 bg-cyan-500 transition-none"
                             :style="`
            left: ${((lo - fMin) / total) * 100}%;
            right: ${100 - (((hi - fMin) / total) * 100)}%;
         `"
                             x-show="vsDraft.enabled">
                        </div>

                        <input type="range"
                               :min="fMin"
                               :max="fMax"
                               x-model.number="vsDraft.range[0]"
                               class="absolute left-0 w-full appearance-none bg-transparent pointer-events-none z-20
                  [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:pointer-events-auto
                  [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-cyan-500
                  [&::-webkit-slider-thumb]:rounded-sm [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3
                  [&::-moz-range-thumb]:bg-cyan-500 [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:pointer-events-auto">

                        <input type="range"
                               :min="fMin"
                               :max="fMax"
                               x-model.number="vsDraft.range[1]"
                               class="absolute left-0 w-full appearance-none bg-transparent pointer-events-none z-30
                  [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:pointer-events-auto
                  [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-cyan-500
                  [&::-webkit-slider-thumb]:rounded-sm [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3
                  [&::-moz-range-thumb]:bg-cyan-500 [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:pointer-events-auto">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- series selections -->
    <div class="bg-white dark:bg-slate-800 p-3 rounded-xl border border-slate-400 dark:border-slate-700 shadow-md flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 w-full"
         x-show="
         !loading
         &&
         data">

        <!-- x axis selector -->
        <div class="flex items-center gap-2 shrink-0 w-full sm:w-auto">
            <span class="text-[10px] font-black uppercase text-slate-400 w-12 sm:w-auto">X-Axis</span>

            <div class="relative flex-1 sm:flex-none"
                 @click.away="xMenuOpen = false">
                <button @click="xMenuOpen = !xMenuOpen"
                        class="w-full bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded px-3 py-1 text-[10px] font-mono font-bold text-slate-700 dark:text-slate-200 flex items-center justify-between gap-2 hover:border-cyan-500 transition-all min-w-[120px]">
                    <span x-text="config.xAxis"
                          class="truncate"></span>
                    <svg class="w-3 h-3 transition-transform"
                         :class="xMenuOpen ? 'rotate-180' : ''"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24">
                        <path d="M19 9l-7 7-7-7"
                              stroke-width="3" />
                    </svg>
                </button>

                <div x-show="xMenuOpen"
                     x-transition
                     class="absolute top-full left-0 mt-2 w-full sm:w-64 bg-white dark:bg-slate-800 border border-slate-400 dark:border-slate-700 rounded-xl shadow-2xl z-[110] p-2">

                    <div class="relative mb-2">
                        <input type="text"
                               x-model="xSearch"
                               placeholder="Filter..."
                               class="w-full bg-white dark:bg-slate-950 border border-slate-300 dark:border-slate-800 rounded-md shadow-sm px-2 pr-8 py-1.5 text-base sm:text-[10px] font-mono text-slate-700 dark:text-slate-200 focus:ring-1 focus:ring-cyan-500 outline-none" />
                        <button x-show="xSearch"
                                type="button"
                                @mousedown.prevent="xSearch = ''"
                                class="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">
                            <svg class="w-3 h-3"
                                 fill="none"
                                 stroke="currentColor"
                                 viewBox="0 0 24 24">
                                <path stroke-linecap="round"
                                      stroke-linejoin="round"
                                      stroke-width="3"
                                      d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    <div class="flex flex-col gap-1 mb-2">
                        <template x-for="depth in getActiveLevels('x')"
                                  :key="depth">
                            <div x-show="getSegmentsAtDepth('x', depth).length > 0"
                                 class="flex items-center gap-1.5 overflow-x-auto custom-scrollbar pt-1 pb-2 flex-nowrap border-b border-slate-100 dark:border-slate-800/40 last:border-none">
                                <template x-for="seg in getSegmentsAtDepth('x', depth)"
                                          :key="seg">
                                    <button @mousedown.prevent="toggleRegexSegment('x', seg, depth)"
                                            :class="xSearch.split('/')[depth]?.includes(seg) ? 'bg-cyan-500 text-white border-cyan-500' : 'bg-slate-100 dark:bg-slate-900 text-slate-500 border-transparent hover:border-slate-300'"
                                            class="shrink-0 px-2.5 py-1 rounded-md border text-[11px] font-bold transition-all"
                                            x-text="seg"></button>
                                </template>
                            </div>
                        </template>

                        <div x-show="getAvailableSuffixes('x').length > 0"
                             class="flex items-center gap-1.5 overflow-x-auto custom-scrollbar pt-2 pb-2 flex-nowrap">
                            <template x-for="sfx in getAvailableSuffixes('x')"
                                      :key="sfx">
                                <button @mousedown.prevent="toggleRegexSegment('x', sfx, 'suffix')"
                                        :class="xSearch.split(':').pop()?.split('|').includes(sfx.replace(':','')) ? 'bg-amber-500 text-white border-amber-500' : 'bg-slate-100 dark:bg-slate-900 text-slate-400 border-slate-200 dark:border-slate-800 hover:border-amber-500/40'"
                                        class="shrink-0 px-2.5 py-1 rounded border text-[11px] font-mono font-bold transition-all"
                                        x-text="sfx"></button>
                            </template>
                        </div>
                    </div>

                    <div class="max-h-48 overflow-y-auto custom-scrollbar space-y-1">
                        <template x-for="col in getFilteredCols('x')"
                                  :key="col">
                            <button @click="config.xAxis = col; xMenuOpen = false; xSearch = ''; saveAndRender()"
                                    class="w-full text-left px-2 py-1.5 rounded hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors flex items-center justify-between group border-b last:border-none border-slate-100 dark:border-slate-700">
                                <span class="text-[10px] font-mono font-bold truncate pr-2"
                                      :class="config.xAxis === col ? 'text-cyan-500' : 'text-slate-500 dark:text-slate-400'"
                                      x-text="col"></span>
                                <span x-show="config.xAxis === col"
                                      class="w-1.5 h-1.5 rounded-full bg-cyan-500 shrink-0"></span>
                            </button>
                        </template>

                        <div x-show="getFilteredCols('x').length === 0"
                             class="text-[10px] font-mono italic text-slate-400 p-2">
                            No matching signals...
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- y axis selector and ribbon -->
        <div class="flex-1 flex items-center gap-2 min-w-0 w-full">
            <span class="text-[10px] font-black uppercase text-slate-400 shrink-0 w-12 sm:w-auto">Y-Axis</span>

            <div class="relative"
                 @click.away="yMenuOpen = false">
                <button @click="yMenuOpen = !yMenuOpen"
                        class="shrink-0 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded px-3 py-1 text-[10px] font-mono font-bold text-slate-700 dark:text-slate-200 flex items-center gap-2 hover:border-cyan-500 transition-all">
                    <span x-text="config.yAxes.length"></span>
                    <svg class="w-3 h-3 transition-transform"
                         :class="yMenuOpen ? 'rotate-180' : ''"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24">
                        <path d="M19 9l-7 7-7-7"
                              stroke-width="3" />
                    </svg>
                </button>

                <div x-show="yMenuOpen"
                     x-transition
                     class="absolute top-full left-0 mt-2 w-64 bg-white dark:bg-slate-800 border border-slate-400 dark:border-slate-700 rounded-xl shadow-2xl z-[100] p-2">

                    <div class="relative mb-2">
                        <input type="text"
                               x-model="ySearch"
                               placeholder="Filter..."
                               class="w-full bg-white dark:bg-slate-950 border border-slate-300 dark:border-slate-800 rounded-md shadow-sm px-2 pr-8 py-1.5 text-base sm:text-[10px] font-mono text-slate-700 dark:text-slate-200 focus:ring-1 focus:ring-cyan-500 outline-none" />

                        <button x-show="ySearch"
                                type="button"
                                @mousedown.prevent="ySearch = ''"
                                class="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"
                                x-transition:enter="transition duration-75"
                                x-transition:enter-start="opacity-0"
                                x-transition:enter-end="opacity-100">
                            <svg class="w-3 h-3"
                                 fill="none"
                                 stroke="currentColor"
                                 viewBox="0 0 24 24">
                                <path stroke-linecap="round"
                                      stroke-linejoin="round"
                                      stroke-width="3"
                                      d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                    <div class="flex flex-col gap-1 mb-4">
                        <template x-for="depth in getActiveLevels('y')"
                                  :key="depth">
                            <div x-show="getSegmentsAtDepth('y', depth).length > 0"
                                 x-transition
                                 class="flex items-center gap-1.5 overflow-x-auto custom-scrollbar pt-1 pb-2 flex-nowrap border-b border-slate-100 dark:border-slate-800/40 last:border-none">

                                <template x-for="seg in getSegmentsAtDepth('y', depth)"
                                          :key="seg">
                                    <button @mousedown.prevent="toggleRegexSegment('y', seg, depth)"
                                            :class="ySearch.split('/')[depth]?.includes(seg)
                                ? 'bg-cyan-500 text-white border-cyan-500 shadow-sm'
                                : 'bg-slate-100 dark:bg-slate-900 text-slate-500 border-transparent hover:border-slate-300'"
                                            class="shrink-0 px-2.5 py-1 rounded-md border text-[11px] font-bold transition-all"
                                            x-text="seg"></button>
                                </template>
                            </div>
                        </template>

                        <div x-show="getAvailableSuffixes('y').length > 0"
                             class="flex items-center gap-1.5 overflow-x-auto custom-scrollbar pt-2 pb-2 flex-nowrap">
                            <template x-for="sfx in getAvailableSuffixes('y')"
                                      :key="sfx">
                                <button @mousedown.prevent="toggleRegexSegment('y', sfx, 'suffix')"
                                        :class="ySearch.split(':').pop()?.split('|').includes(sfx.replace(':',''))
                            ? 'bg-amber-500 text-white border-amber-500 shadow-sm'
                            : 'bg-slate-100 dark:bg-slate-900 text-slate-400 border-slate-200 dark:border-slate-800 hover:border-amber-500/40'"
                                        class="shrink-0 px-2.5 py-1 rounded border text-[11px] font-mono font-bold transition-all"
                                        x-text="sfx"></button>
                            </template>
                        </div>
                    </div>

                    <div class="max-h-64 overflow-y-auto custom-scrollbar space-y-1 border-b border-t border-slate-100 dark:border-slate-700 py-2">
                        <template x-for="col in getFilteredCols('y')"
                                  :key="col">
                            <label class="flex items-center gap-2 px-2 py-1 rounded hover:bg-slate-100 dark:hover:bg-slate-700 cursor-pointer group border-b last:border-none border-slate-100 dark:border-slate-700">
                                <input type="checkbox"
                                       :checked="config.yAxes.includes(col)"
                                       @click.stop="toggleY(col)"
                                       class="rounded text-cyan-500 w-3 h-3 border-slate-300 dark:border-slate-600 accent-cyan-500 bg-white dark:bg-slate-800" />
                                <span class="text-[10px] font-mono font-bold"
                                      :class="config.yAxes.includes(col) ? 'text-cyan-500' : 'text-slate-500 dark:text-slate-400'"
                                      x-text="col"></span>
                            </label>
                        </template>
                    </div>

                    <div class="flex items-center justify-between px-1 my-2 gap-2 h-8">
                        <span class="text-[9px] font-black uppercase text-slate-400 tracking-tighter shrink-0"
                              x-text="`${getFilteredCols('y').length} Signals`"
                              x-show="getFilteredCols('y').length > 0"></span>

                        <button @click="clearYAxes()"
                                x-show="config.yAxes.length > 0"
                                x-transition
                                class="flex-1 flex items-center justify-center gap-2 px-2 py-1.5 bg-rose-500/10 hover:bg-rose-500 text-rose-500 hover:text-white border border-rose-500/20 rounded-lg text-[9px] font-black uppercase tracking-widest transition-all group">
                            <svg class="w-3 h-3 transition-transform group-hover:scale-110"
                                 fill="none"
                                 stroke="currentColor"
                                 viewBox="0 0 24 24">
                                <path stroke-linecap="round"
                                      stroke-linejoin="round"
                                      stroke-width="2.5"
                                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                            Deselect All
                        </button>
                    </div>
                </div>
            </div>
            <div class="flex-1 flex items-center h-8 gap-1 overflow-x-auto no-scrollbar [mask-image:linear-gradient(to_right,black_90%,transparent)] py-1">
                <template x-for="(col, index) in config.yAxes"
                          :key="col">
                    <span class="shrink-0 pl-2 pr-1 py-0.5 rounded text-[9px] font-mono font-bold flex items-center gap-1 group/chip transition-all shadow-sm border"
                          :style="`
                background-color: ${getSignalColor(index)}1a;
                border-color: ${getSignalColor(index)}4d;
                color: ${getSignalColor(index)};
              `"
                          @mouseenter="$el.style.borderColor = getSignalColor(index)"
                          @mouseleave="$el.style.borderColor = getSignalColor(index) + '4d'">

                        <span x-text="col"></span>

                        <button @click.stop="toggleY(col)"
                                class="p-0.5 rounded-md transition-colors"
                                :style="`color: ${getSignalColor(index)}66;`"
                                @mouseenter="$el.style.backgroundColor = getSignalColor(index) + '33'; $el.style.color = getSignalColor(index)"
                                @mouseleave="$el.style.backgroundColor = 'transparent'; $el.style.color = getSignalColor(index) + '66'">
                            <svg class="w-2.5 h-2.5"
                                 fill="none"
                                 stroke="currentColor"
                                 viewBox="0 0 24 24">
                                <path stroke-linecap="round"
                                      stroke-linejoin="round"
                                      stroke-width="3.5"
                                      d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </span>
                </template>

                <template x-if="config.yAxes.length === 0">
                    <span class="text-[9px] font-mono italic text-slate-400 dark:text-slate-600 pl-1">No signals active...</span>
                </template>
            </div>
        </div>
    </div>

    <div class="flex flex-row gap-4 items-stretch h-[600px]">
        <!-- plot area -->
        <div class="flex-1 bg-white dark:bg-slate-800 border border-slate-400 dark:border-slate-700 rounded-2xl shadow-2xl p-2 relative">
            <div x-show="data && config.yAxes.length > 0"
                 id="plot-area"
                 class="w-full h-full"></div>
            <div x-show="data && config.yAxes.length === 0"
                 class="absolute inset-0 flex items-center justify-center text-slate-400 font-mono text-xs italic">
                Select Y-axis signals to begin...</div>
            <template x-if="loading">
                <div class="absolute inset-0 bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm flex items-center justify-center">
                    <div class="w-8 h-8 border-4 border-cyan-500 border-t-transparent rounded-full animate-spin"></div>
                </div>
            </template>
        </div>

        <!-- sidebar -->
        <div class="flex flex-col gap-2 p-2 bg-white dark:bg-slate-800 border border-slate-400 dark:border-slate-700 rounded-xl shrink-0 relative z-50">
            <!-- copy share link -->
            <button @click="copyShareLink()"
                    class="p-2 text-slate-400 hover:text-cyan-500 bg-transparent hover:bg-slate-300 dark:hover:bg-slate-700 transition-all duration-200 rounded-lg"
                    title="Copy Share Link">
                <svg class="w-5 h-5"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24">
                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                </svg>
            </button>

            <!-- plot config -->
            <div class="relative"
                 @click.away="settingsOpen = false">
                <button @click="settingsOpen = !settingsOpen"
                        class="p-2 transition-all duration-200 rounded-lg bg-transparent hover:bg-slate-300 dark:hover:bg-slate-700"
                        :class="settingsOpen ? 'text-cyan-500 bg-cyan-100/50 dark:bg-slate-700/50' : 'text-slate-400 hover:text-cyan-500'"
                        title="Edit Plot Configuration">
                    <svg class="w-5 h-5"
                         :class="settingsOpen ? 'text-cyan-500' : ''"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24">
                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="2"
                              d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                        <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                </button>

                <div x-show="settingsOpen"
                     x-transition
                     class="absolute right-full top-0 mr-4 w-[calc(100vw-6rem)] sm:w-80 bg-white dark:bg-slate-800 border border-slate-400 dark:border-slate-700 rounded-xl shadow-2xl p-4 z-[200]">

                    <p class="text-[10px] font-black uppercase text-slate-400 mb-4 tracking-widest border-b border-slate-200 dark:border-slate-700 pb-1">
                        Plot Configuration
                    </p>

                    <div class="space-y-4">
                        <!-- plot behaviors -->
                        <div class="grid grid-cols-2 gap-3">
                            <!-- gridlines -->
                            <div class="space-y-1 relative"
                                 x-data="{ open: false }">
                                <label class="text-[9px] font-bold text-slate-500 uppercase">Gridlines</label>

                                <button @click="open = !open"
                                        @click.away="open = false"
                                        class="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-[10px] font-mono text-slate-700 dark:text-slate-200 transition-all hover:border-cyan-500/50">

                                    <span class="truncate"
                                          x-text="config.grid === 'all' ? 'Major + Minor' : (config.grid.charAt(0).toUpperCase() + config.grid.slice(1))"></span>

                                    <svg class="w-3 h-3 text-slate-900 dark:text-slate-100 shrink-0 transition-transform duration-200"
                                         :class="open ? 'rotate-180' : ''"
                                         fill="none"
                                         stroke="currentColor"
                                         stroke-width="3"
                                         viewBox="0 0 24 24">
                                        <path stroke-linecap="round"
                                              stroke-linejoin="round"
                                              d="M19 9l-7 7-7-7" />
                                    </svg>
                                </button>

                                <div x-show="open"
                                     x-transition
                                     class="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">

                                    <template x-for="opt in ['none', 'major', 'all']">
                                        <button @click="config.grid = opt; saveAndRender(); open = false"
                                                class="w-full text-left px-3 py-2 text-[10px] font-mono transition-colors border-b last:border-none border-slate-100 dark:border-slate-700"
                                                :class="config.grid === opt ? 'bg-cyan-500 text-white font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-cyan-500/10 hover:text-cyan-500'">
                                            <span x-text="opt === 'all' ? 'Major + Minor' : (opt.charAt(0).toUpperCase() + opt.slice(1))"></span>
                                        </button>
                                    </template>
                                </div>
                            </div>
                            <!-- linemode -->
                            <div class="space-y-1 relative"
                                 x-data="{ open: false }">
                                <label class="text-[9px] font-bold text-slate-500 uppercase">Mode</label>

                                <button @click="open = !open"
                                        @click.away="open = false"
                                        class="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-[10px] font-mono text-slate-700 dark:text-slate-200 transition-all hover:border-cyan-500/50">

                                    <span class="truncate"
                                          x-text="config.linemode === 'lines+markers' ? 'Both' : (config.linemode.charAt(0).toUpperCase() + config.linemode.slice(1))"></span>

                                    <svg class="w-3.5 h-3.5 text-slate-900 dark:text-slate-100 shrink-0 transition-transform duration-200"
                                         :class="open ? 'rotate-180' : ''"
                                         fill="none"
                                         stroke="currentColor"
                                         stroke-width="3"
                                         viewBox="0 0 24 24">
                                        <path stroke-linecap="round"
                                              stroke-linejoin="round"
                                              d="M19 9l-7 7-7-7" />
                                    </svg>
                                </button>

                                <div x-show="open"
                                     x-transition
                                     class="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">

                                    <template x-for="opt in [
                                                { label: 'Lines', value: 'lines' },
                                                { label: 'Markers', value: 'markers' },
                                                { label: 'Both', value: 'lines+markers' }
                                            ]"
                                              :key="opt.value">
                                        <button @click="config.linemode = opt.value; saveAndRender(); open = false"
                                                class="w-full text-left px-3 py-2 text-[10px] font-mono transition-colors border-b last:border-none border-slate-100 dark:border-slate-700"
                                                :class="config.linemode === opt.value ? 'bg-cyan-500 text-white font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-cyan-500/10 hover:text-cyan-500'">
                                            <span x-text="opt.label"></span>
                                        </button>
                                    </template>
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-3">
                            <!-- interpolation -->
                            <div class="space-y-1 relative transition-opacity duration-300"
                                 x-data="{ open: false }"
                                 :class="config.linemode === 'markers' ? 'opacity-30 cursor-not-allowed pointer-events-none' : ''">

                                <label class="text-[9px] font-bold text-slate-500 uppercase">Interpolation</label>

                                <button @click="open = !open"
                                        @click.away="open = false"
                                        :disabled="config.linemode === 'markers'"
                                        class="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-[10px] font-mono text-slate-700 dark:text-slate-200 transition-all hover:border-cyan-500/50 disabled:cursor-not-allowed">

                                    <span class="truncate"
                                          x-text="{
            'linear': 'Linear',
            'spline': 'Spline',
            'hv': 'Step (HV)',
            'vh': 'Step (VH)',
            'hvh': 'Step (HVH)',
            'vhv': 'Step (VHV)'
        }[config.interp]"></span>

                                    <svg class="w-3.5 h-3.5 text-slate-900 dark:text-slate-100 shrink-0 transition-transform duration-200"
                                         :class="open ? 'rotate-180' : ''"
                                         fill="none"
                                         stroke="currentColor"
                                         stroke-width="3"
                                         viewBox="0 0 24 24">
                                        <path stroke-linecap="round"
                                              stroke-linejoin="round"
                                              d="M19 9l-7 7-7-7" />
                                    </svg>
                                </button>

                                <div x-show="open"
                                     x-transition
                                     class="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">

                                    <template x-for="opt in [
            { label: 'Linear', value: 'linear' },
            { label: 'Spline', value: 'spline' },
            { label: 'Step (HV)', value: 'hv' },
            { label: 'Step (VH)', value: 'vh' },
            { label: 'Step (HVH)', value: 'hvh' },
            { label: 'Step (VHV)', value: 'vhv' }
        ]"
                                              :key="opt.value">
                                        <button @click="config.interp = opt.value; saveAndRender(); open = false"
                                                class="w-full text-left px-3 py-2 text-[10px] font-mono transition-colors border-b last:border-none border-slate-100 dark:border-slate-700"
                                                :class="config.interp === opt.value ? 'bg-cyan-500 text-white font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-cyan-500/10 hover:text-cyan-500'">
                                            <span x-text="opt.label"></span>
                                        </button>
                                    </template>
                                </div>
                            </div>
                            <!-- hoverstyle -->
                            <div class="space-y-1 relative"
                                 x-data="{ open: false }">
                                <label class="text-[9px] font-bold text-slate-500 uppercase">Hover</label>

                                <button @click="open = !open"
                                        @click.away="open = false"
                                        class="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-[10px] font-mono text-slate-700 dark:text-slate-200 transition-all hover:border-cyan-500/50">

                                    <span class="truncate"
                                          x-text="{
            'x unified': 'Unified X',
            'y unified': 'Unified Y',
            'closest': 'Closest',
            'x': 'X Axis',
            'y': 'Y Axis',
            'none': 'Off'
        }[config.hover]"></span>

                                    <svg class="w-3.5 h-3.5 text-slate-900 dark:text-slate-100 shrink-0 transition-transform duration-200"
                                         :class="open ? 'rotate-180' : ''"
                                         fill="none"
                                         stroke="currentColor"
                                         stroke-width="3"
                                         viewBox="0 0 24 24">
                                        <path stroke-linecap="round"
                                              stroke-linejoin="round"
                                              d="M19 9l-7 7-7-7" />
                                    </svg>
                                </button>

                                <div x-show="open"
                                     x-transition
                                     class="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">

                                    <template x-for="opt in [
        { label: 'Unified X', value: 'x unified' },
        { label: 'Unified Y', value: 'y unified' },
        { label: 'Closest', value: 'closest' },
        { label: 'X Axis', value: 'x' },
        { label: 'Y Axis', value: 'y' },
        { label: 'Off', value: 'none' }
    ]"
                                              :key="opt.value">
                                        <button @click="config.hover = opt.value; saveAndRender(); open = false"
                                                class="w-full text-left px-3 py-2 text-[10px] font-mono transition-colors border-b last:border-none border-slate-100 dark:border-slate-700"
                                                :class="config.hover === opt.value ? 'bg-cyan-500 text-white font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-cyan-500/10 hover:text-cyan-500'">
                                            <span x-text="opt.label"></span>
                                        </button>
                                    </template>
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-3 items-end">
                            <!-- legend location -->
                            <div class="space-y-1 relative"
                                 x-data="{ open: false }">
                                <label class="text-[9px] font-bold text-slate-500 uppercase">Legend</label>

                                <button @click="open = !open"
                                        @click.away="open = false"
                                        class="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-[10px] font-mono text-slate-700 dark:text-slate-200 transition-all hover:border-cyan-500/50">

                                    <span class="truncate"
                                          x-text="config.legendPos.charAt(0).toUpperCase() + config.legendPos.slice(1)"></span>

                                    <svg class="w-3.5 h-3.5 text-slate-900 dark:text-slate-100 shrink-0 transition-transform duration-200"
                                         :class="open ? 'rotate-180' : ''"
                                         fill="none"
                                         stroke="currentColor"
                                         stroke-width="3"
                                         viewBox="0 0 24 24">
                                        <path stroke-linecap="round"
                                              stroke-linejoin="round"
                                              d="M19 9l-7 7-7-7" />
                                    </svg>
                                </button>

                                <div x-show="open"
                                     x-transition
                                     class="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">

                                    <template x-for="opt in ['bottom', 'right', 'hidden']"
                                              :key="opt">
                                        <button @click="config.legendPos = opt; saveAndRender(); open = false"
                                                class="w-full text-left px-3 py-2 text-[10px] font-mono transition-colors border-b last:border-none border-slate-100 dark:border-slate-700"
                                                :class="config.legendPos === opt ? 'bg-cyan-500 text-white font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-cyan-500/10 hover:text-cyan-500'">
                                            <span x-text="opt.charAt(0).toUpperCase() + opt.slice(1)"></span>
                                        </button>
                                    </template>
                                </div>
                            </div>
                            <!-- show spikes checkbox -->
                            <label class="flex items-center justify-between p-2 bg-slate-100 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-lg group transition-all hover:border-cyan-500/50 cursor-pointer"
                                   :class="config.hover === 'none' ? 'opacity-30 cursor-not-allowed pointer-events-none' : ''">

                                <span class="text-[9px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest transition-colors group-hover:text-slate-700 dark:group-hover:text-slate-200">
                                    Show Spikes
                                </span>

                                <div class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox"
                                           x-model="config.showSpike"
                                           @change="saveAndRender()"
                                           :disabled="config.hover === 'none'"
                                           class="sr-only">

                                    <div class="w-10 h-6 bg-slate-200 dark:bg-slate-800 border-2 border-slate-300 dark:border-slate-700 rounded-md transition-colors duration-200"
                                         :class="config.showSpike ? 'bg-cyan-500/20 border-cyan-500' : ''"></div>

                                    <div class="absolute left-1 top-1 w-4 h-4 rounded-sm transition-all duration-200 shadow-sm"
                                         :class="config.showSpike
                ? 'translate-x-4 bg-cyan-500'
                : 'translate-x-0 bg-slate-400 dark:bg-slate-500'">
                                    </div>
                                </div>
                            </label>
                        </div>

                        <div class="border-t border-slate-100 dark:border-slate-700/50 my-2"></div>

                        <!-- titles -->
                        <div class="space-y-3">
                            <div class="space-y-1">
                                <label class="text-[9px] font-bold text-slate-500 uppercase tracking-tighter">Main Plot
                                    Title</label>
                                <div class="relative mb-2">
                                    <input type="text"
                                           x-model="config.title"
                                           placeholder="Untitled Plot"
                                           class="w-full bg-white dark:bg-slate-950 border border-slate-300 dark:border-slate-800 rounded-md shadow-sm px-2 pr-8 py-1.5 text-base sm:text-[10px] font-mono text-slate-700 dark:text-slate-200 focus:ring-1 focus:ring-cyan-500 outline-none" />

                                    <button x-show="config.title"
                                            type="button"
                                            @mousedown.prevent="config.title = ''"
                                            class="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"
                                            x-transition:enter="transition duration-75"
                                            x-transition:enter-start="opacity-0"
                                            x-transition:enter-end="opacity-100">
                                        <svg class="w-3 h-3"
                                             fill="none"
                                             stroke="currentColor"
                                             viewBox="0 0 24 24">
                                            <path stroke-linecap="round"
                                                  stroke-linejoin="round"
                                                  stroke-width="3"
                                                  d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </div>
                            </div>

                            <div class="space-y-1">
                                <label class="text-[9px] font-bold text-slate-500 uppercase tracking-tighter">X-Axis
                                    Label</label>
                                <div class="relative mb-2">
                                    <input type="text"
                                           x-model="config.xAxisTitle"
                                           :placeholder="config.xAxis"
                                           class="w-full bg-white dark:bg-slate-950 border border-slate-300 dark:border-slate-800 rounded-md shadow-sm px-2 pr-8 py-1.5 text-base sm:text-[10px] font-mono text-slate-700 dark:text-slate-200 focus:ring-1 focus:ring-cyan-500 outline-none" />

                                    <button x-show="config.xAxisTitle"
                                            type="button"
                                            @mousedown.prevent="config.xAxisTitle = ''"
                                            class="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"
                                            x-transition:enter="transition duration-75"
                                            x-transition:enter-start="opacity-0"
                                            x-transition:enter-end="opacity-100">
                                        <svg class="w-3 h-3"
                                             fill="none"
                                             stroke="currentColor"
                                             viewBox="0 0 24 24">
                                            <path stroke-linecap="round"
                                                  stroke-linejoin="round"
                                                  stroke-width="3"
                                                  d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </div>
                            </div>

                            <div class="space-y-1">
                                <label class="text-[9px] font-bold text-slate-500 uppercase tracking-tighter">Y-Axis
                                    Label</label>
                                <div class="relative mb-2">
                                    <input type="text"
                                           x-model="config.yAxisTitle"
                                           placeholder="Y-Axis Label"
                                           class="w-full bg-white dark:bg-slate-950 border border-slate-300 dark:border-slate-800 rounded-md shadow-sm px-2 pr-8 py-1.5 text-base sm:text-[10px] font-mono text-slate-700 dark:text-slate-200 focus:ring-1 focus:ring-cyan-500 outline-none" />

                                    <button x-show="config.yAxisTitle"
                                            type="button"
                                            @mousedown.prevent="config.yAxisTitle = ''"
                                            class="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"
                                            x-transition:enter="transition duration-75"
                                            x-transition:enter-start="opacity-0"
                                            x-transition:enter-end="opacity-100">
                                        <svg class="w-3 h-3"
                                             fill="none"
                                             stroke="currentColor"
                                             viewBox="0 0 24 24">
                                            <path stroke-linecap="round"
                                                  stroke-linejoin="round"
                                                  stroke-width="3"
                                                  d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- reset config -->
                        <div class="pt-2">
                            <button @click="resetConfig()"
                                    class="w-full flex items-center justify-center gap-2 px-3 py-2 bg-rose-500/10 hover:bg-rose-500 text-rose-500 hover:text-white border border-rose-500/20 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all">
                                <svg class="w-3 h-3"
                                     fill="none"
                                     stroke="currentColor"
                                     viewBox="0 0 24 24">
                                    <path stroke-linecap="round"
                                          stroke-linejoin="round"
                                          stroke-width="2"
                                          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                                Reset to Defaults
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- download options -->
            <div class="relative"
                 @click.away="downloadOpen = false">
                <button @click="downloadOpen = !downloadOpen"
                        class="p-2 text-slate-400 hover:text-cyan-500 transition-colors rounded-lg hover:bg-slate-300 dark:hover:bg-slate-700"
                        :class="downloadOpen ? 'text-cyan-500 bg-cyan-100/50 dark:bg-slate-700/50' : 'text-slate-400 hover:text-cyan-500'"
                        title="Download Data or Image">
                    <svg class="w-5 h-5"
                         :class="downloadOpen ? 'text-cyan-500' : ''"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24">
                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="2"
                              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                    </svg>
                </button>

                <div x-show="downloadOpen"
                     x-transition
                     class="absolute right-full top-0 mr-4 w-48 bg-white dark:bg-slate-800 border border-slate-400 dark:border-slate-700 rounded-xl shadow-2xl p-3 z-[200]">

                    <p class="text-[10px] font-black uppercase text-slate-400 mb-3 tracking-widest border-b border-slate-200 dark:border-slate-700 pb-1">
                        Export Options</p>

                    <div class="space-y-1">
                        <p class="text-[9px] font-bold text-slate-500 uppercase px-2 mb-1">Capture Plot</p>

                        <button @click="downloadPlot('svg')"
                                class="w-full text-left px-2 py-1.5 text-[10px] font-mono font-bold text-slate-600 dark:text-slate-300 hover:bg-cyan-200 dark:hover:bg-slate-700 hover:text-cyan-500 dark:hover:text-cyan-400 rounded transition-all duration-200">
                            SVG Vector
                        </button>
                        <button @click="downloadPlot('png')"
                                class="w-full text-left px-2 py-1.5 text-[10px] font-mono font-bold text-slate-600 dark:text-slate-300 hover:bg-cyan-200 dark:hover:bg-slate-700 hover:text-cyan-500 dark:hover:text-cyan-400 rounded transition-all duration-200">
                            PNG Image
                        </button>
                        <button @click="downloadPlot('jpg')"
                                class="w-full text-left px-2 py-1.5 text-[10px] font-mono font-bold text-slate-600 dark:text-slate-300 hover:bg-cyan-200 dark:hover:bg-slate-700 hover:text-cyan-500 dark:hover:text-cyan-400 rounded transition-all duration-200">
                            JPG Image
                        </button>

                        <div class="my-2 border-t border-slate-200 dark:border-slate-700"></div>

                        <p class="text-[9px] font-bold text-slate-500 uppercase px-2 mb-1">Data</p>
                        <button @click="downloadCSV()"
                                class="w-full text-left px-2 py-1.5 text-[10px] font-mono font-bold text-emerald-600 dark:text-emerald-400 hover:bg-emerald-200 dark:hover:bg-emerald-900/30 rounded transition-all duration-200 flex items-center justify-between group">
                            Filtered CSV
                            <span class="text-[8px] bg-emerald-500/10 group-hover:bg-emerald-500 group-hover:text-white px-1 rounded transition-colors">DATA</span>
                        </button>

                        <button @click="downloadJSON()"
                                class="w-full text-left px-2 py-1.5 text-[10px] font-mono font-bold text-violet-600 dark:text-violet-400 hover:bg-violet-200 dark:hover:bg-violet-900/30 rounded transition-all duration-200 flex items-center justify-between group">
                            Config JSON
                            <span class="text-[8px] bg-violet-500/10 group-hover:bg-violet-500 group-hover:text-white px-1 rounded transition-colors">CONFIG</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JSON editor -->
    <div class="mt-8 space-y-2">
        <div class="flex items-center justify-between px-2">
            <span class="text-[10px] font-black uppercase text-slate-400 tracking-widest">JSON Plot Configuration</span>
            <div class="flex items-center gap-2">
                <span x-show="isValidJson"
                      class="text-[9px] font-bold text-emerald-600 dark:text-emerald-500 font-mono flex items-center gap-1">
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Valid
                </span>
                <span x-show="!isValidJson"
                      style="display: none;"
                      class="text-[9px] font-bold text-rose-600 dark:text-rose-500 font-mono animate-pulse flex items-center gap-1">
                    <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span> Syntax Error
                </span>
            </div>
        </div>

        <div class="relative bg-white dark:bg-slate-950 rounded-xl border border-slate-300 dark:border-slate-800 overflow-hidden shadow-2xl shadow-slate-900/20 dark:shadow-none ring-1 ring-slate-200 dark:ring-slate-800 transition-all focus-within:border-cyan-500/50">

            <div class="absolute inset-0 p-4 font-mono text-[11px] leading-relaxed break-all whitespace-pre-wrap pointer-events-none overflow-hidden scroll-sync-target"
                 x-html="highlightedJson"></div>

            <textarea x-model="configRaw"
                      @input.debounce.500ms="updateFromRaw()"
                      @scroll="$el.parentElement.querySelector('.scroll-sync-target').scrollTop = $el.scrollTop"
                      class="relative w-full h-64 bg-transparent p-4 text-transparent caret-slate-900 dark:caret-cyan-500 font-mono text-[11px] leading-relaxed outline-none focus:ring-0 resize-none custom-scrollbar"
                      spellcheck="false"></textarea>

            <div class="absolute right-4 bottom-4 flex gap-2 z-10">
                <button @click="copyRawConfig()"
                        class="px-3 py-1.5 bg-slate-50 dark:bg-slate-900 text-slate-500 dark:text-slate-400 text-[10px] font-black uppercase rounded border border-slate-200 dark:border-slate-800 hover:text-cyan-500 dark:hover:text-cyan-500 hover:border-cyan-500/50 transition-all shadow-sm">
                    Copy
                </button>
                <button @click="configRaw = JSON.stringify(config, null, 4)"
                        class="px-3 py-1.5 bg-slate-50 dark:bg-slate-900 text-slate-500 dark:text-slate-400 text-[10px] font-black uppercase rounded border border-slate-200 dark:border-slate-800 hover:text-cyan-500 dark:hover:text-cyan-500 hover:border-cyan-500/50 transition-all shadow-sm">
                    Format
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}