{% extends 'base/base.html' %}

{% block title %}Home{% endblock %}

{% block content %}
<section>
    <h2 class="font-light text-ink text-2xl">
        {% if g.user %}
            Hello {{ g.user.username | proper }},
        {% else %}
            Hello there,
        {% endif %}
    </h2>

    <div class="mt-2 space-y-1 text-sm text-ink-muted">
        <p>Welcome to a hypermedia-first Flask scaffold.</p>
        <p>Server-rendered HTML, HTMX fragments, and a command line that does the boring work.</p>
    </div>
</section>

<section
    hx-get="{{ url_for('core_bp.quickstart') }}"
    hx-trigger="load"
    hx-swap="innerHTML"
    id="quickstart"
    class="w-full"
>
    <div class="rounded-xl border border-line bg-surface p-5 text-sm text-ink-muted">
        Loading quickstart…
    </div>
</section>

<section class="w-full grid grid-cols-1 md:grid-cols-3 gap-4">
    {% set cards = [
        {"title": "Blueprints", "description": "Routes, actions, forms and queries stay separated by concern.", "icon": "git-branch-outline"},
        {"title": "HTMX native", "description": "Swap in server-rendered partials without a frontend framework.", "icon": "flash-outline"},
        {"title": "Secure by default", "description": "Hashed passwords, CSRF, sessions and rate limiting included.", "icon": "shield-checkmark-outline"},
    ] %}

    {% for card in cards %}
        <div class="rounded-xl border border-line bg-surface p-6 hover:border-line-strong transition-colors">
            <ion-icon name="{{ card.icon }}" class="text-brand text-2xl mb-3"></ion-icon>
            <h3 class="text-sm font-semibold text-ink mb-1">{{ card.title }}</h3>
            <p class="text-sm leading-relaxed text-ink-muted">{{ card.description }}</p>
        </div>
    {% endfor %}
</section>

<section class="w-full">
    <div class="flex items-center gap-2 mb-4">
        <ion-icon name="sparkles-outline" class="text-brand text-lg"></ion-icon>
        <h2 class="text-sm font-semibold text-ink">Next steps</h2>
    </div>

    <ol class="space-y-2 text-sm text-ink-muted">
        <li>
            <span class="font-mono text-ink">lombik module admin</span> — add a new blueprint
        </li>
        <li>
            <span class="font-mono text-ink">lombik model tenant</span> — create and register a model
        </li>
        <li>
            <span class="font-mono text-ink">lombik crud tenant</span> — generate a full CRUD module
        </li>
        <li>
            <span class="font-mono text-ink">lombik relate tenant.id to user.tenant_id one-to-many</span> — wire up relationships
        </li>
    </ol>
</section>
{% endblock %}