{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block title %}{% if object %}Edit Memory{% else %}New Memory{% endif %} - Lamb{% endblock %}

{% block body %}
<main class="mx-auto max-w-4xl px-4 py-7 sm:px-6 lg:px-8">
    <section class="sketch-border paper-card bg-base-100/95 p-6 sm:p-8">
        <p class="hand-title text-base font-bold uppercase tracking-wide text-stone-700">Memory Editor</p>
        <h1 class="title-font mt-1 text-5xl text-stone-900">{% if object %}Edit Memory{% else %}Create Memory{% endif %}</h1>
        {% if object %}
        <p class="mt-2 text-sm text-stone-700">
            Source:
            <span class="rounded-lg bg-base-200 px-2 py-1 font-semibold text-stone-800">{{ object.get_source_display }}</span>
        </p>
        {% endif %}

        {% if form.non_field_errors %}
        <div class="mt-4 alert alert-error sketch-border bg-red-50 text-red-900">
            <span>{{ form.non_field_errors }}</span>
        </div>
        {% endif %}

        <form method="post" class="mt-6 space-y-5">
            {% csrf_token %}

            {% include "memories/_memory_form_fields.html" with form=form %}

            <div class="flex flex-wrap gap-2">
                <button type="submit" class="btn sketch-border rounded-2xl border-stone-900 bg-[var(--color-accent)] text-stone-950 hover:bg-[var(--color-pop)]">Save</button>
                <a href="{% url 'memories:list' %}" class="btn sketch-border rounded-2xl border-stone-900 bg-base-200 text-stone-900 hover:bg-base-300">Cancel</a>
            </div>
        </form>
    </section>
</main>
{% endblock %}