{% extends "base.html" %}
{% load render_table from django_tables2 %}

{% block title %}Memories - Lamb{% endblock %}

{% block body %}
<main class="mx-auto max-w-6xl px-4 py-7 sm:px-6 lg:px-8">
    {% include "_page_header.html" with header_label="Memory Desk" header_title="Memories" header_description="Browse, filter, and edit your memory timeline." %}

    <div class="mb-6">
        <a href="{% url 'memories:new' %}" class="btn btn-sm sketch-border rounded-2xl border-stone-900 bg-[var(--color-accent)] text-stone-950 hover:bg-[var(--color-pop)]">
            Add memory
        </a>
    </div>

    <section class="sketch-border paper-card mb-6 bg-base-100/90 p-5">
        <form method="get" class="grid grid-cols-1 gap-4 md:grid-cols-5">
            <label class="form-control w-full">
                <span class="label-text mb-1 font-semibold text-stone-800">Search</span>
                <input type="text" name="q" value="{{ request.GET.q|default:'' }}" class="input input-bordered sketch-border w-full rounded-2xl bg-white" placeholder="title, content, tags...">
            </label>

            <label class="form-control w-full">
                <span class="label-text mb-1 font-semibold text-stone-800">Type</span>
                <select name="type" class="select select-bordered sketch-border w-full rounded-2xl bg-white">
                    <option value="">All types</option>
                    {% for code, label in filter.form.fields.type.choices %}
                        {% if code %}
                        <option value="{{ code }}" {% if request.GET.type == code %}selected{% endif %}>{{ label }}</option>
                        {% endif %}
                    {% endfor %}
                </select>
            </label>

            <label class="form-control w-full">
                <span class="label-text mb-1 font-semibold text-stone-800">Source</span>
                <select name="source" class="select select-bordered sketch-border w-full rounded-2xl bg-white">
                    <option value="">All sources</option>
                    {% for code, label in filter.form.fields.source.choices %}
                        {% if code %}
                        <option value="{{ code }}" {% if request.GET.source == code %}selected{% endif %}>{{ label }}</option>
                        {% endif %}
                    {% endfor %}
                </select>
            </label>

            <label class="form-control w-full">
                <span class="label-text mb-1 font-semibold text-stone-800">Relevant after</span>
                <input type="date" name="relevant_date_after" value="{{ request.GET.relevant_date_after|default:'' }}" class="input input-bordered sketch-border w-full rounded-2xl bg-white">
            </label>

            <label class="form-control w-full">
                <span class="label-text mb-1 font-semibold text-stone-800">Relevant before</span>
                <input type="date" name="relevant_date_before" value="{{ request.GET.relevant_date_before|default:'' }}" class="input input-bordered sketch-border w-full rounded-2xl bg-white">
            </label>

            <div class="md:col-span-5 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)]">Apply filters</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">Reset</a>
            </div>
        </form>
    </section>

    {% if messages %}
    <section class="mb-6 space-y-3">
        {% for message in messages %}
        <div class="sketch-border alert {% if message.tags == 'error' %}alert-error{% elif message.tags == 'success' %}alert-success{% else %}alert-info{% endif %} bg-base-100">
            <span>{{ message }}</span>
        </div>
        {% endfor %}
    </section>
    {% endif %}

    <section class="sketch-border paper-card overflow-x-auto bg-base-100/95 p-3 sm:p-5">
        {% render_table table %}
    </section>
</main>
{% endblock %}