{% extends "base.html" %}

{% block title %}Přihlášení — MedCover{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-12 col-sm-8 col-md-5 col-lg-4">
    <div class="card shadow-sm mt-4">
      <div class="card-body p-4">
        <div class="text-center mb-3">
          <img src="{{ url_for('static', filename='img/logo.webp') }}"
               alt="MedCover logo" class="img-fluid logo-max-h">
        </div>
        <h4 class="card-title mb-4 text-center">Přihlášení</h4>
        <form method="POST" action="{{ url_for('auth.login') }}" novalidate>
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div class="mb-3">
            <label for="email" class="form-label">E-mail</label>
            <input type="email" class="form-control" id="email" name="email"
                   autocomplete="email" autofocus required>
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">Heslo</label>
            <input type="password" class="form-control" id="password" name="password"
                   autocomplete="current-password">
          </div>
          <div class="d-grid mt-4">
            <button type="submit" class="btn btn-danger">Přihlásit se</button>
          </div>
        </form>
        <div class="d-grid mt-2">
          <a href="{{ url_for('auth.forgot_password') }}" class="btn btn-outline-secondary btn-sm">
            Zapomněli jste heslo?
          </a>
        </div>
      </div>
    </div>

    {% if config.DEV_LOGIN_ENABLED %}
    <div class="card border-warning mt-3">
      <div class="card-header bg-warning text-black fw-bold">
        🛠️ Vývojářské rychlé přihlášení
      </div>
      <div class="card-body p-3">
        <p class="small text-muted mb-2">
          Viditelné pouze ve vývojovém prostředí. Nejdříve spusťte <code>scripts/seed_dev.py</code>.
        </p>
        <div class="d-grid gap-2">
          <form method="POST" action="{{ url_for('dev.login_as', role='admin') }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button class="btn btn-outline-dark btn-sm w-100 text-start">
              <strong>Admin</strong> — plný přístup k systému
            </button>
          </form>
          <form method="POST" action="{{ url_for('dev.login_as', role='coordinator') }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button class="btn btn-outline-primary btn-sm w-100 text-start">
              <strong>Koordinátor</strong> — správa nadřazených akcí a akcí
            </button>
          </form>
          <form method="POST" action="{{ url_for('dev.login_as', role='member') }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button class="btn btn-outline-success btn-sm w-100 text-start">
              <strong>Člen</strong> — přihlašování na akce, zpětné vazby
            </button>
          </form>
          <form method="POST" action="{{ url_for('dev.login_as', role='viewer') }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button class="btn btn-outline-secondary btn-sm w-100 text-start">
              <strong>Pozorovatel</strong> — pouze pro čtení
            </button>
          </form>
          <form method="POST" action="{{ url_for('dev.login_as', role='inactive') }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button class="btn btn-outline-warning btn-sm w-100 text-start">
              <strong>Neaktivní</strong> — čeká na aktivaci
            </button>
          </form>
        </div>
      </div>
    </div>
    {% endif %}

  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script nonce="{{ g.csp_nonce }}">
(function () {
  "use strict";
  var emailEl = document.getElementById("email");
  if (!emailEl) return;

  function validateEmail() {
    var val = emailEl.value.trim();
    if (!val) {
      emailEl.classList.remove("is-valid", "is-invalid");
      return;
    }
    if (emailEl.checkValidity()) {
      emailEl.classList.add("is-valid");
      emailEl.classList.remove("is-invalid");
    } else {
      emailEl.classList.add("is-invalid");
      emailEl.classList.remove("is-valid");
    }
  }

  emailEl.addEventListener("input", function () {
    // Only give live feedback once the field has already been validated
    // (i.e. after the user has tabbed away at least once).
    if (!emailEl.classList.contains("is-valid") && !emailEl.classList.contains("is-invalid")) return;
    validateEmail();
  });
  emailEl.addEventListener("blur", validateEmail);
})();
</script>
{% endblock extra_scripts %}