<!doctype html>
<html lang="en" dir="ltr">
<head>
  <link href="https://tabler.github.io/tabler/assets/css/dashboard.css" rel="stylesheet">
</head>
<body>
  <div class="page">
    <div class="main-page">
      <div class="container">
        <div class="my-3 my-md-5">
          <div class="row row-cards">
            <div class="col col-login col-6 mx-auto">
              <form class="card" method="post">
                {% csrf_token %}

                <div class="card-body p-4">
                  {% if messages %}
                    <div class="text-center" role="alert">
                      {% for message in messages %}
                      <p {% if message.tags %}class="alert alert-{{ message.tags }}"{% endif %}>{{ message }}</p>
                      {% endfor %}
                    </div>
                    {% endif %}

                    <div class="form-group">
                      <label class="text-uppercase form-label">Se connecter</label>
                      <input type="email" name="email" class="form-control {% if form.errors %}state-invalid {% endif %}"
                             id="id_email" aria-describedby="emailHelp" placeholder="Votre email" required/>
                      {% for error in form.email.errors %}
                        <div class="alet alert-danger text-center">{{ error }}</div>
                      {% endfor %}
                    </div>
                    {% if OTP_enabled %}
                      <div class="form-group">
                        <label>{{ OTP_form.otp_token.label_tag }}</label>
                        {{ OTP_form.otp_token }}
                      </div>
                    {% endif %}
                    <div class="form-footer">
                      <button type="submit" class="btn btn-primary btn-block">Valider</button>
                    </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

