{% macro modalDelete(bookingtimepageurl,WP_HOME,nonce) %}
<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold d-flex align-items-center" id="deleteModalLabel">
         <svg class="me-2" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 19.5H16.5V22.5H13.5V19.5ZM13.5 7.5H16.5V16.5H13.5V7.5ZM14.985 0C6.705 0 0 6.72 0 15C0 23.28 6.705 30 14.985 30C23.28 30 30 23.28 30 15C30 6.72 23.28 0 14.985 0ZM15 27C8.37 27 3 21.63 3 15C3 8.37 8.37 3 15 3C21.63 3 27 8.37 27 15C27 21.63 21.63 27 15 27Z" fill="#D22832"/></svg>
         {{'modal.delete.header'|trans}}
         </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {{'modal.delete.body'|trans}}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light border" data-bs-dismiss="modal">{{'modal.delete.cancel'|trans}}</button>
        <a class="btn btn-danger rounded-2" href="{{WP_HOME}}/wp-admin/admin.php?page=appointment-edit&_wpnonce={{nonce}}&delete_bookingtimepageurl={{bookingtimepageurl.id}}"><i class="bi bi-trash3-fill"></i> {{'link.delete'|trans}}</a>
      </div>
    </div>
  </div>
</div>
{% endmacro %}


{% macro modalUnsavedForm(action,WP_HOME) %}
{% if action =='' %}
{% set action = 'list' %}
{% endif %}
<!-- Modal -->
<div class="modal fade" id="unsavedFormModal" tabindex="-1" aria-labelledby="unsavedFormModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold d-flex align-items-center" id="unsavedFormModalLabel">
          <svg class="me-2" width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 6.735L28.295 26.25H5.705L17 6.735ZM17 0.75L0.5 29.25H33.5L17 0.75Z" fill="#FAAA0A"/><path d="M18.5 21.75H15.5V24.75H18.5V21.75Z" fill="#FAAA0A"/><path d="M18.5 12.75H15.5V20.25H18.5V12.75Z" fill="#FAAA0A"/></svg>
          {{'modal.unsavedForm.header'|trans}}
         </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {{'modal.unsavedForm.body'|trans}}
      </div>
      <div class="modal-footer">
         <div class="d-flex justify-content-end">
            <a href="{{WP_HOME}}/wp-admin/admin.php?page=appointment-{{action}}" class="btn btn-secondary rounded-2 me-3">
               <i class="bi bi-x-lg"></i>
               {{'link.discard'|trans}}
            </a>
            <button id="submit_edit" class="btn btn-success rounded-2" type="submit" name="" value="">
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.1667 0.5H2.16667C1.24167 0.5 0.5 1.25 0.5 2.16667V13.8333C0.5 14.75 1.24167 15.5 2.16667 15.5H13.8333C14.75 15.5 15.5 14.75 15.5 13.8333V3.83333L12.1667 0.5ZM8 13.8333C6.61667 13.8333 5.5 12.7167 5.5 11.3333C5.5 9.95 6.61667 8.83333 8 8.83333C9.38333 8.83333 10.5 9.95 10.5 11.3333C10.5 12.7167 9.38333 13.8333 8 13.8333ZM10.5 5.5H2.16667V2.16667H10.5V5.5Z" fill="#ffffff" fill-opacity="0.92"/></svg>
               {{'modal.unsavedForm.submit'|trans}}
            </button>
         </div>
      </div>
    </div>
  </div>
</div>
{% endmacro %}