{% import 'Macro.html.twig' as macro %}
{% 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="edit">
   <div class="d-flex align-items-center m-3">
      <a class="backButton btn btn-light rounded-2 me-2" href="{{WP_HOME}}/wp-admin/admin.php?page=appointment-list"><i class="bi bi-arrow-left-short"></i> {{'link.back'|trans}}</a>
      <h4 class="m-0 fw-bold">{{'edit.header'|trans}}</h4>
      <button type="button" class="btn btn-danger rounded-2 ms-auto" data-bs-toggle="modal" data-bs-target="#deleteModal">
      <i class="bi bi-trash3-fill"></i> {{'link.delete'|trans}}
      </button>
   </div>
   <form name="edit" class="form form_edit m-3" id="form_edit" action="{{WP_HOME}}/wp-admin/admin.php?page=appointment-edit" method="post">
      <fieldset class="fieldset1 border border-3 rounded-3 p-3 mt-3" id="edit_fieldset1">
         <div class="hidden">
            <input type="hidden" name="appointment[id]" value="{{bookingtimepageurl.id}}" />
         </div>
         <div class="mb-3">
            <label for="title" class="form-label col-12">{{'add_edit.form.title.label'|trans}}</label>
            <input placeholder="{{'add_edit.form.title.placeholder'|trans}}" class="rounded-2 p-2 w-100" id="title" type="text" name="appointment[title]" value="{{bookingtimepageurl.title}}" />
            <label for="title" class="form-label col-12 text-muted">{{'add_edit.form.title.label.bottom'|trans}}</label>
         </div>
         <div class="mb-3">
            <label for="url" class="form-label col-12">{{'add_edit.form.url.label'|trans}}</label>
            <input placeholder="{{'add_edit.form.url.placeholder'|trans}}" class="rounded-2 p-2 w-100" id="url" type="url" name="appointment[url]" required="required" value="{{bookingtimepageurl.url}}" />
            <label for="url" class="form-label col-12 text-muted">{{'add_edit.form.url.label.bottom'|trans}}</label>
         </div>
         <div class="hidden_fields">
            {{nonceField|raw}}
         </div>
      </fieldset>
      <fieldset class="fieldset2 border border-3 rounded-3 p-3 mt-0 mx-auto" id="edit_fieldset2">
         <div class="d-flex justify-content-end">
            <a href="{{WP_HOME}}/wp-admin/admin.php?page=appointment-list" class="btn btn-secondary rounded-2 me-3">
               <i class="bi bi-x-lg"></i>
               {{'link.discard'|trans}}
            </a>
            <button 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>
               {{'add_edit.form.button.submit'|trans}}
            </button>
         </div>
      </fieldset>
   {{ macro.modalDelete(bookingtimepageurl,WP_HOME,nonce) }}
   {{ macro.modalUnsavedForm('list',WP_HOME) }}
   </form>
</div>

{% include 'Appointment/Documentation.html.twig' %}
{% endblock content %}