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>
          <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-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>

    <!-- Card age section -->
    <div class="mb-2">
      <strong class="small d-block mb-2">Card Age</strong>

      <div class="form-check form-switch mb-2">
        <input class="form-check-input" type="checkbox" role="switch" id="card-age-tooltip-toggle"
               <?= $board->showCardAge ? 'checked' : '' ?>>
        <label class="form-check-label small" for="card-age-tooltip-toggle">
          Show "time in column/lane" tooltip on cards
        </label>
      </div>

      <label for="card-age-warning-days" class="form-label small mb-1">
        Mark cards as overdue after this many days in a column/lane
      </label>
      <div class="input-group input-group-sm" style="max-width: 160px;">
        <input type="number" min="0" step="1" class="form-control" id="card-age-warning-days"
               value="<?= e((string) $board->cardAgeWarningDays) ?>" placeholder="0">
        <span class="input-group-text">days</span>
      </div>
      <div class="form-text">Set to 0 to disable.</div>
    </div>

  </div>
</div>