{% extends 'base.html.twig' %}
{#
{% block title %}Hello PageController!{% endblock %}

{% block body %}
{% if step == 'login' %}
<div class="container text-center mt-5 pt-5">
  <div class="row">
    <div class="col">
      <h1 class="display-3 mb-5">CheckTatoo Academy<sup>&reg;</sup></h1>
      <form class="form-signin p-4 bg-light" method="post">
        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
        <br>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required="">
        <div class="checkbox mb-3">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>
      <p><a href="#">Back to homepage</a></p>
    </div>
  </div>
</div>
{% endif %}

{% if step == 'process' %}
<main id="stepin" role="main" class="container text-center mt-5 pt-5">

  <div class="starter-template">
    <h1 class="">CheckTatoo Academy authentication</h1>
    <h2 class="">powered by</h2>
    <h1>Kyvala Token<sup>&reg;</sup><span style="margin-left:-14px ;"> </span></h1>
    <h2 class="text-primary display-4">Confirm your identity</h2>
    <p class="lead">Complete biometric authentication on your phone</p>
    <h1><span class="lead">Ref:</span> {{ref}}</h1>
    <p class="lead text-primary"><span class="" style="font-size: 50px; border: 2px solid #007bff; padding-left: 10px; padding-right: 10px;"><span id="timer">10:00</span>s</span> left to complete your authentication</p>
  </div>

</main>

<main id="stepoff" style="display:none ;" role="main" class="container text-center mt-5 pt-5">

  <div class="starter-template mt-5 pt-5">
    <h1 class="">CheckTatoo Academy authentication</h1>
    <h2 class="">powered by</h2>
    <h1>Kyvala Token<sup>&reg;</sup><span style="margin-left:-14px ;"> </span></h1>
     <h3 class="text-danger">We can't proceed your request <br> because your validation was not done within the time limit</h3>
    {# <h3 class="text-danger">We can't proceed your request <br> because your validation has been reported as fraudulent</h3> #}
    <p><a href="{{path('app_homepage')}}" class="btn btn-primary">Go to homepage</a> <a href="{{path('app_homepage')}}" class="btn btn-danger">Try again</a></p>
  </div>

</main>

<main id="faild" style="display:none ;" role="main" class="container text-center mt-5 pt-5">

  <div class="starter-template mt-5 pt-5">
    <h1 class="">CheckTatoo Academy authentication</h1>
    <h2 class="">powered by</h2>
    <h1>Kyvala Token<sup>&reg;</sup><span style="margin-left:-14px ;"> </span></h1>
     {# <h3 class="text-danger">We can't proceed your request <br> because your validation was not done within the time limit</h3> #}
    <h3 class="text-danger">We can't proceed your request <br> because your validation has been reported as fraudulent</h3>
    <p> <a href="#" class="btn btn-danger">Contact Support</a></p>
  </div>

</main>

<main id="success" style="display:none ;" role="main" class="container text-center mt-5 pt-5">

  <div class="starter-template">
    <h1>Welcome Mr Michel DJIKER</h1>
    <p class="h3 text-success">Confirmation completed, you will be redirected in a moment...</p>
    <p><img width="120px" src="{{asset('img/loader.gif')}}" alt=""></p>
    <p class="lead">CheckTatoo Academy authentication</p>
    <p class="lead">Kyvala Token<sup>&reg;</sup><span style="margin-left:-14px ;"> </span><sup>&reg;</sup></p>

  </div>

</main>


<script> let faild = {{ stop  }}</script>
<script> let url = "{{path('app_login_check', {'id': auth.id})}}" </script>
<script src="{{asset('js/timer.js')}}"></script>
{% endif %}

{#
<main role="main" class="container">

  <div class="starter-template">
    <h1>Welcome Mr Michel DJIKER</h1>
    <p class="h3 text-success">Confirmation completed, you will be redirected in a moment...</p>
    <p><img width="120px" src="{{asset('img/loader.gif')}}" alt=""></p>
    <p class="lead">CheckTatoo Academy authentication</p>
    <p class="lead">Kyvala Token<sup>&reg;</sup><span style="margin-left:-14px ;"> </span><sup>&reg;</sup></p>

  </div>

</main>
{#
<main role="main" class="container">

  <div class="starter-template">
    <h1 class="">CheckTatoo Academy authentication</h1>
    <h2 class="">powered by</h2>
    <h1>Kyvala Token<sup>&reg;</sup><span style="margin-left:-14px ;"> </span></h1>
     <h3 class="text-danger">We can't proceeed your request <br> because your validation was not done within the time limit</h3>
    <h3 class="text-danger">We can't proceed your request <br> because your validation has been reported as fraudulent</h3>
    <p><a href="#" class="btn btn-primary">Go to homepage</a> <a href="#" class="btn btn-danger">Try again</a></p>
  </div>

</main>
#}


{% endblock %}