dcovington
/
KCI-KANBAN


			
				
					
						
						
							
							<!doctype html>
<%
Response.Charset  = "utf-8"
Response.CodePage = 65001
%>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title><%= H(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 rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <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 href="/css/site.css?v=20260423b" rel="stylesheet" />
  <link href="/css/kanban.css?v=20260423b" 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"><%= H(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="<%= 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">

    <!-- Corner cell -->
    <div class="kanban-corner"></div>

    <!-- Column headers -->
    <% Dim vColIdx, vColItem
       For vColIdx = 0 To colCount - 1
         Set vColItem = colsArr(vColIdx) %>
    <div class="kanban-col-header" data-col-id="<%= vColItem.id %>">
      <span class="col-label"><%= H(vColItem.name) %></span>
    </div>
    <% Next %>

    <!-- Swim lane rows -->
    <% Dim vLaneIdx, vLaneItem
       For vLaneIdx = 0 To laneCount - 1
         Set vLaneItem = lanesArr(vLaneIdx) %>

    <!-- Lane header -->
    <div class="kanban-lane-header" data-lane-id="<%= vLaneItem.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"><%= H(vLaneItem.name) %></span>
    </div>

    <!-- Cells for this lane -->
    <% For vColIdx = 0 To colCount - 1
         Set vColItem = colsArr(vColIdx) %>
    <div class="kanban-cell"
         data-col-id="<%= vColItem.id %>"
         data-lane-id="<%= vLaneItem.id %>">
    </div>
    <% Next %>

    <% Next %>

  </div>
</div>

<!--#include file="../Cards/_modal.asp" -->
<!--#include file="./SettingsPanel.asp" -->

<script>
var KANBAN = {
  boardId:   <%= board.id %>,
  boardSlug: "<%= H(board.slug) %>",
  cards: <%= cardsJson %>
};
</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>