{% 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-base 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-sm sm:text-base 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 md:left-0 md:right-auto top-full mt-2 w-80 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-sm 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-sm">
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">Next / Prev</span>
                            <span class="flex gap-1">
                                <kbd>←</kbd>
                                <span class="text-slate-500">/</span>
                                <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>
                                <span class="text-slate-500">/</span>
                                <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 class="flex justify-between items-center">
                            <span class="text-slate-500">Undo</span>
                            <span class="flex gap-1">
                                <kbd x-text="isMac ? '⌘' : 'Ctrl'"></kbd>
                                <span x-show="!isMac"
                                      class="text-slate-500">+</span>
                                <kbd>Z</kbd>
                            </span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">Redo</span>
                            <span class="flex gap-1">
                                <kbd x-text="isMac ? '⌘' : 'Ctrl'"></kbd>
                                <span x-show="!isMac"
                                      class="text-slate-500">+</span>
                                <kbd x-show="isMac">⇧</kbd>
                                <kbd x-text="isMac ? 'Z' : 'Y'"></kbd>
                            </span>
                        </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 text-sm sm:text-base font-mono font-bold text-slate-500 hover:text-cyan-500 dark:hover:text-cyan-500 flex items-center gap-2 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-sm sm:text-base 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-sm sm:text-base 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 text-xs 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 text-sm sm:text-base font-mono font-bold text-slate-500 hover:text-cyan-500 dark:hover:text-cyan-500 flex items-center gap-2 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-sm sm:text-base 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 shadow-md"
                     :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-xs sm:text-xs font-black uppercase tracking-tighter truncate"
                              :class="vsDraft.enabled ? 'text-slate-500' : '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-2 h-6 bg-cyan-500 hover:bg-cyan-600 text-white text-sm sm:text-base font-black uppercase tracking-widest rounded-xl transition-all active:scale-95 flex items-center gap-2  disabled:opacity-50">
                                <span class="text-xs sm:text-xs"
                                      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-sm sm:text-sm 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-xs sm:text-xs 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="w-full bg-transparent text-center outline-none py-1.5 text-sm sm:text-base font-mono font-bold 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-xs sm:text-xs 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="w-full bg-transparent text-center outline-none py-1.5 text-sm sm:text-base font-mono font-bold 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-sm font-black uppercase text-slate-400 w-12 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-xs 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-sm 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 py-1 rounded-lg border text-sm 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 py-1 rounded-xl border text-sm 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">
                        <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-sm font-mono font-bold 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-sm 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-sm font-black uppercase text-slate-400 w-12 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-xs 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-sm 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 py-1 rounded-lg border text-sm 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 py-1 rounded-lg border text-sm 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-sm 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-xs 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-sm 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 overflow-y-hidden whitespace-nowrap custom-scrollbar 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-sm 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-sm 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 :class="(data && config.yAxes.length > 0) ? 'opacity-100' : 'opacity-0 pointer-events-none'"
                 id="plot-area"
                 class="w-full h-full transition-opacity duration-300">
            </div>
            <div x-show="data && config.yAxes.length === 0"
                 class="absolute inset-0 flex items-center justify-center text-slate-400 font-mono text-base 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 -->
            <div class="flex flex-col gap-2">
                <button @click="copyShareLink()"
                        class="w-14 aspect-square flex flex-col items-center justify-center gap-1 rounded-xl transition-all duration-200 bg-transparent hover:bg-slate-300 dark:hover:bg-slate-700 text-slate-400 hover:text-cyan-500 disabled:opacity-20 disabled:hover:bg-transparent"
                        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>
                    <span class="text-xs font-black uppercase tracking-tighter">Share</span>
                </button>
            </div>

            <!-- plot config -->
            <div class="flex flex-col gap-2">
                <div class="relative"
                     @click.away="settingsOpen = false">
                    <button @click="settingsOpen = !settingsOpen"
                            class="w-14 aspect-square flex flex-col items-center justify-center gap-1 rounded-xl transition-all duration-200 bg-transparent hover:bg-slate-300 dark:hover:bg-slate-700 text-slate-400 hover:text-cyan-500 disabled:opacity-20 disabled:hover:bg-transparent"
                            :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 d="M1 1V15H15V13H3V1H1Z"
                                  fill="currentColor"></path>
                            <path d="M5 7L7 5L10 8L15 3V11H5V7Z"
                                  fill="currentColor"></path>
                        </svg>
                        <span class="text-xs font-black uppercase tracking-tighter">Plot</span>
                    </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-base font-black uppercase text-slate-400 mb-4 tracking-widest border-b border-slate-200 dark:border-slate-700 pb-1">
                            Plot Editor
                        </p>

                        <div class="space-y-4">
                            <!-- row 1 -->
                            <div class="grid grid-cols-2 gap-3 max-h-64">
                                <!-- gridlines -->
                                <div class="space-y-1 relative"
                                     x-data="{ open: false }">
                                    <label class="text-xs 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-sm 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-sm 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-xs 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-sm 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>

                            <!-- row 2 -->
                            <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-xs 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-sm 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-sm 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-xs 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-sm 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-sm 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>

                            <!-- row 3 -->
                            <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-xs 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-sm 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-sm 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-xs 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>

                            <!-- axis base -->
                            <div class="space-y-3">

                                <!-- x scale -->
                                <div class="grid grid-cols-2 gap-3">
                                    <div class="space-y-1 relative"
                                         x-data="{ open: false }">
                                        <label class="text-xs font-bold text-slate-500 uppercase">X-Scale</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-sm font-mono text-slate-700 dark:text-slate-200 transition-all hover:border-cyan-500/50">
                                            <span x-text="config.xScale === 'log' ? 'Log' : 'Linear'"></span>
                                            <svg class="w-3 h-3 shrink-0"
                                                 :class="open ? 'rotate-180' : ''"
                                                 fill="none"
                                                 stroke="currentColor"
                                                 viewBox="0 0 24 24">
                                                <path 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 ['linear', 'log']">
                                                <button @click="config.xScale = opt; if(opt === 'log' && !config.xLogBase) config.xLogBase = 10; saveAndRender(); open = false"
                                                        class="w-full text-left px-3 py-2 text-sm font-mono border-b last:border-none border-slate-100 dark:border-slate-700"
                                                        :class="config.xScale === opt ? 'bg-cyan-500 text-white font-bold' : 'hover:bg-cyan-500/10 hover:text-cyan-500 text-slate-600 dark:text-slate-300'"
                                                        x-text="opt.charAt(0).toUpperCase() + opt.slice(1)"></button>
                                            </template>
                                        </div>
                                        <div x-show="config.xScale === 'log'"
                                             x-transition
                                             class="mt-2 flex items-center gap-2">
                                            <span class="text-xs font-bold text-slate-400 uppercase">Base</span>

                                            <div class="flex items-center bg-white dark:bg-slate-950 border border-slate-300 dark:border-slate-800 rounded-md shadow-sm ml-auto w-20">
                                                <input type="number"
                                                       x-model.number="config.xLogBase"
                                                       @change="saveAndRender()"
                                                       inputmode="numeric"
                                                       pattern="[0-9]*"
                                                       class="w-full bg-transparent text-center outline-none py-1 text-xs sm:text-sm font-mono font-bold text-cyan-500 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
                                            </div>
                                        </div>
                                    </div>

                                    <!-- y scale -->
                                    <div class="space-y-1 relative"
                                         x-data="{ open: false }">
                                        <label class="text-xs font-bold text-slate-500 uppercase">Y-Scale</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-sm font-mono text-slate-700 dark:text-slate-200 transition-all hover:border-cyan-500/50">
                                            <span x-text="config.yScale === 'log' ? 'Log' : 'Linear'"></span>
                                            <svg class="w-3 h-3 shrink-0"
                                                 :class="open ? 'rotate-180' : ''"
                                                 fill="none"
                                                 stroke="currentColor"
                                                 viewBox="0 0 24 24">
                                                <path 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 ['linear', 'log']">
                                                <button @click="config.yScale = opt; if(opt === 'log' && !config.yLogBase) config.yLogBase = 10; saveAndRender(); open = false"
                                                        class="w-full text-left px-3 py-2 text-sm font-mono border-b last:border-none border-slate-100 dark:border-slate-700"
                                                        :class="config.yScale === opt ? 'bg-cyan-500 text-white font-bold' : 'hover:bg-cyan-500/10 hover:text-cyan-500 text-slate-600 dark:text-slate-300'"
                                                        x-text="opt.charAt(0).toUpperCase() + opt.slice(1)"></button>
                                            </template>
                                        </div>
                                        <div x-show="config.yScale === 'log'"
                                             x-transition
                                             class="mt-2 flex items-center gap-2">
                                            <span class="text-xs font-bold text-slate-400 uppercase">Base</span>

                                            <div class="flex items-center bg-white dark:bg-slate-950 border border-slate-300 dark:border-slate-800 rounded-md shadow-sm ml-auto w-20">
                                                <input type="number"
                                                       x-model.number="config.yLogBase"
                                                       @change="saveAndRender()"
                                                       inputmode="numeric"
                                                       pattern="[0-9]*"
                                                       class="w-full bg-transparent text-center outline-none py-1 text-xs sm:text-sm font-mono font-bold text-cyan-500 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

                            <!-- titles -->
                            <div class="space-y-3">
                                <!-- main title -->
                                <div class="space-y-1">
                                    <label class="text-xs font-bold text-slate-500 uppercase tracking-tighter">Main Plot Title</label>
                                    <div class="relative mb-2">
                                        <input type="text"
                                               x-model.lazy="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-sm 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>

                                <!-- x axis label -->
                                <div class="space-y-1">
                                    <label class="text-xs font-bold text-slate-500 uppercase tracking-tighter">X-Axis
                                        Label</label>
                                    <div class="relative mb-2">
                                        <input type="text"
                                               x-model.lazy="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-sm 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>

                                <!-- y axis label -->
                                <div class="space-y-1">
                                    <label class="text-xs font-bold text-slate-500 uppercase tracking-tighter">Y-Axis
                                        Label</label>
                                    <div class="relative mb-2">
                                        <input type="text"
                                               x-model.lazy="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-sm 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-sm 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>
            </div>

            <!-- annotation editor -->
            <div class="flex flex-col gap-2">
                <div class="relative"
                     @click.outside="if (!annDraft) annotationsOpen = false">
                    <button @click="annotationsOpen = !annotationsOpen"
                            class="w-14 aspect-square flex flex-col items-center justify-center gap-1 rounded-xl transition-all duration-200 bg-transparent hover:bg-slate-300 dark:hover:bg-slate-700 text-slate-400 hover:text-cyan-500 disabled:opacity-20"
                            :class="annotationsOpen ? 'text-cyan-500 bg-cyan-100/50 dark:bg-slate-700/50' : 'text-slate-400 hover:text-cyan-500'"
                            title="Manage Notes">
                        <svg class="w-5 h-5"
                             :class="annotationsOpen ? 'text-cyan-500' : ''"
                             fill="none"
                             stroke="currentColor"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round"
                                  stroke-linejoin="round"
                                  stroke-width="2"
                                  d="M7 9h10M7 12h6" />
                            <path stroke-linecap="round"
                                  stroke-linejoin="round"
                                  stroke-width="2"
                                  d="M21 13V7a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h2.023c.3 0 .575.153.73.404l2.111 3.378a.15.15 0 0 0 .272 0l2.159-3.454c.127-.204.351-.328.592-.328H17a4 4 0 0 0 4-4z" />
                        </svg>
                        <span class="text-xs font-black uppercase tracking-tighter">Notes</span>
                    </button>

                    <div x-show="annotationsOpen"
                         x-transition
                         class="absolute right-full top-0 mr-4 w-72 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-base font-black uppercase text-slate-400 mb-4 tracking-widest border-b border-slate-200 dark:border-slate-700 pb-1">
                            Notes Editor
                        </p>

                        <!-- call to action -->
                        <div x-show="!config.annotations.length && !annDraft"
                             class="py-12 px-4 text-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-xl">
                            <p class="text-sm font-bold text-slate-400 uppercase tracking-tight leading-relaxed">
                                No notes yet.<br>
                                <span class="text-cyan-500/80">Click any point on the plot</span><br>
                                to drop a new note.
                            </p>
                        </div>

                        <!-- editor -->
                        <template x-if="annDraft">
                            <div class="mb-6 p-3 bg-cyan-500/5 border border-cyan-500/20 rounded-lg">
                                <div class="flex justify-between items-center mb-2">
                                    <p class="text-sm font-bold text-cyan-600 dark:text-cyan-400 uppercase">
                                        <span x-text="annEditIndex !== null ? 'Editing Note' : 'New Note'"></span>
                                    </p>
                                    <p class="text-xs font-mono text-slate-400">
                                        X: <span x-text="annDraft?.x.toFixed(3)"></span> | Y: <span x-text="annDraft?.y.toFixed(3)"></span>
                                    </p>
                                </div>

                                <input type="text"
                                       x-ref="annInput"
                                       x-model="annDraft.text"
                                       @keydown.enter="saveAnnotation()"
                                       @keydown.escape="cancelAnnDraft()"
                                       placeholder="Enter note..."
                                       class="w-full bg-white dark:bg-slate-950 border border-slate-300 dark:border-slate-800 rounded-md shadow-sm px-2 py-1.5 text-sm font-mono text-slate-700 dark:text-slate-200 focus:ring-1 focus:ring-cyan-500 outline-none" />

                                <div class="flex justify-end gap-2 mt-2">
                                    <button @click="cancelAnnDraft()"
                                            class="text-xs font-bold text-slate-400 hover:text-slate-600 uppercase">Cancel</button>
                                    <button @click="saveAnnotation()"
                                            class="text-xs font-bold text-cyan-500 hover:text-cyan-600 uppercase"
                                            x-text="annEditIndex !== null ? 'Update' : 'Save'"></button>
                                </div>
                            </div>
                        </template>

                        <!-- list view -->
                        <div class="space-y-2 max-h-80 overflow-y-auto pr-1 custom-scrollbar">
                            <template x-for="(ann, index) in config.annotations"
                                      :key="index">
                                <div class="group bg-slate-50 dark:bg-slate-900/40 border border-slate-200 dark:border-slate-800 rounded-lg p-2.5 hover:border-cyan-500/50 transition-colors cursor-pointer"
                                     @click="jumpToAnnotation(ann)">
                                    <div class="flex justify-between items-start gap-3">
                                        <div class="flex-1">
                                            <p class="text-sm font-bold text-slate-700 dark:text-slate-200 break-words"
                                               x-text="ann.text"></p>

                                            <p class="text-xs font-mono text-slate-400 mt-1"
                                               x-text="`X: ${ann.x.toFixed(3)} | Y: ${ann.y.toFixed(3)}`"></p>
                                        </div>

                                        <div class="flex items-center gap-1 opacity-20 group-hover:opacity-100 transition-opacity">
                                            <button @click.stop="startAnnEdit(index)"
                                                    class="p-1 hover:text-cyan-500 text-slate-400">
                                                <svg class="w-3.5 h-3.5"
                                                     fill="none"
                                                     stroke="currentColor"
                                                     viewBox="0 0 24 24">
                                                    <path stroke-width="2"
                                                          d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                                    <path stroke-width="2"
                                                          d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                                </svg>
                                            </button>
                                            <button @click.stop="deleteAnnotation(index)"
                                                    class="p-1 hover:text-rose-500 text-slate-400">
                                                <svg class="w-3 h-3 transition-transform 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>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            <!-- shape editor -->
            <div class="flex flex-col gap-2">
                <div class="relative"
                     @click.outside="shapesOpen = false">
                    <button @click="shapesOpen = !shapesOpen"
                            class="w-14 aspect-square flex flex-col items-center justify-center gap-1 rounded-xl transition-all duration-200 bg-transparent hover:bg-slate-300 dark:hover:bg-slate-700 text-slate-400 hover:text-cyan-500"
                            :class="{
                'text-cyan-500 bg-cyan-100/50 dark:bg-slate-700/50': shapesOpen,
                'animate-pulse ring-2 ring-cyan-500/50 text-cyan-500 bg-cyan-50 dark:bg-slate-800': placementMode
            }">

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

                            <g x-show="!placementMode">
                                <path stroke-width="2"
                                      d="M4 4h7v7H4zM13 13h7v7h-7zM4 15l5 5M15 4l5 5" />
                            </g>

                            <g x-show="placementMode === 'vline'">
                                <path d="M12 5v14"
                                      stroke-width="2.5"
                                      stroke-linecap="round" />
                            </g>

                            <g x-show="placementMode === 'hline'">
                                <path d="M5 12h14"
                                      stroke-width="2.5"
                                      stroke-linecap="round" />
                            </g>

                            <g x-show="placementMode === 'rect'">
                                <rect x="5"
                                      y="7"
                                      width="14"
                                      height="10"
                                      rx="1.5"
                                      stroke-width="2"
                                      fill="currentColor"
                                      fill-opacity="0.15" />
                            </g>
                        </svg>

                        <span class="text-xs font-black uppercase tracking-tighter"
                              x-text="placementMode ? placementMode : 'Shapes'"></span>
                    </button>

                    <div x-show="shapesOpen"
                         x-transition
                         class="absolute right-full top-0 mr-4 w-72 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-base font-black uppercase text-slate-400 mb-4 tracking-widest border-b border-slate-200 dark:border-slate-700 pb-1">
                            Shapes Editor
                        </p>

                        <!-- selector -->
                        <div class="grid grid-cols-3 gap-2 mb-4">
                            <button @click="setPlacementMode('vline')"
                                    class="py-2.5 flex flex-col items-center bg-slate-100 dark:bg-slate-900 border rounded-lg transition-all group"
                                    :class="placementMode === 'vline' ? 'border-cyan-500 ring-1 ring-cyan-500/20' : 'border-slate-300 dark:border-slate-700 hover:border-cyan-500/50'">

                                <svg class="w-5 h-5 mb-1 transition-colors duration-200"
                                     :class="placementMode === 'vline' ? 'text-cyan-500' : 'text-slate-400 group-hover:text-cyan-500'"
                                     viewBox="0 0 24 24"
                                     fill="none"
                                     stroke="currentColor">
                                    <path d="M12 5v14"
                                          stroke-width="2.5"
                                          stroke-linecap="round" />
                                </svg>

                                <span class="text-sm font-mono font-bold uppercase tracking-tight"
                                      :class="placementMode === 'vline' ? 'text-cyan-500' : 'text-slate-500 dark:text-slate-400'">V-Line</span>
                            </button>

                            <button @click="setPlacementMode('hline')"
                                    class="py-2.5 flex flex-col items-center bg-slate-100 dark:bg-slate-900 border rounded-lg transition-all group"
                                    :class="placementMode === 'hline' ? 'border-cyan-500 ring-1 ring-cyan-500/20' : 'border-slate-300 dark:border-slate-700 hover:border-cyan-500/50'">

                                <svg class="w-5 h-5 mb-1 transition-colors duration-200"
                                     :class="placementMode === 'hline' ? 'text-cyan-500' : 'text-slate-400 group-hover:text-cyan-500'"
                                     viewBox="0 0 24 24"
                                     fill="none"
                                     stroke="currentColor">
                                    <path d="M5 12h14"
                                          stroke-width="2.5"
                                          stroke-linecap="round" />
                                </svg>

                                <span class="text-sm font-mono font-bold uppercase tracking-tight"
                                      :class="placementMode === 'hline' ? 'text-cyan-500' : 'text-slate-500 dark:text-slate-400'">H-Line</span>
                            </button>

                            <button @click="setPlacementMode('rect')"
                                    class="py-2.5 flex flex-col items-center bg-slate-100 dark:bg-slate-900 border rounded-lg transition-all group"
                                    :class="placementMode === 'rect' ? 'border-cyan-500 ring-1 ring-cyan-500/20' : 'border-slate-300 dark:border-slate-700 hover:border-cyan-500/50'">

                                <svg class="w-5 h-5 mb-1 transition-colors duration-200"
                                     :class="placementMode === 'rect' ? 'text-cyan-500' : 'text-slate-400 group-hover:text-cyan-500'"
                                     viewBox="0 0 24 24"
                                     fill="currentColor"
                                     fill-opacity="0.15"
                                     stroke="currentColor">
                                    <rect x="5"
                                          y="7"
                                          width="14"
                                          height="10"
                                          rx="1.5"
                                          stroke-width="2" />
                                </svg>

                                <span class="text-sm font-mono font-bold uppercase tracking-tight"
                                      :class="placementMode === 'rect' ? 'text-cyan-500' : 'text-slate-500 dark:text-slate-400'">Rect</span>
                            </button>
                        </div>

                        <!-- cancel button -->
                        <button x-show="placementMode"
                                @click="placementMode = null; rectStart = null"
                                class="w-full mb-4 p-2 bg-rose-500/10 hover:bg-rose-500 border border-rose-500/20 rounded-lg transition-all group flex items-center justify-center gap-2">

                            <svg class="w-3 h-3 text-rose-500 group-hover:text-white transition-colors"
                                 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>

                            <p class="text-sm font-black text-rose-500 group-hover:text-white uppercase tracking-widest transition-colors">
                                Cancel <span x-text="placementMode"></span> Mode
                            </p>
                        </button>

                        <!-- editor -->
                        <template x-if="shapeDraft">
                            <div class="mb-6 p-3 bg-cyan-500/5 border border-cyan-500/20 rounded-lg">
                                <div class="flex justify-between items-center mb-2">
                                    <p class="text-sm font-bold text-cyan-600 dark:text-cyan-400 uppercase"
                                       x-text="shapeEditIndex !== null ? 'Edit Shape' : 'New Shape'"></p>
                                    <div class="flex gap-1.5">
                                        <template x-for="color in plotColors"
                                                  :key="color">
                                            <button @click="shapeDraft.color = color"
                                                    class="w-3 h-3 rounded-full border border-white/20 transition-transform hover:scale-125"
                                                    :style="`background-color: ${color}`"
                                                    :class="shapeDraft.color === color ? 'ring-1 ring-offset-1 ring-slate-400' : ''"></button>
                                        </template>
                                    </div>
                                </div>
                                <input type="text"
                                       x-model="shapeDraft.label"
                                       placeholder="Add a label..."
                                       @keydown.enter="saveShape()"
                                       @keydown.escape="cancelShapeDraft()"
                                       class="w-full bg-white dark:bg-slate-950 border border-slate-300 dark:border-slate-800 rounded-md shadow-sm px-2 py-1.5 text-sm font-mono text-slate-700 dark:text-slate-200 focus:ring-1 focus:ring-cyan-500 outline-none" />
                                <div class="flex justify-end gap-2 mt-2">
                                    <button @click="cancelShapeDraft()"
                                            class="text-xs font-bold text-slate-400 hover:text-slate-600 uppercase">Cancel</button>
                                    <button @click="saveShape()"
                                            class="text-xs font-bold text-cyan-500 hover:text-cyan-600 uppercase"
                                            x-text="shapeEditIndex !== null ? 'Update' : 'Save'"></button>
                                </div>
                            </div>
                        </template>

                        <!-- list of shapes -->
                        <div class="space-y-2 max-h-64 overflow-y-auto pr-1 custom-scrollbar">
                            <template x-for="(s, index) in config.shapes"
                                      :key="index">
                                <div class="group bg-slate-50 dark:bg-slate-900/40 border border-slate-200 dark:border-slate-800 rounded-lg p-2.5 transition-colors hover:border-cyan-500/30">
                                    <div class="flex justify-between items-start gap-3">
                                        <div class="flex items-start gap-3 flex-1 min-w-0">
                                            <div class="mt-1 shrink-0"
                                                 :style="`color: ${s.color}`">
                                                <svg class="w-4 h-4"
                                                     fill="none"
                                                     stroke="currentColor"
                                                     viewBox="0 0 24 24">
                                                    <path x-show="s.type === 'vline'"
                                                          d="M12 5v14"
                                                          stroke-width="2.5"
                                                          stroke-linecap="round" />
                                                    <path x-show="s.type === 'hline'"
                                                          d="M5 12h14"
                                                          stroke-width="2.5"
                                                          stroke-linecap="round" />
                                                    <rect x-show="s.type === 'rect'"
                                                          x="5"
                                                          y="7"
                                                          width="14"
                                                          height="10"
                                                          rx="1.5"
                                                          stroke-width="2"
                                                          fill="currentColor"
                                                          fill-opacity="0.1" />
                                                </svg>
                                            </div>
                                            <div class="min-w-0">
                                                <p class="text-sm font-bold text-slate-700 dark:text-slate-200 truncate"
                                                   x-text="s.label || s.type.toUpperCase()"></p>
                                                <p class="text-[10px] font-mono text-slate-400"
                                                   x-text="s.type === 'vline' ? `X: ${s.x0.toFixed(2)}` :
           s.type === 'hline' ? `Y: ${s.y0.toFixed(2)}` :
           `X: ${s.x0.toFixed(1)}→${s.x1.toFixed(1)} Y: ${s.y0.toFixed(1)}→${s.y1.toFixed(1)}`"></p>
                                            </div>
                                        </div>

                                        <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                            <button @click="startShapeEdit(index)"
                                                    class="p-1 hover:text-cyan-500 text-slate-400">
                                                <svg class="w-3.5 h-3.5"
                                                     fill="none"
                                                     stroke="currentColor"
                                                     viewBox="0 0 24 24">
                                                    <path stroke-width="2"
                                                          d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
                                                </svg>
                                            </button>
                                            <button @click="deleteShape(index)"
                                                    class="p-1 hover:text-rose-500 text-slate-400">
                                                <svg class="w-3.5 h-3.5"
                                                     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>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            <!-- undo -->
            <div class="flex flex-col gap-2">
                <button @click="undo()"
                        :disabled="historyIndex <= 0"
                        class="w-14 aspect-square flex flex-col items-center justify-center gap-1 rounded-xl transition-all duration-200 bg-transparent hover:bg-slate-300 dark:hover:bg-slate-700 text-slate-400 hover:text-cyan-500 disabled:opacity-20 disabled:hover:bg-transparent"
                        :title="isMac ? 'Undo (⌘Z)' : 'Undo (Ctrl+Z)'">
                    <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="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
                    </svg>
                    <span class="text-xs font-black uppercase tracking-tighter">Undo</span>
                </button>
            </div>

            <!-- redo -->
            <div class="flex flex-col gap-2">
                <button @click="redo()"
                        :disabled="historyIndex >= historyStack.length - 1"
                        class="w-14 aspect-square flex flex-col items-center justify-center gap-1 rounded-xl transition-all duration-200 bg-transparent hover:bg-slate-300 dark:hover:bg-slate-700 text-slate-400 hover:text-cyan-500 disabled:opacity-20 disabled:hover:bg-transparent"
                        :title="isMac ? 'Redo (⌘⇧Z)' : 'Redo (Ctrl+Y)'">
                    <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="M21 10h-10a8 8 0 00-8 8v2m18-10l-6 6m6-6l-6-6" />
                    </svg><span class="text-xs font-black uppercase tracking-tighter">Redo</span>
                </button>
            </div>

            <!-- download options -->
            <div class="flex flex-col gap-2">
                <div class="relative"
                     @click.away="downloadOpen = false">
                    <button @click="downloadOpen = !downloadOpen"
                            class="w-14 aspect-square flex flex-col items-center justify-center gap-1 rounded-xl transition-all duration-200 bg-transparent hover:bg-slate-300 dark:hover:bg-slate-700 text-slate-400 hover:text-cyan-500 disabled:opacity-20 disabled:hover:bg-transparent"
                            :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>
                        <span class="text-xs font-black uppercase tracking-tighter">Export</span>
                    </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-base 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-sm 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-xs 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-xs 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-xs 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-sm 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-xs 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-xs 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>
    </div>

    <!-- JSON editor -->
    <div class="mt-8 space-y-2">
        <div class="flex items-center justify-between px-2">
            <span class="text-base font-black uppercase text-slate-400 tracking-widest">JSON Configuration</span>
            <div class="flex items-center gap-3">
                <span x-show="!isValidJson"
                      class="text-base font-bold text-rose-500 font-mono flex items-center gap-1">
                    <span class="w-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse"></span> Syntax Error
                </span>

                <span x-show="isValidJson && !isValidConfig"
                      class="text-base font-bold text-amber-500 font-mono flex items-center gap-1">
                    <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span> Config Error
                </span>

                <span x-show="isValidJson && isValidConfig"
                      class="text-base font-bold text-emerald-500 font-mono flex items-center gap-1">
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Live
                </span>
            </div>
        </div>

        <template x-if="configErrors.length > 0 && isValidJson">
            <div class="bg-amber-500/10 border border-amber-500/20 rounded-lg p-2 mx-1">
                <template x-for="err in configErrors">
                    <p class="text-sm font-mono text-amber-600 dark:text-amber-400 flex items-center gap-2">
                        <span>→</span> <span x-text="err"></span>
                    </p>
                </template>
            </div>
        </template>

        <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-sm 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-sm 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-sm font-black uppercase rounded-lg 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-sm font-black uppercase rounded-lg 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 %}