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

{% block action_bar %}
<c-detail-nav
  back_url="{% url 'Eval:gold_sets' %}"
  back_label="Gold Sets"
  title="{{ gold_set_name }}"
/>
{% endblock %}

{% block content %}
{{ gold_set|json_script:"gold-set-json-init" }}
<div x-data="goldSetDetailData()" x-init="init()">
  <c-card>
    <c-card-header class="flex flex-row items-center justify-between">
      <c-card-title>Gold Set JSON</c-card-title>
      <div class="flex items-center gap-2">
        <span x-show="saveStatus === 'saving'" class="text-sm text-muted-foreground">Saving…</span>
        <span x-show="saveStatus === 'success'" class="text-sm text-green-600">Saved</span>
        <span x-show="saveStatus === 'error'" class="text-sm text-destructive" x-text="saveError"></span>
        <c-button variant="default"
                  :disabled="saveStatus === 'saving'"
                  @click="save()"
                  class="h-9 px-4">
          Save
        </c-button>
      </div>
    </c-card-header>
    <c-card-content>
      <div class="flex border border-input rounded-md bg-muted/30">
        <div x-ref="lineNumbers"
             class="flex-shrink-0 py-4 pl-4 pr-3 text-right text-muted-foreground font-mono text-sm select-none"
             style="line-height: 1.5; min-width: 2.5rem;">
          <template x-for="n in lineCount()" :key="n">
            <div style="line-height: 1.5;" x-text="n"></div>
          </template>
        </div>
        <textarea x-ref="editor"
                  x-model="jsonContent"
                  @keydown.tab.prevent="handleTab($event)"
                  @keydown="handleBracket($event); handleEnter($event)"
                  spellcheck="false"
                  class="flex-1 p-4 pt-4 pl-2 border-0 border-l border-input bg-transparent font-mono text-sm resize-none focus:outline-none focus:ring-0 focus:ring-offset-0 rounded-none"
                  placeholder="{}"
                  style="line-height: 1.5; tab-size: 2; overflow: hidden;"></textarea>
      </div>
      <p class="mt-2 text-xs text-muted-foreground">Edit the JSON above. Invalid JSON will show an error when saving.</p>
    </c-card-content>
  </c-card>
</div>

{% load static %}
<script id="gold-set-detail-config" type="application/json">{"saveUrl": "{% url 'Eval:api_gold_set_save' gold_set_id %}"}</script>
<script src="{% static 'eval/js/eval-gold-set-detail.js' %}"></script>
{% endblock %}