<script lang="ts">
  import type { ActionData } from './$types';
  let { form }: { form: ActionData } = $props();
</script>

<svelte:head>
  <title>Accedi — Admin</title>
</svelte:head>

<div class="login-shell">
  <div class="login-card">
    <h1>Admin Console</h1>
    <p>Accedi per gestire il contenuto della landing page.</p>
    <form method="POST">
      <div class="field">
        <label for="username">Username</label>
        <input id="username" name="username" type="text" autocomplete="username" value={form?.username ?? ''} required />
      </div>
      <div class="field">
        <label for="password">Password</label>
        <input id="password" name="password" type="password" autocomplete="current-password" required />
      </div>
      {#if form?.error}
        <div class="alert-row err">{form.error}</div>
      {/if}
      <button type="submit" class="btn">
        <span class="material-symbols-outlined" aria-hidden="true">login</span>
        Accedi
      </button>
    </form>
  </div>
</div>
