{% load static %}
{% load i18n %}
<!doctype html>

<html lang="en" data-bs-theme="auto">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<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' %}">


<title>{{ GLOBAL_APPNAME|default:"Cavaliba"}}</title>

<style>

    html,
    body {
      height: 100%;
    }

    .form-signin {
      max-width: 380px;
      padding: 1rem;
    }

    .form-signin .form-floating:focus-within {
      z-index: 2;
    }

    .form-signin input[type="email"] {
      margin-bottom: -1px;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

    .form-signin input[type="password"] {
      margin-bottom: 10px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }


      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }


      .btn-bd-primary {
        --bd-violet-bg: #712cf9;
        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #6528e0;
        --bs-btn-hover-border-color: #6528e0;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #5a23c8;
        --bs-btn-active-border-color: #5a23c8;
      }


    </style>
</head>

<body class="d-flex align-items-center py-4 bg-body-tertiary">
    
<main class="form-signin w-100 m-auto">


<form method="post" action="{% url 'login' %}">{% csrf_token %}

<div class="d-flex justify-content-center"><img class="mb-4" src="/logo/logo.png" alt="" width="48"></div>

<div class="d-flex h3 justify-content-center mb-5">
  {% translate 'Please sign-in to' %} {{ GLOBAL_APPNAME|default:"Cavaliba"}}
</div>


<table>
  <tr>
    <td><label for="id_username">{% translate 'Login' %} : </label></td>
    <td><input type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" required aria-invalid="true" id="id_username"></td>
  </tr>
  <tr>
    <td><label for="id_password">{% translate 'Password' %} : </label></td>
    <td><input type="password" name="password" autocomplete="current-password" required aria-invalid="true" id="id_password"></td>
  </tr>
</table>

<button class="btn btn-primary w-100 mt-3 py-2" type="submit" value="login">{% translate 'Sign-in' %}</button>

<input type="hidden" name="next" value="{{ next }}">

</form>

  {% if form.errors %}
    <p>Your username and password didn't match. Please try again.</p>
  {% endif %}

  {% if next %}
    {% if user.is_authenticated %}
      <p>Your account doesn't have access to this page. To proceed,
      please login with an account that has access.</p>
    {% endif %}
  {% endif %}


<br><br>
<hr>
<div class="d-flex justify-content-center">
<p class="mt-2 mb-3 text-body-secondary">&copy; cavaliba.com</p>
</div>


</main>

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


</body>
</html>
