{% raw %}{% extends "base.html.j2" %}{% endraw %}

{% raw %}{% block content %}{% endraw %}
<main class="mx-auto flex min-h-screen max-w-3xl flex-col justify-center gap-6 px-6 py-12">
  <div class="space-y-2">
    <p class="text-sm font-semibold uppercase tracking-[0.14em] text-[#edb641]">Litestar · HTMX</p>
    <h1 class="text-4xl font-semibold text-slate-900">{{ "{{ project_name }}" }}</h1>
    <p class="max-w-2xl text-slate-600">
      Server-rendered HTML with HTMX enhancement and the Litestar extension for CSRF-aware requests.
    </p>
  </div>

  <section class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm shadow-slate-200/40">
    <div class="flex flex-wrap items-center gap-3">
      <button
        class="inline-flex items-center rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-slate-800"
        hx-get="/api/hello"
        hx-target="#greeting"
        hx-swap="innerHTML"
      >
        Load Greeting from API
      </button>
      <span class="text-sm text-slate-500">The response swaps directly into the page without a client router.</span>
    </div>
    <div id="greeting" class="mt-4 rounded-xl border border-dashed border-slate-200 bg-slate-50 px-4 py-3 text-slate-700">
      Click the button to fetch HTML from Litestar.
    </div>
  </section>
</main>
{% raw %}{% endblock %}{% endraw %}
