{% extends 'scratchpad/_layout.html' %}

{% block scratchpad_header %}
  <div class="nb-panel p-3 mb-4 flex items-center justify-between">
    <h2 class="text-xl font-extrabold tracking-tight">Scratchpads</h2>
    <form hx-post="/scratchpad" hx-target="#main_section" hx-swap="outerHTML" class="flex gap-2">
      <input type="text" name="title" placeholder="Enter scratchpad title..." class="nb-input nb-input-sm" required>
      <button type="submit" class="nb-btn nb-cta">
        {% include "icons/scratchpad_icon.html" %} Create
      </button>
    </form>
  </div>
{% endblock %}

{% block scratchpad_content %}
  <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
    {% for scratchpad in scratchpads %}
    <div class="nb-card p-4 hover:nb-shadow-hover transition-all">
      <div class="flex justify-between items-start mb-2">
        <h3 class="font-semibold text-lg truncate flex-1">{{ scratchpad.title }}</h3>
        <div class="flex gap-1 ml-2">
          <button hx-get="/scratchpad/{{ scratchpad.id }}/modal" hx-target="#modal" hx-swap="innerHTML"
            class="nb-btn nb-btn-sm btn-ghost" title="Edit scratchpad">
            {% include "icons/pencil_icon.html" %}
          </button>
          <form hx-post="/scratchpad/{{ scratchpad.id }}/archive" hx-target="#main_section" hx-swap="outerHTML"
            class="inline-flex">
            <button type="submit" class="nb-btn nb-btn-sm btn-ghost text-warning" title="Archive scratchpad">
              {% include "icons/delete_icon.html" %}
            </button>
          </form>
        </div>
      </div>
      <div class="text-sm text-base-content/70 mb-2">
        {{ scratchpad.content[:100] }}{% if scratchpad.content|length > 100 %}...{% endif %}
      </div>
      <div class="text-xs text-base-content/50">
        Last saved: {{ scratchpad.last_saved_at | datetimeformat(format="short", tz=user.timezone) }}
      </div>
    </div>
    {% else %}
    <div class="col-span-full nb-panel p-8 text-center">
      <h3 class="text-lg font-semibold mt-2 mb-2">No scratchpads yet</h3>
      <p class="text-base-content/70 mb-4">Create your first scratchpad to start jotting down ideas</p>
      <form hx-post="/scratchpad" hx-target="#main_section" hx-swap="outerHTML"
        class="inline-flex gap-2">
        <input type="text" name="title" placeholder="My first scratchpad..." class="nb-input" required>
        <button type="submit" class="nb-btn nb-cta">
          {% include "icons/scratchpad_icon.html" %} Create Scratchpad
        </button>
      </form>
    </div>
    {% endfor %}
  </div>
{% endblock %}

{% block scratchpad_archived %}
  {% if archived_scratchpads %}
  <div class="mt-6">
    <details class="nb-panel p-3 space-y-4">
      <summary class="flex items-center justify-between gap-2 text-sm font-semibold cursor-pointer">
        <span>Archived Scratchpads</span>
        <span class="nb-badge">{{ archived_scratchpads|length }}</span>
      </summary>

      <div class="text-sm text-base-content/60">Archived scratchpads were ingested into your knowledge base. You can
        restore them if you want to keep editing.</div>

      <div class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
        {% for scratchpad in archived_scratchpads %}
        <div class="nb-card p-3 space-y-3">
          <div class="flex items-start justify-between gap-3">
            <div class="flex-1 min-w-0">
              <h4 class="font-semibold text-base truncate" title="{{ scratchpad.title }}">{{ scratchpad.title }}</h4>
              <div class="text-xs text-base-content/50">Archived {{ scratchpad.archived_at | datetimeformat(format="short", tz=user.timezone) }}</div>
              {% if scratchpad.ingested_at %}
              <div class="text-xs text-base-content/40">Ingestion started {{ scratchpad.ingested_at | datetimeformat(format="short", tz=user.timezone) }}</div>
              {% endif %}
            </div>
            <div class="flex items-center gap-2 flex-shrink-0 flex-wrap justify-end">
              <form hx-post="/scratchpad/{{ scratchpad.id }}/restore" hx-target="#main_section" hx-swap="outerHTML"
                class="inline-flex">
                <button type="submit" class="nb-btn nb-btn-sm">
                  Restore
                </button>
              </form>
              <form hx-delete="/scratchpad/{{ scratchpad.id }}" hx-target="#main_section" hx-swap="outerHTML"
                hx-confirm="Permanently delete this scratchpad?" class="inline-flex">
                <button type="submit" class="nb-btn nb-btn-sm btn-ghost text-error" title="Delete permanently">
                  {% include "icons/delete_icon.html" %}
                </button>
              </form>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </details>
  </div>
  {% endif %}
{% endblock %}