{% extends "base.html" %}
{% block title %}Login{% endblock %}

{% block content_guest %}
<div class="login-page">
  <div class="login-card">

    <!-- Ilustrasi / Branding -->
    <div class="login-hero">
      <div class="login-hero__icon">🏝️</div>
      <h1 class="login-hero__title">Junior Homestay</h1>
      <p class="login-hero__sub">Sistem Informasi Manajemen<br>Raja Ampat, Papua Barat</p>
    </div>

    <!-- Form Login -->
    <form method="POST" action="{{ url_for('login') }}" class="login-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <h2 class="login-form__title">Masuk ke Sistem</h2>

      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" id="username" name="username"
               class="form-control" placeholder="contoh: staf1"
               required autocomplete="username">
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password"
               class="form-control" placeholder="••••••••"
               required autocomplete="current-password">
      </div>

      <button type="submit" class="btn btn--primary btn--full">
        🔐 Masuk
      </button>
    </form>

    <!-- Info Akun Demo -->
    <div class="login-demo">
      <p class="login-demo__title">Akun Demo:</p>
      <div class="demo-accounts">
        <div class="demo-account">
          <span class="demo-badge demo-badge--owner">Owner</span>
          <code>owner</code> / <code>owner123</code>
        </div>
        <div class="demo-account">
          <span class="demo-badge demo-badge--staf">Staf</span>
          <code>staf1</code> / <code>staf123</code>
        </div>
      </div>
    </div>

    <p class="login-footer">Sistem Informasi Manajemen Homestay</p>
  </div>
</div>
{% endblock content_guest %}