{% extends 'eval/base.html' %}
{% load static %}
{% block title %}Experiment Configs | Eval Admin{% endblock %}

{% block action_bar %}
<span class="font-semibold">Experiment Configs</span>
<div class="ml-auto">
    <a href="{% url 'Eval:config_builder_new' %}"
       class="inline-flex items-center gap-1.5 h-9 px-4 rounded-md text-sm font-semibold transition-colors bg-eval-cta-primary text-eval-cta-primary-foreground hover:bg-eval-cta-primary-hover">
        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/>
        </svg>
        New Config
    </a>
</div>
{% endblock %}

{% block content %}
<script id="experiment-configs-data" type="application/json">{{ configs_json|safe }}</script>

<div x-data="evalExperimentConfigs()" x-init="init()">

    {# ─── Filters ────────────────────────────────────────────────────── #}
    <div class="flex flex-wrap items-center gap-3 mb-4">
        <input
            type="text"
            x-model="nameFilter"
            @input="applyFilter()"
            placeholder="Search configs…"
            class="h-9 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring w-56"
        />
        <label class="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer select-none">
            <input type="checkbox" x-model="showInactiveOnly" @change="applyFilter()" class="rounded border-input" />
            <span>Configs with inactive models</span>
        </label>
    </div>

    {# ─── Toast ──────────────────────────────────────────────────────── #}
    <div x-show="toast" x-cloak x-transition
         class="mb-4 flex items-center justify-between gap-3 rounded-md border px-4 py-3 text-sm"
         :class="toastType === 'error' ? 'border-eval-metric-bad/50 bg-eval-metric-bad/10 text-eval-metric-bad' : 'border-green-500/50 bg-green-500/10 text-green-700'">
        <span x-text="toast"></span>
        <button type="button" @click="toast = ''" class="shrink-0 hover:opacity-80">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>

    {# ─── Table ──────────────────────────────────────────────────────── #}
    {% include "eval/components/_paginated_table.html" with rows_key="tableConfigs" page_size_key="tableLimit" title="All experiment configs" columns=table_columns row_click_url_key="detail_url" show_actions=True actions=table_actions empty_message="No configs match the current filters." %}

</div>

<script src="{% static 'eval/js/eval-experiment-configs.js' %}"></script>
{% endblock %}