{% extends "layout.html" %}

{% block title %}Вход — Toolbox{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ getUrl('static', path='css/login.css') }}">
<meta name="userAuth-endpoint" content="{{ getUrl('Authentication') }}">
{% endblock %}

{% block body %}
<main class="login-page d-flex justify-content-center align-items-center">
  <div class="login-card">
    <header class="login-header">
      <img src="{{ getUrl('static', path='favicon.ico') }}" alt="Toolbox" class="brand-icon">
      <h1>Toolbox — Вход</h1>
    </header>

    <form id="loginForm" class="login-form" autocomplete="on">
      <div class="form-group">
        <label for="loginInput">Логин</label>
        <input id="loginInput" name="login" type="text" class="form-control" required autofocus>
      </div>

      <div class="form-group">
        <label for="passwordInput">Пароль</label>
        <input id="passwordInput" name="password" type="password" class="form-control" required>
      </div>

      <div id="formError" class="form-error" aria-live="polite" hidden></div>

      <div class="form-actions">
        <button id="submitBtn" class="btn btn-primary w-100" type="submit">Войти</button>
      </div>
    </form>

    <footer class="login-footer">
      <small>Онлайн-сервис учета инструментов</small>
    </footer>
  </div>
</main>
{% endblock %}

{% block scripts %}
<!-- Подключаем только модули, разделённые по задачам -->

<script type="module" src="{{ getUrl('static', path='js/cookies.js') }}"></script>
<script type="module" src="{{ getUrl('static', path='js/api.js') }}"></script>
<script type="module" src="{{ getUrl('static', path='js/auth.js') }}"></script>
{% endblock %}