{% extends "base.html" %}

{% block title %}ht_booking · Loco SaaS starter{% endblock title %}

{% block page_title %}What this Loco app gives you out of the box{% endblock page_title %}

{% block content %}
<p class="text-gray-600 max-w-3xl">
  This page replaces the default Loco fallback screen. Every model, controller,
  migration and route below was produced by <code class="bg-gray-100 px-1 rounded">cargo loco generate</code> —
  nothing here is hand-written boilerplate.
</p>

<!-- 1. AUTHENTICATION -->
<section class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm mt-4">
  <h2 class="text-xl font-semibold">1 · Authentication — JWT API</h2>
  <p class="text-sm text-gray-600 mt-1 max-w-3xl">
    The SaaS starter ships a complete JWT auth flow in <code class="bg-gray-100 px-1 rounded">src/controllers/auth.rs</code>.
    It is a JSON API (no HTML login pages) — so here is a live console that calls those exact endpoints.
  </p>

  <div class="overflow-auto mt-4">
    <table class="w-full text-sm border-collapse">
      <thead>
        <tr class="text-left border-b border-gray-300">
          <th class="py-1 pr-4">Method</th>
          <th class="py-1 pr-4">Path</th>
          <th class="py-1 pr-4">JSON body</th>
          <th class="py-1">Purpose</th>
        </tr>
      </thead>
      <tbody class="font-mono text-xs">
        <tr class="border-b border-gray-100"><td class="py-1 pr-4">POST</td><td class="pr-4">/api/auth/register</td><td class="pr-4">name, email, password</td><td class="font-sans">create an account</td></tr>
        <tr class="border-b border-gray-100"><td class="py-1 pr-4">POST</td><td class="pr-4">/api/auth/login</td><td class="pr-4">email, password</td><td class="font-sans">returns a JWT token</td></tr>
        <tr class="border-b border-gray-100"><td class="py-1 pr-4">GET</td><td class="pr-4">/api/auth/current</td><td class="pr-4">— (Bearer token)</td><td class="font-sans">info about the logged-in user</td></tr>
        <tr class="border-b border-gray-100"><td class="py-1 pr-4">POST</td><td class="pr-4">/api/auth/forgot</td><td class="pr-4">email</td><td class="font-sans">start password reset</td></tr>
        <tr class="border-b border-gray-100"><td class="py-1 pr-4">POST</td><td class="pr-4">/api/auth/reset</td><td class="pr-4">token, password</td><td class="font-sans">set a new password</td></tr>
        <tr class="border-b border-gray-100"><td class="py-1 pr-4">GET</td><td class="pr-4">/api/auth/verify/{token}</td><td class="pr-4">—</td><td class="font-sans">verify an email address</td></tr>
        <tr class="border-b border-gray-100"><td class="py-1 pr-4">POST</td><td class="pr-4">/api/auth/magic-link</td><td class="pr-4">email</td><td class="font-sans">email a passwordless login link</td></tr>
        <tr class="border-b border-gray-100"><td class="py-1 pr-4">GET</td><td class="pr-4">/api/auth/magic-link/{token}</td><td class="pr-4">—</td><td class="font-sans">exchange the link for a JWT</td></tr>
        <tr><td class="py-1 pr-4">POST</td><td class="pr-4">/api/auth/resend-verification-mail</td><td class="pr-4">email</td><td class="font-sans">resend the verification mail</td></tr>
      </tbody>
    </table>
  </div>

  <div class="grid md:grid-cols-3 gap-4 mt-6">
    <form onsubmit="doRegister(event)" class="space-y-2 rounded-lg bg-gray-50 p-4">
      <h3 class="font-medium">Register</h3>
      <input name="name" value="Alice" class="w-full rounded border-gray-300 text-sm" placeholder="name">
      <input name="email" value="alice@example.com" class="w-full rounded border-gray-300 text-sm" placeholder="email">
      <input name="password" type="password" value="loco-password-123" class="w-full rounded border-gray-300 text-sm" placeholder="password">
      <button class="w-full rounded bg-blue-600 text-white text-sm py-2 hover:bg-blue-700">POST /register</button>
      <pre id="register-out" class="text-xs bg-gray-900 text-gray-100 rounded p-2 overflow-auto min-h-[3rem] whitespace-pre-wrap"></pre>
    </form>

    <form onsubmit="doLogin(event)" class="space-y-2 rounded-lg bg-gray-50 p-4">
      <h3 class="font-medium">Login</h3>
      <input name="email" value="alice@example.com" class="w-full rounded border-gray-300 text-sm" placeholder="email">
      <input name="password" type="password" value="loco-password-123" class="w-full rounded border-gray-300 text-sm" placeholder="password">
      <button class="w-full rounded bg-blue-600 text-white text-sm py-2 hover:bg-blue-700">POST /login</button>
      <pre id="login-out" class="text-xs bg-gray-900 text-gray-100 rounded p-2 overflow-auto min-h-[3rem] whitespace-pre-wrap"></pre>
    </form>

    <div class="space-y-2 rounded-lg bg-gray-50 p-4">
      <h3 class="font-medium">Current user</h3>
      <p class="text-xs text-gray-500">Sends the JWT from a successful login as a Bearer token.</p>
      <button onclick="doCurrent()" class="w-full rounded bg-blue-600 text-white text-sm py-2 hover:bg-blue-700">GET /current</button>
      <pre id="current-out" class="text-xs bg-gray-900 text-gray-100 rounded p-2 overflow-auto min-h-[3rem] whitespace-pre-wrap"></pre>
    </div>
  </div>

  <p class="text-xs text-gray-500 mt-3">
    Active JWT: <code id="token-box" class="bg-gray-100 px-1 rounded break-all"></code>
  </p>
