{% import "_icons.html" as icons %}
<div class="panel link-card card-edit-wide" id="prompt-{{ prompt.id }}">
  <form hx-put="/prompts/{{ prompt.id }}" hx-target="#prompt-{{ prompt.id }}" hx-swap="outerHTML"
        hx-disabled-elt="button">
    <div class="muted" style="font-size:.75rem; margin:0 0 10px;">
      {{ icons.clock(size=13) }} hinzugefügt am {{ prompt.created_at | datum }}
    </div>

    <div class="field">
      <label>Titel</label>
      <input type="text" name="title" value="{{ prompt.title }}">
    </div>

    <div class="field">
      <label>Prompt-Text</label>
      <textarea name="content" rows="12" style="width:100%; background:var(--panel2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:10px 12px; font-size:.95rem; font-family:inherit;">{{ prompt.content }}</textarea>
    </div>

    <div style="display:flex; gap:12px; flex-wrap:wrap;">
      <div class="field" style="flex:1 1 200px;">
        <label>Kategorie</label>
        <input type="text" name="category" value="{{ prompt.category }}"
               list="prompt-cats-{{ prompt.id }}" placeholder="wählen oder neu eingeben"
               autocomplete="off">
        <datalist id="prompt-cats-{{ prompt.id }}">
          {% for name in all_categories %}<option value="{{ name }}"></option>{% endfor %}
        </datalist>
      </div>
      <div class="field" style="flex:2 1 300px;">
        <label>Tags (mit Komma getrennt)</label>
        <input type="text" name="tags" value="{{ prompt.tag_list | join(', ') }}">
      </div>
    </div>

    <div style="display:flex; justify-content:space-between; gap:8px; margin-top:4px; flex-wrap:wrap;">
      <div style="display:flex; gap:8px;">
        <button type="submit">Speichern</button>
        <button type="button" class="ghost"
                hx-get="/prompts/{{ prompt.id }}/view"
                hx-target="#prompt-{{ prompt.id }}"
                hx-swap="outerHTML">Abbrechen</button>
      </div>
      {% if ai_enabled %}
      <button type="button" class="ghost"
              hx-post="/prompts/{{ prompt.id }}/reanalyze"
              hx-target="#prompt-{{ prompt.id }}"
              hx-swap="outerHTML"
              hx-disabled-elt="this"
              hx-confirm="Prompt erneut von der KI kategorisieren lassen? Bestehende Angaben werden dabei ersetzt.">
        <span class="htmx-indicator icon-spin">{{ icons.spinner(size=14) }}</span>
        {{ icons.sparkles(size=14) }} KI neu kategorisieren lassen
      </button>
      {% endif %}
    </div>
  </form>
</div>