<?php
// Rename modal
?>
<div class="modal fade" id="renameModal" tabindex="-1">
  <div class="modal-dialog">
    <form class="modal-content" action="rename.php" method="post">
      <div class="modal-header">
        <h5 class="modal-title">Rename Item</h5>
      </div>

      <div class="modal-body">
        <input type="hidden" name="path" value="<?= htmlspecialchars($path) ?>">
        <input type="hidden" id="renameOld" name="old">

        <label class="form-label">New Name</label>
        <input type="text" id="renameNew" name="new" class="form-control" required>
      </div>

      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary">Rename</button>
      </div>
    </form>
  </div>
</div>

<script>
// Populate modal fields when opened
document.addEventListener("DOMContentLoaded", () => {
    const modal = document.getElementById("renameModal");
    modal.addEventListener("show.bs.modal", event => {
        const button = event.relatedTarget;
        const item = button.getAttribute("data-item");

        document.getElementById("renameOld").value = item;
        document.getElementById("renameNew").value = item;
    });
});
</script>
