{% extends "base.html" %}
{% block title %}{{ t(request, 'page.login') }} — MoE Admin{% endblock %}

{% block content %}
<div class="row justify-content-center mt-5">
  <div class="col-sm-10 col-md-6 col-lg-4">
    <div class="card">
      <div class="card-header bg-dark text-white text-center py-3">
        <i class="bi bi-diagram-3-fill me-2" style="color:#6ea8fe;font-size:1.4rem"></i>
        <span class="fs-5 fw-bold">MoE Admin</span>
      </div>
      <div class="card-body p-4">
        <h6 class="text-muted text-center mb-4">Sovereign MoE Orchestrator</h6>

        {% if error %}
        <div class="alert alert-danger py-2 small" role="alert">
          <i class="bi bi-exclamation-triangle-fill me-1"></i>{{ error }}
        </div>
        {% endif %}

        {% if oidc_enabled %}
        <a href="/auth/login" class="btn btn-outline-primary w-100 mb-3 d-flex align-items-center justify-content-center gap-2">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
          {{ t(request, 'portal.sso_login') }}
        </a>
        <div class="d-flex align-items-center my-3">
          <hr class="flex-grow-1"><span class="px-2 text-muted small">{{ t(request, 'lbl.or') }}</span><hr class="flex-grow-1">
        </div>
        {% endif %}

        <form method="POST" action="/login">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <div class="mb-3">
            <label class="form-label" for="username">
              <i class="bi bi-person me-1"></i>{{ t(request, 'lbl.username') }}
            </label>
            <input type="text" id="username" name="username" class="form-control"
                   placeholder="admin" autocomplete="username" {% if not oidc_enabled %}autofocus{% endif %} required>
          </div>
          <div class="mb-4">
            <label class="form-label" for="password">
              <i class="bi bi-lock me-1"></i>{{ t(request, 'lbl.password') }}
            </label>
            <input type="password" id="password" name="password" class="form-control"
                   placeholder="••••••••" autocomplete="current-password" required>
          </div>
          <button type="submit" class="btn {% if oidc_enabled %}btn-secondary{% else %}btn-primary{% endif %} w-100">
            <i class="bi bi-box-arrow-in-right me-1"></i>{{ t(request, 'page.login') }}
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}