{% 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="list">
   <div class="d-flex align-items-center m-3">
      <h4 class="m-0 fw-bold">{{'list.header'|trans}}</h4>
      <a class="add_action_link_top ms-auto fw-bold" href="{{WP_HOME}}/wp-admin/admin.php?page=appointment-add" ><i class="bi bi-plus-lg"></i> {{'list.add'|trans}}</a>
   </div>
{% if bookingtimepageurls %}
   <div class="box border border-3 rounded-3 m-3">
         {% for bookingtimepageurl in bookingtimepageurls %}
            <div class="border-bottom p-3 d-flex align-items-center justify-content-between">
               <div>
                  <strong>{{bookingtimepageurl.title}}</strong>
                  <br />
                  <small>{{bookingtimepageurl.url}}</small>
               </div>
               <div>
                  <div class="d-flex">
                     <a class="btn btn-secondary d-inline-flex align-items-center me-2" href="{{WP_HOME}}/wp-admin/admin.php?page=appointment-preview&_wpnonce={{nonce}}&preview_bookingtimepageurl={{bookingtimepageurl.id}}"><i class="bi bi-eye-fill me-2"></i> {{'list.actions.preview'|trans}}</a>
                     <a class="btn btn-primary d-inline-flex align-items-center" href="{{WP_HOME}}/wp-admin/admin.php?page=appointment-edit&edit_bookingtimepageurl={{bookingtimepageurl.id}}"><i class="bi bi-pencil-fill me-2"></i> {{'list.actions.edit'|trans}}</a>
                  </div>
               </div>
            </div>
         {% endfor %}
   </div>
{% else %}
   <div class="box border border-3 rounded-3 m-3 text-center p-3">
      <h4 class="m-3 fw-bold">{{'list.add_first.header'|trans}}</h4>
      <p class="m-3">{{'list.add_first.text'|trans}}</p>
      <a class="m-3 add_action_link ms-auto fw-bold btn btn-primary" href="{{WP_HOME}}/wp-admin/admin.php?page=appointment-add" ><i class="bi bi-plus-lg"></i> {{'list.add_first.button'|trans}}</a>
   </div>
{% endif %}
</div>
{% endblock content %}