{% extends "base.html" %}
{% block title %}— Datasets{% endblock %}
{% block content %}

<div x-data="{ registering: false }">

{# ── header ── #}
<div class="mb-6 flex items-center justify-between">
  <div>
    <h1 class="text-2xl font-bold text-slate-900">Datasets</h1>
    <p class="text-sm text-slate-500 mt-1">Registered dataset inventory</p>
  </div>
  <button @click="registering = !registering"
          class="inline-flex items-center gap-2 px-4 py-2 rounded-lg
                 bg-indigo-600 hover:bg-indigo-700 text-white text-sm
                 font-medium transition-colors">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
         viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
    </svg>
    <span x-text="registering ? 'Cancel' : 'Register dataset'"></span>
  </button>
</div>

{# ── register form ── #}
<div x-show="registering" x-cloak class="mb-6">
  <div class="bg-white rounded-lg border border-indigo-200 shadow-sm">
    <div class="px-6 py-4 border-b border-slate-100">
      <h2 class="text-sm font-semibold text-slate-900">Register a dataset</h2>
      <p class="text-xs text-slate-400 mt-0.5">
        Provide the server-side path to the file you want to register.
      </p>
    </div>
    <form hx-post="/datasets/register"
          hx-target="#register-flash"
          hx-swap="innerHTML"
          hx-on::after-request="if(event.detail.successful && event.detail.xhr.getResponseHeader('HX-Trigger') === 'datasetRegistered') { registering = false; htmx.trigger('#dataset-table', 'refresh'); }"
          class="px-6 py-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

      <div class="lg:col-span-2">
        <label class="block text-xs font-medium text-slate-600 mb-1">
          File path <span class="text-red-500">*</span>
        </label>
        <input type="text" name="source_file" required
               placeholder="/path/to/data.csv"
               class="w-full rounded border border-slate-300 px-3 py-1.5
                      text-sm font-mono text-slate-900 focus:outline-none
                      focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
      </div>

      <div>
        <label class="block text-xs font-medium text-slate-600 mb-1">Encoding</label>
        <select name="encoding"
                class="w-full rounded border border-slate-300 px-3 py-1.5
                       text-sm text-slate-900 bg-white focus:outline-none
                       focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
          <option value="csv">csv</option>
          <option value="json">json</option>
          <option value="hf-json">hf-json</option>
          <option value="text">text</option>
          <option value="pandas">pandas</option>
          <option value="pickle">pickle</option>
        </select>
      </div>

      <div>
        <label class="block text-xs font-medium text-slate-600 mb-1">Use</label>
        <select name="use"
                class="w-full rounded border border-slate-300 px-3 py-1.5
                       text-sm text-slate-900 bg-white focus:outline-none
                       focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
          <option value="other">other</option>
          <option value="train">train</option>
          <option value="test">test</option>
          <option value="validate">validate</option>
        </select>
      </div>

      <div>
        <label class="block text-xs font-medium text-slate-600 mb-1">
          Tags <span class="font-normal text-slate-400">(comma-separated)</span>
        </label>
        <input type="text" name="tags" placeholder="train, processed"
               class="w-full rounded border border-slate-300 px-3 py-1.5
                      text-sm text-slate-900 focus:outline-none
                      focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
      </div>

      <div>
        <label class="block text-xs font-medium text-slate-600 mb-1">
          Custom ID <span class="font-normal text-slate-400">(optional)</span>
        </label>
        <input type="text" name="custom_id" placeholder="auto-generated if blank"
               class="w-full rounded border border-slate-300 px-3 py-1.5
                      text-sm font-mono text-slate-900 focus:outline-none
                      focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
      </div>

      <div class="lg:col-span-3">
        <label class="block text-xs font-medium text-slate-600 mb-1">
          Description <span class="font-normal text-slate-400">(optional)</span>
        </label>
        <input type="text" name="description" placeholder="Brief description of this dataset"
               class="w-full rounded border border-slate-300 px-3 py-1.5
                      text-sm text-slate-900 focus:outline-none
                      focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
      </div>

      <div class="sm:col-span-2 lg:col-span-3 flex justify-end">
        <button type="submit"
                class="px-6 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700
                       text-white text-sm font-medium transition-colors">
          Register
        </button>
      </div>
    </form>
  </div>
</div>

{# ── flash areas ── #}
<div id="register-flash" class="mb-4"></div>
<div id="dataset-flash" class="mb-4"></div>

{# ── dataset table (refreshed after registration) ── #}
{% include "partials/datasets_table.html" %}

</div>{# end x-data #}
{% endblock %}