{% macro insertCreateDirectoryModal() %}
<!-- Modal -->
<div class="modal fade" id="createDirectoryModal" tabindex="-1" data-bs-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Create New Directory</h1>
      </div>
      <div class="modal-body">
        <form id="createDirectoryForm">
            <div class="flex-fill">
                <label class="form-label">Directory Name:</label>
                <input type="text" class="form-control" name="name" placeholder="New Directory">
            </div>
        </form>
      </div>
      <div class="modal-footer">
        <button id="buttonCancelCreateDirectory" class="btn btn-sm btn-outline-warning px-2" title="save directory" data-bs-toggle="modal" data-bs-target="#createDirectoryModal">
            <i class="ti ti-x me-2"></i>Cancel
        </button>
        <button id="buttonSaveCreateDirectory" class="btn btn-sm btn-outline-primary px-2" title="save directory">
            <i class="ti ti-device-floppy me-2"></i>Save
        </button>
      </div>
    </div>
  </div>
</div>
<script>
    $('#buttonSaveCreateDirectory').on('click', async () => {
        console.log("click");
        var Response = await fetch(window.location.pathname,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(
                Object.fromEntries(
                    new FormData(document.querySelector('#createDirectoryForm'))
                )
            ),
        }).then(() => {
            $('#createDirectoryModal').modal('hide');
        });

        console.log(Response);
    })
</script>
{% endmacro %}