</section>

<!-- 2. DATABASE CRUD -->
<section class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm mt-4">
  <h2 class="text-xl font-semibold">2 · Database CRUD — Courts</h2>
  <p class="text-sm text-gray-600 mt-1 max-w-3xl">
    A model, SeaORM entity, migration, controller and Tera views, all generated with one command:
  </p>
  <pre class="text-xs bg-gray-900 text-gray-100 rounded p-3 mt-2 overflow-auto">cargo loco generate scaffold court name:string surface:string indoor:bool --html</pre>
  <a href="/courts" class="inline-block mt-3 rounded bg-emerald-600 text-white text-sm px-4 py-2 hover:bg-emerald-700">Open /courts &rarr;</a>
</section>

<!-- 3. HEALTH -->
<section class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm mt-4">
  <h2 class="text-xl font-semibold">3 · Health &amp; ops endpoints</h2>
  <p class="text-sm text-gray-600 mt-1">Built-in, no code needed:</p>
  <ul class="list-disc list-inside text-sm mt-2 space-y-1">
    <li><a class="text-blue-600 underline" href="/_ping">/_ping</a> — liveness</li>
    <li><a class="text-blue-600 underline" href="/_health">/_health</a> — DB &amp; queue health</li>
    <li><a class="text-blue-600 underline" href="/_readiness">/_readiness</a> — readiness probe</li>
  </ul>
</section>

<!-- 4. VIEWS + I18N -->
<section class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm mt-4">
  <h2 class="text-xl font-semibold">4 · Server-side views &amp; i18n</h2>
  <p class="text-sm text-gray-600 mt-1 max-w-3xl">
    Tera templates plus Fluent translations. The same key <code class="bg-gray-100 px-1 rounded">hello-world</code>,
    resolved by the <code class="bg-gray-100 px-1 rounded">t()</code> function in this template:
  </p>
  <ul class="list-disc list-inside text-sm mt-2 space-y-1">
    <li><strong>en-US:</strong> {{ t(key="hello-world", lang="en-US") }}</li>
    <li><strong>de-DE:</strong> {{ t(key="hello-world", lang="de-DE") }}</li>
  </ul>
</section>

<!-- 5. MORE -->
<section class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm mt-4 mb-8">
  <h2 class="text-xl font-semibold">5 · Also wired up (CLI-generated when you need them)</h2>
  <ul class="list-disc list-inside text-sm mt-2 space-y-1">
    <li>Background workers — <code class="bg-gray-100 px-1 rounded">cargo loco generate worker &lt;name&gt;</code></li>
    <li>Scheduled / one-off tasks — <code class="bg-gray-100 px-1 rounded">cargo loco generate task &lt;name&gt;</code></li>
    <li>Mailers — <code class="bg-gray-100 px-1 rounded">cargo loco generate mailer &lt;name&gt;</code> (the auth flow already uses one)</li>
    <li>Inspect every route — <code class="bg-gray-100 px-1 rounded">cargo loco routes</code></li>
  </ul>
</section>
{% endblock content %}

{% block js %}
{% raw %}
<script>
  const show = (id, status, body) => {
    document.getElementById(id).textContent =
      'HTTP ' + status + '\n' + (body && body.length ? body : '(empty body)');
  };

  let jwt = sessionStorage.getItem('jwt') || '';
  const renderToken = () => {
    document.getElementById('token-box').textContent = jwt ? jwt : '(none yet — log in)';
  };

  async function doRegister(e) {
    e.preventDefault();
    const fd = new FormData(e.target);
    const res = await fetch('/api/auth/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: fd.get('name'), email: fd.get('email'), password: fd.get('password') })
    });
    const body = await res.text();
    show('register-out', res.status, body || '(empty body = account created; welcome email queued)');
  }

  async function doLogin(e) {
    e.preventDefault();
    const fd = new FormData(e.target);
    const res = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: fd.get('email'), password: fd.get('password') })
    });
    const body = await res.text();
    if (res.ok) {
      try {
        jwt = JSON.parse(body).token;
        sessionStorage.setItem('jwt', jwt);
        renderToken();
      } catch (err) { /* non-JSON body */ }
    }
    show('login-out', res.status, body);
  }

  async function doCurrent() {
    if (!jwt) {
      document.getElementById('current-out').textContent = 'Log in first to obtain a JWT.';
      return;
    }
    const res = await fetch('/api/auth/current', {
      headers: { 'Authorization': 'Bearer ' + jwt }
    });
    show('current-out', res.status, await res.text());
  }

  renderToken();
</script>
{% endraw %}
{% endblock js %}