{% extends "base.html" %}

{% block title %}{{ t("login.title") }} - ECMind blue Studio{% endblock %}

{% block content %}
<main class="login-page d-flex align-items-center justify-content-center">
  <div class="card login-card shadow-sm">
    <div class="card-body p-4">
      <div class="text-center mb-4">
        <i class="ph ph-stack login-logo" aria-hidden="true"></i>
        <h1 class="h4 mt-2 mb-0">ECMind blue Studio</h1>
      </div>
      <div id="login-error"></div>
      <form hx-post="/auth/login" hx-target="#login-error" hx-swap="innerHTML">
        <div class="mb-3">
          <label class="form-label" for="username">{{ t("login.username") }}</label>
          <input class="form-control" id="username" name="username" autocomplete="username" required autofocus>
        </div>
        <div class="mb-3">
          <label class="form-label" for="password">{{ t("login.password") }}</label>
          <input type="password" class="form-control" id="password" name="password" autocomplete="current-password" required>
        </div>
        <div class="form-check mb-3">
          <input class="form-check-input" type="checkbox" id="keep" name="keep" value="true">
          <label class="form-check-label" for="keep">{{ t("login.keep") }}</label>
        </div>
        <button type="submit" class="btn btn-primary w-100">{{ t("login.submit") }}</button>
      </form>
    </div>
  </div>
</main>
{% endblock %}