KCI-PHP-KANBAN/app/Views/partials/settings-panel.php

<!-- Settings slide-out panel -->
<div id="settings-overlay" class="kanban-settings-overlay d-none"></div>

<div id="settings-panel" class="kanban-settings-panel">
  <div class="settings-header d-flex justify-content-between align-items-center p-3 border-bottom">
    <h6 class="mb-0">Board Settings</h6>
    <button class="btn btn-sm btn-outline-secondary" id="btn-close-settings">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>

  <div class="settings-body p-3">

    <!-- Columns section -->
    <div class="mb-4">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <strong class="small">Columns</strong>
        <button class="btn btn-sm btn-outline-primary" id="btn-add-column">
          <i class="bi bi-plus"></i> Add
        </button>
      </div>
      <div id="col-add-form" class="d-none mb-2">
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" id="col-add-input" placeholder="Column name" />
          <button class="btn btn-primary" id="btn-col-add-save">Add</button>
          <button class="btn btn-outline-secondary" id="btn-col-add-cancel">Cancel</button>
        </div>
      </div>
      <ul class="list-group settings-sortable" id="col-list">
        <?php foreach ($columns as $col): ?>
        <li class="list-group-item d-flex align-items-center gap-2 py-2"
            data-id="<?= e((string) $col->id) ?>">
          <i class="bi bi-grip-vertical text-muted drag-handle" style="cursor:grab;"></i>
          <span class="flex-grow-1 col-label-text"><?= e($col->name) ?></span>
          <button class="btn btn-sm btn-link p-0 text-secondary btn-edit-col" title="Rename">
            <i class="bi bi-pencil"></i>
          </button>
          <button class="btn btn-sm btn-link p-0 text-danger btn-delete-col" title="Delete">
            <i class="bi bi-trash"></i>
          </button>
        </li>
        <?php endforeach; ?>
      </ul>
    </div>

    <!-- Swim lanes section -->
    <div class="mb-2">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <strong class="small">Swim Lanes</strong>
        <button class="btn btn-sm btn-outline-primary" id="btn-add-lane">
          <i class="bi bi-plus"></i> Add
        </button>
      </div>
      <div id="lane-add-form" class="d-none mb-2">
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" id="lane-add-input" placeholder="Swim lane name" />
          <button class="btn btn-primary" id="btn-lane-add-save">Add</button>
          <button class="btn btn-outline-secondary" id="btn-lane-add-cancel">Cancel</button>
        </div>
      </div>
      <ul class="list-group settings-sortable" id="lane-list">
        <?php foreach ($lanes as $lane): ?>
        <li class="list-group-item d-flex align-items-center gap-2 py-2"
            data-id="<?= e((string) $lane->id) ?>">
          <i class="bi bi-grip-vertical text-muted drag-handle" style="cursor:grab;"></i>
          <span class="flex-grow-1 lane-label-text"><?= e($lane->name) ?></span>
          <button class="btn btn-sm btn-link p-0 text-secondary btn-edit-lane" title="Rename">
            <i class="bi bi-pencil"></i>
          </button>
          <button class="btn btn-sm btn-link p-0 text-danger btn-delete-lane" title="Delete">
            <i class="bi bi-trash"></i>
          </button>
        </li>
        <?php endforeach; ?>
      </ul>
    </div>

  </div>
</div>