{% extends 'body_base.html' %}

{% block title %}Minne - Scratchpad{% endblock %}

{% block main %}
<main id="main_section" class="flex justify-center grow mt-2 sm:mt-4 gap-6 mb-10 w-full">
  <div class="container">
    {% block 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 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 %}

    {% 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 %}
  </div>
</main>

{% if new_scratchpad %}
<div hx-swap-oob="innerHTML:#modal">
  <div hx-get="/scratchpad/{{ new_scratchpad.id }}/modal" hx-trigger="load" hx-target="#modal" hx-swap="innerHTML"></div>
</div>
{% endif %}
{% endblock %}