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

{% block extra_head %}
<script src="/static/mosaic.js"></script>
{% endblock %}

{% block content %}
<div x-data="mosaic()" class="space-y-8" x-cloak>
    <section x-show="trials.length > 0">
        <h2 class="text-xl font-black text-cyan-500 mb-4 flex items-center uppercase tracking-tight">
            <svg class="w-6 h-6 mr-2 stroke-current" fill="none" viewBox="0 0 24 24" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
            </svg>
            Available Trials
        </h2>

        <div class="bg-white dark:bg-slate-800 border border-slate-400 dark:border-slate-700 rounded-xl p-6 max-h-[60vh] overflow-y-auto shadow-xl custom-scrollbar">
            <div class="grid grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] gap-4">
                <template x-for="trial in trials" :key="trial">
                    <a :href="`/mosaic/${trial}`" class="inline-flex items-center justify-center px-3 py-2 bg-slate-50 dark:bg-slate-900/50 border border-slate-300 dark:border-slate-600 text-slate-600 dark:text-slate-400 rounded-md font-mono text-xs font-bold transition-all duration-200 shadow-sm hover:scale-110 hover:border-cyan-500 hover:text-cyan-500 hover:shadow-cyan-500/20 active:scale-95" x-text="trial">
                    </a>
                </template>
            </div>
        </div>
    </section>

    <template x-if="!loading && trials.length === 0">
        <div class="p-12 border-2 border-dashed border-slate-300 dark:border-slate-700 rounded-2xl text-center bg-white/50 dark:bg-slate-800/50">
            <p class="text-slate-500 font-mono italic">No telemetry.duckdb files found in any trial directories.</p>
        </div>
    </template>
</div>
{% endblock %}