{% extends 'Base.html.twig' %}

{% block content %}
<div class="flashMessages">
   {% for flashMessage in flashMessages %}
      {% include 'Flashmessage.html.twig' with {'title':flashMessage.title,'message':flashMessage.message,'alertclass':flashMessage.alertclass} %}
   {% endfor %}
</div>
<div id="step3" class="step">
   <div class="box1 border border-3 rounded-3 px-4 py-3 mt-5 mx-auto text-center">
      <i class="bi text-success bi-check-circle-fill"></i>
      <h3 class="text-center fw-bold mt-2 mb-2">{{'step3.h3.1'|trans}}</h3>
   </div>
   <div class="box2 border border-3 rounded-3 px-4 py-2 mt-2 mx-auto">
      <h5 class="fw-bold my-3 d-flex align-items-center"><i class="me-3 bi fs-1 bi-calendar2-check text-primary"></i> {{'step3.h5.2'|trans}}</h5>
      <p>{{'step3.p.2'|trans({'var1':email})|raw}}</p>
      <p>{{'step3.p.3'|trans}}</p>
   </div>
   <div class="box3 border border-3 rounded-3 px-4 py-2 mt-0 mx-auto">
      <h5 class="fw-bold my-3 d-flex align-items-center"><i class="me-3 bi fs-1 bi-eye-fill text-primary"></i> {{'step3.h5.1'|trans}}</h5>
      {% if maxId > 0 %}
         <p>{{'step3.p.1'|trans({'link1': WP_HOME ~'/wp-admin/admin.php?page=appointment-preview&preview_bookingtimepageurl=' ~ maxId})|raw}}</p>
      {% else %}
         <p>{{'step3.p.1'|trans({'link1':WP_HOME ~'/wp-admin/admin.php?page=appointment-list'})|raw}}</p>
      {% endif %}

   </div>
</div>
{% endblock content %}