dcovington
/
KCI-PHP-KANBAN


			
				
					
						
						
							
							<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title><?= e($board->name) ?> &mdash; Kanban</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,600&display=swap" rel="stylesheet" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="/css/site.css" rel="stylesheet" />
  <link href="/css/kanban.css" rel="stylesheet" />
</head>
<body class="kanban-page">

<!-- Top bar -->
<nav class="navbar navbar-dark rk-topnav px-3 py-2">
  <div class="d-flex align-items-center gap-3 flex-grow-1 board-header-main">
    <a href="/boards" class="btn btn-sm btn-outline-secondary text-white border-secondary">
      <i class="bi bi-arrow-left"></i>
    </a>
    <span class="navbar-brand mb-0 h5 kanban-board-title"><?= e($board->name) ?></span>
  </div>
  <div class="board-header-search">
    <label for="job-search-input" class="visually-hidden">Search jobs</label>
    <div class="input-group input-group-sm">
      <span class="input-group-text"><i class="bi bi-search"></i></span>
      <input type="search" id="job-search-input" class="form-control"
             placeholder="Search job #, name, customer..." autocomplete="off" />
    </div>
  </div>
  <div class="d-flex align-items-center gap-2 board-header-actions">
    <button class="btn btn-sm btn-outline-light" id="btn-add-card"
            data-board-id="<?= e((string) $board->id) ?>">
      <i class="bi bi-plus-lg me-1"></i>Add Card
    </button>
    <button class="btn btn-sm btn-outline-light" id="btn-settings" title="Board Settings">
      <i class="bi bi-gear"></i>
    </button>
    <a href="/auth/logout" class="btn btn-sm btn-outline-light" title="Sign Out">
      <i class="bi bi-box-arrow-right"></i>
    </a>
  </div>
</nav>

<!-- Kanban grid -->
<div class="kanban-wrapper">
  <div class="kanban-grid" id="kanban-grid">

    <div class="kanban-corner"></div>

    <?php foreach ($columns as $col): ?>
    <div class="kanban-col-header" data-col-id="<?= e((string) $col->id) ?>">
      <span class="col-label"><?= e($col->name) ?></span>
    </div>
    <?php endforeach; ?>

    <?php foreach ($lanes as $lane): ?>
    <div class="kanban-lane-header" data-lane-id="<?= e((string) $lane->id) ?>">
      <button type="button" class="lane-toggle"
              title="Collapse or expand swim lane"
              aria-label="Collapse or expand swim lane"
              aria-expanded="true">
        <i class="bi bi-chevron-down" aria-hidden="true"></i>
      </button>
      <span class="lane-label"><?= e($lane->name) ?></span>
    </div>
    <?php foreach ($columns as $col): ?>
    <div class="kanban-cell"
         data-col-id="<?= e((string) $col->id) ?>"
         data-lane-id="<?= e((string) $lane->id) ?>">
    </div>
    <?php endforeach; ?>
    <?php endforeach; ?>

  </div>
</div>

<?php require __DIR__ . '/../partials/card-modal.php'; ?>
<?php require __DIR__ . '/../partials/settings-panel.php'; ?>

<script>
var KANBAN = {
  boardId:   <?= (int) $board->id ?>,
  boardSlug: "<?= e($board->slug) ?>",
  cards: <?= $cardsJson ?>
};
var KANBAN_COLS  = <?= json_encode(array_map(fn($c) => ['id' => $c->id, 'name' => $c->name, 'position' => $c->position], $columns)) ?>;
var KANBAN_LANES = <?= json_encode(array_map(fn($l) => ['id' => $l->id, 'name' => $l->name, 'position' => $l->position], $lanes)) ?>;
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script src="/js/kanban-modal.js"></script>
<script src="/js/kanban-settings.js"></script>
<script src="/js/kanban-board.js"></script>
</body>
</html>