{% extends "pages/base.html" %}

{% block title %}{{ project.name }} — boxframe{% endblock %}

{% block content %}
<div class="project-page">
    <div class="flex-between mb-4">
        <div>
            <a href="/" class="back-link">← Projects</a>
            <h1>{{ project.name }}</h1>
        </div>
    </div>

    <!-- New layout form -->
    <div x-data="{ showNew: false, name: '', width: '', height: '' }">
        <div class="flex-between mb-4">
            <button x-show="!showNew" x-cloak @click="showNew = true" class="btn btn-primary">+ New Layout</button>
        </div>
        <div x-show="showNew" x-cloak class="card mb-4">
            <form @submit.prevent="
                fetch('/api/projects/{{ project.id }}/layouts', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        name,
                        width: width === '' ? null : parseInt(width),
                        height: height === '' ? null : parseInt(height)
                    })
                }).then(r => r.json()).then(data => {
                    window.location.href = '/layout/' + data.id;
                });
                showNew = false;
            ">
                <div class="form-row">
                    <input type="text" x-model="name" placeholder="Layout name..." class="input" required>
                    <input type="number" x-model="width" placeholder="Width (optional)" class="input input-sm" min="1">
                    <input type="number" x-model="height" placeholder="Height (optional)" class="input input-sm" min="1">
                    <button type="submit" class="btn btn-primary">Create</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Layouts list -->
    <div class="grid">
        {% for layout in project.layouts %}
        <div class="card">
            <a href="/layout/{{ layout.id }}" class="card-link">
                <h3>{{ layout.name }}</h3>
                <p class="text-muted">
                    {% if layout.width is not none and layout.height is not none %}
                    {{ layout.width }}×{{ layout.height }} grid
                    {% elif layout.width is not none %}
                    width {{ layout.width }}
                    {% elif layout.height is not none %}
                    height {{ layout.height }}
                    {% else %}
                    no bounds
                    {% endif %}
                </p>
                <p class="text-small text-muted">Created: {{ layout.created_at.strftime('%Y-%m-%d') if layout.created_at else '' }}</p>
            </a>
            <button hx-delete="/api/layouts/{{ layout.id }}"
                    hx-confirm="Delete layout '{{ layout.name }}'?"
                    hx-target="closest .card"
                    hx-swap="delete"
                    class="btn btn-danger btn-sm">Delete</button>
        </div>
        {% else %}
        <div class="card empty">
            <p>No layouts yet. Create your first mockup!</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}