{% extends 'base.html' %}
{% block auth_content %}
<div class="login-wrapper d-flex align-items-center justify-content-center min-vh-100">
  <div class="login-card shadow-lg border-0">
    <div class="row g-0">
      <div class="col-lg-6 p-5 bg-primary-subtle d-none d-lg-flex flex-column justify-content-center">
        <h2 class="fw-bold">Sistem Mutu, Akreditasi & Keuangan</h2>
        <p class="text-secondary">Platform terpadu untuk BAN-PT, SPMI, dokumen bukti, dan monitoring keuangan kampus.</p>
        <ul class="text-secondary ps-3">
          <li>Dashboard pimpinan profesional</li>
          <li>Upload dokumen terstruktur</li>
          <li>Pelacakan temuan dan tindak lanjut</li>
        </ul>
      </div>
      <div class="col-lg-6 p-5 bg-white">
        <h3 class="fw-bold mb-1">Masuk</h3>
        <p class="text-secondary">Gunakan akun yang sudah disediakan.</p>
        {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
            {% for category, message in messages %}
              <div class="alert alert-{{ category }}">{{ message }}</div>
            {% endfor %}
          {% endif %}
        {% endwith %}
        <form method="post">
          <div class="mb-3">
            <label class="form-label">Username</label>
            <input type="text" class="form-control" name="username" required>
          </div>
          <div class="mb-4">
            <label class="form-label">Password</label>
            <input type="password" class="form-control" name="password" required>
          </div>
          <button class="btn btn-primary w-100">Login</button>
        </form>
        <div class="mt-4 small text-secondary">
          Demo: superadmin / admin / pimpinan
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}