{% load static %}
{% load i18n %}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ GLOBAL_APPNAME|default:"Cavaliba" }} — Sign in</title>
  <link rel="stylesheet" href="{% static 'v2/bootstrap533.min.css' %}" crossorigin="anonymous">
  <link rel="stylesheet" href="{% static 'v2/font-awesome-4.7.0/css/font-awesome.min.css' %}">
</head>

<body class="min-vh-100 d-flex p-0">
  <div class="row g-0 w-100">

    <!-- Left panel: sign-in form -->
    <div class="col-md-6 d-flex flex-column justify-content-center align-items-center bg-white py-5">
      <div class="row justify-content-center w-100 px-3">
        <div class="col-12 col-sm-10 col-lg-9">

          <!-- Logo + title -->
          <div class="text-center mb-5">
            <img src="{% static 'logo.png' %}" alt="logo" width="48" height="48" class="mb-3">
            <h1 class="h4 fw-bold text-dark mb-1">{{ GLOBAL_APPNAME|default:"Cavaliba" }}</h1>
            <p class="text-muted small">{% translate "Sign in to your account" %}</p>
          </div>

          <!-- Error messages -->
          {% if form.errors %}
            <div class="alert alert-danger py-2 px-3 small mb-4">
              {% translate "Invalid username or password. Please try again." %}
            </div>
          {% endif %}

          {% if next and user.is_authenticated %}
            <div class="alert alert-warning py-2 px-3 small mb-4">
              {% translate "Your account doesn't have access to this page." %}
            </div>
          {% endif %}

          <!-- Form -->
          <form method="post" action="{% url 'login' %}">
            {% csrf_token %}
            <input type="hidden" name="next" value="{{ next }}">

            <div class="mb-3">
              <label for="id_username" class="form-label fw-medium">{% translate "Login" %}</label>
              <input
                type="text"
                name="username"
                id="id_username"
                autofocus
                autocapitalize="none"
                autocomplete="username"
                maxlength="150"
                required
                class="form-control"
              >
            </div>

            <div class="mb-4">
              <label for="id_password" class="form-label fw-medium">{% translate "Password" %}</label>
              <input
                type="password"
                name="password"
                id="id_password"
                autocomplete="current-password"
                required
                class="form-control"
              >
            </div>

            <button type="submit" class="btn btn-primary w-100 py-2 fw-semibold">
              {% translate "Sign in" %}
            </button>

          </form>

          <p class="text-center text-muted small mt-5">&copy; cavaliba.com</p>

        </div>
      </div>
    </div>

    <!-- Right panel: photo -->
    <div class="col-md-6 d-none d-md-block position-relative">
      <img
        src="{% static 'queyras2.jpg' %}"
        alt="Queyras"
        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
      >
      <div class="position-absolute top-0 start-0 w-100 h-100 bg-primary bg-opacity-25"></div>
    </div>

  </div>

  <script src="{% static 'v2/jquery.371.min.js' %}" crossorigin="anonymous"></script>
  <script src="{% static 'v2/bootstrap533.bundle.min.js' %}" crossorigin="anonymous"></script>

</body>
</html>
