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 py-2"
            data-id="<?= e((string) $col->id) ?>">
          <div class="d-flex align-items-center gap-2">
            <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>
            <div class="form-check form-switch m-0" title="Show card count in column header">
              <input class="form-check-input col-count-toggle" type="checkbox" role="switch"
                     <?= $col->showCardCount ? 'checked' : '' ?>>
            </div>
            <button class="btn btn-sm btn-link p-0 text-secondary btn-toggle-col-age" title="Card age settings">
              <i class="bi bi-clock-history"></i>
            </button>
            <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>
          </div>
          <div class="col-age-settings d-none mt-2 ps-4">
            <div class="form-check form-switch mb-1">
              <input class="form-check-input col-age-toggle" type="checkbox" role="switch"
                     id="col-age-toggle-<?= e((string) $col->id) ?>"
                     <?= $col->showCardAge ? 'checked' : '' ?>>
              <label class="form-check-label small" for="col-age-toggle-<?= e((string) $col->id) ?>">
                Show "time in cell" tooltip &amp; mark overdue
              </label>
            </div>
            <div class="input-group input-group-sm" style="max-width: 140px;">
              <input type="number" min="0" step="1" class="form-control col-age-days"
                     value="<?= e((string) $col->cardAgeWarningDays) ?>" placeholder="0">
              <span class="input-group-text">days</span>
            </div>
            <div class="form-text">Overdue after this many days. 0 = no overdue marking.</div>
          </div>
        </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 py-2"
            data-id="<?= e((string) $lane->id) ?>">
          <div class="d-flex align-items-center gap-2">
            <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-toggle-lane-age" title="Card age settings">
              <i class="bi bi-clock-history"></i>
            </button>
            <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>
          </div>
          <div class="lane-age-settings d-none mt-2 ps-4">
            <div class="form-check form-switch mb-1">
              <input class="form-check-input lane-age-toggle" type="checkbox" role="switch"
                     id="lane-age-toggle-<?= e((string) $lane->id) ?>"
                     <?= $lane->showCardAge ? 'checked' : '' ?>>
              <label class="form-check-label small" for="lane-age-toggle-<?= e((string) $lane->id) ?>">
                Show "time in cell" tooltip &amp; mark overdue
              </label>
            </div>
            <div class="input-group input-group-sm" style="max-width: 140px;">
              <input type="number" min="0" step="1" class="form-control lane-age-days"
                     value="<?= e((string) $lane->cardAgeWarningDays) ?>" placeholder="0">
              <span class="input-group-text">days</span>
            </div>
            <div class="form-text">Overdue after this many days. 0 = no overdue marking.</div>
          </div>
        </li>
        <?php endforeach; ?>
      </ul>
    </div>

  </div>
</div>