{% extends 'eval/base.html' %}
{% block title %}Gold Sets | Eval Admin{% endblock %}

{% block action_bar %}
<span class="font-semibold">Gold Sets</span>
{% endblock %}

{% block content %}
<div x-data="goldSetsPageData()" x-init="applyFilters(); $watch('filters', () => applyFilters(), { deep: true })">
  <script id="eval-gold-sets-data" type="application/json">
  {"apiFilteredGoldSetsUrl": "{% url 'Eval:api_filtered_gold_sets' %}", "apiGoldSetUploadUrl": "{% url 'Eval:api_gold_set_upload' %}", "referenceDateIso": "{{ reference_date_iso }}", "tableLimit": {{ table_limit|default:20 }}}
  </script>
  {% include "eval/components/_gold_set_filters.html" %}
  <div class="mb-4 space-y-3">
    <c-button variant="default" class="h-9 px-4" @click="uploadOpen = !uploadOpen">
      <span class="inline-flex items-center gap-2">
        <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="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>
        Upload gold set
      </span>
    </c-button>
    <div x-show="uploadOpen" x-cloak x-transition class="space-y-2">
      <div class="border-2 border-dashed border-border rounded-lg p-6 text-center hover:border-primary/50 hover:bg-muted/30 transition-colors cursor-pointer"
           @click="$refs.goldSetInput.click()"
           @dragover.prevent="goldSetDragOver = true"
           @dragleave="goldSetDragOver = false"
           @drop.prevent="handleGoldSetDrop($event)"
           :class="goldSetDragOver ? 'border-primary/50 bg-muted/30' : ''">
        <input type="file" x-ref="goldSetInput" @change="handleGoldSetSelect($event)" class="hidden" accept=".json,application/json" />
        <svg class="mx-auto h-8 w-8 text-muted-foreground mb-2" 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>
        <p class="text-sm font-medium text-foreground">Drop a gold set file or click to upload</p>
        <p class="text-xs text-muted-foreground mt-1">Supports JSON gold set exports</p>
      </div>
      <div class="text-xs" x-show="goldSetFileName">
        <span class="text-muted-foreground">File:</span>
        <span class="font-mono text-foreground ml-1" x-text="goldSetFileName || '—'"></span>
      </div>
    </div>
  </div>
  <div x-show="uploadError" x-cloak x-transition
       class="mb-4 flex items-center justify-between gap-3 rounded-md border border-eval-metric-bad/50 bg-eval-metric-bad/10 px-4 py-3 text-sm text-eval-metric-bad">
    <span x-text="uploadError"></span>
    <button type="button" @click="uploadError = ''" class="shrink-0 text-eval-metric-bad hover:opacity-80" aria-label="Dismiss">
      <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>
  {% include "eval/components/_gold_set_table.html" with title="All gold sets" columns=table_columns show_actions=True actions=table_actions %}
</div>

{% load static %}
<script src="{% static 'eval/js/eval-gold-sets.js' %}"></script>
{% endblock %}