{% extends '@PrestaShop/Admin/layout.html.twig' %}

{% block content %}
<div id="{{MODULE_NAME}}_login">
<section class="animation">
  <div class="container container-login py-5 h-100">
    <div class="row d-flex justify-content-center align-items-center h-100">
      <div class="col-12 col-md-8 col-lg-6 col-xl-5">
        <div class="card bg-dark text-white" style="border-radius: 1rem;">
          <div class="card-body p-5 text-center">

            <div class="">            
              <h2 class="fw-bold mb-2 text-uppercase text-white">
                  {{MODULE_NAME}}
              </h2>
              <p class="login-hint">
                Ce module vous sert à synchroniser votre site prestashop avec votre backoffice {{BACKOFFICE_NAME}}.
              </p>
              <p class="error-msg">
                {{ INITIAL_ERROR }} 
              </p>

              <div data-mdb-input-init class="form-outline form-white mb-4 address">
                <label class="form-label" for="typeAdress">
                  {{ ADDRESS_LABEL }}                  
                </label>
                <input type="text" id="address" class="form-control form-control-lg" value="{{ PREVIOUS_ADDRESS }}"/>
              </div>

              <div data-mdb-input-init class="form-outline form-white mb-4 fingerprint">
                <label class="form-label" for="typeFingerprint">fingerprint</label>
                <input type="text" id="fingerprint" class="form-control form-control-lg" />
              </div>

            <div class="user-mdp">

               <div data-mdb-input-init class="form-outline form-white mb-4 user">
                <label class="form-label" for="typeUser">utilisateur </label>
                <input type="text" id="user" class="form-control form-control-lg" />
              </div>
              <div data-mdb-input-init class="form-outline form-white mb-4 password">
                <label class="form-label" for="typePassword">mot de passe</label>
                <input type="password" id="password" class="form-control form-control-lg" />
              </div>                                    

            </div>

            <div class="pincode">

              <div data-mdb-input-init class="form-outline form-white mb-4 password">
                <label class="form-label" for="typePincode">Code PIN</label>
                <input type="text" id="pincode" class="form-control form-control-lg" />
              </div>                                    
              
            </div>
            <button class="btn btn-outline-light btn-lg px-5 mt-4" id="btn-verify">Suivant</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</div>

<!--
             <div class='success-checkmark'>
                        <div class='check-icon'>
                          <span class='icon-line line-tip'></span>
                          <span class='icon-line line-long'></span>
                          <div class='icon-circle'></div>
                          <div class='icon-fix'></div>
                        </div>
                      </div>
            </div>
            --> 

{% endblock %}