diff --git a/app/views/layout.html b/app/views/layout.html
index 81f4e31..b905d17 100755
--- a/app/views/layout.html
+++ b/app/views/layout.html
@@ -51,6 +51,6 @@
 
 {% block bodyEnd %}
   {{ super() }}
-  <script type="module" src="/assets/javascript/application.js"></script>
+  {# <script type="module" src="/assets/javascript/application.js"></script> #}
   {% block pageScripts %}{% endblock %}
 {% endblock %}
diff --git a/app/views/z-sketching/calc-2.html b/app/views/z-sketching/calc-2.html
new file mode 100644
index 0000000..5700f4c
--- /dev/null
+++ b/app/views/z-sketching/calc-2.html
@@ -0,0 +1,492 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "" %}
+
+{% block beforeContent %}
+{% endblock %}
+
+{% block content %}
+<style>
+  .slots-grid { display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; }
+
+  .slot {
+    background-color: #fff;
+    border: 2px solid #212b32;
+    padding: 10px 12px;
+    cursor: pointer;
+    user-select: none;
+    min-height: 80px;
+  }
+  .slot:hover { background: var(--color-background-secondary); }
+  .slot.selected {
+    border: 2px solid #212b32;
+    outline: 4px solid #ffeb3b;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 2px #212b32;
+  }
+  .slot.is-hold { background: transparent; border-style: dashed; }
+  .slot.is-merged {}
+  .slot.is-merged.is-hold { border-style: dashed; }
+  .slot.is-merged.is-merged-start { border-radius: 4px 4px 0 0; }
+  .slot.is-merged.is-merged-mid { border-radius: 0; border-top: 1px solid #e0e0e0; }
+  .slot.is-merged.is-merged-end { border-radius: 0 0 4px 4px; border-top: 1px solid #e0e0e0; }
+  .slot-end { font-size: 14px; margin-top: 2px; }
+  .slot-tag { font-size: 11px; margin-top: 4px; font-weight: 500; }
+
+  .side-panel { display: none; }
+  .side-panel.visible { display: block; }
+  .panel-item { display: block; cursor: pointer; }
+  .panel-item.disabled { opacity: 0.38; cursor: default; pointer-events: none; }
+
+  #form-grid {
+    display: grid; grid-template-columns: repeat(2, 120px) auto; gap: 12px; align-items: start;
+  }
+  </style>
+
+  <h1 class="nhsuk-heading-l">Session setup</h1>
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-full">
+
+      <div id="form-grid">
+        <div class="nhsuk-form-group">
+          <label class="nhsuk-label" for="start-time">
+            Start time
+          </label>
+          <input class="nhsuk-input nhsuk-input--width-5" type="time" id="start-time" value="09:00">
+        </div>
+        <div class="nhsuk-form-group">
+          <label class="nhsuk-label" for="end-time">
+            End time
+          </label>
+          <input class="nhsuk-input nhsuk-input--width-5" type="time" id="end-time" value="17:00">
+        </div>
+        <div class="nhsuk-form-group">
+          <label class="nhsuk-label" for="slot-length">
+            Slot length, in minutes
+          </label>
+          <input class="nhsuk-input nhsuk-input--width-2" type="number" id="slot-length" value="8" min="1" max="720" step="1">
+        </div>
+      </div>
+      <div id="slot-len-error">Enter a whole number between 1 and 720</div>
+    </div>
+  </div>
+
+  <div class="nhsuk-grid-row nhsuk-card-group nhsuk-u-visually-hidden">
+    <div class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
+      <div class="nhsuk-card">
+        <div class="nhsuk-card__content">
+          <span class="nhsuk-u-font-size-36" id="hold-slots">0</span> held
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-three-quarters">
+      <p class="nhsuk-hint nhsuk-u-font-size-14 nhsuk-u-margin-bottom-2">Click to select · Shift+click for a range · ⌘/Ctrl+click for multiple</p>
+      <div id="slots-container"></div>
+    </div>
+    <div class="nhsuk-grid-column-one-quarter">
+      <div class="nhsuk-card">
+        <div class="nhsuk-card__content">
+          <span class="nhsuk-u-font-size-26" id="available-slots">0</span> available to book of <span id="total-slots">0</span>
+        </div>
+      </div>
+      <div class="side-panel" id="side-panel">
+        <h3 class="nhsuk-heading-s">With selected:</h3>
+        <ul class="nhsuk-list">
+          <li><a class="panel-item" id="panel-hold">Hold</a></li>
+          <li><a class="panel-item" id="panel-unhold">Remove hold</a></li>
+          <li><a class="panel-item" id="panel-merge">Merge</a></li>
+          <li><a class="panel-item" id="panel-unmerge">Unmerge</a></li>
+        </ul>
+        <hr>
+      </div>
+    </div>
+  </div>
+
+
+
+{% endblock %}
+
+{% block pageScripts %}
+  <script type="text/javascript">
+    // ========== STATE ==========
+    let slotData = [];
+    let selectedIndices = new Set();
+    let lastClickedIndex = null;
+
+    // ========== UTILITY FUNCTIONS ==========
+    function parseMinutes(t) {
+      if (!t) return null;
+      const [h, m] = t.split(':').map(Number);
+      return h * 60 + m;
+    }
+
+    function formatTime(m) {
+      const h = Math.floor(m / 60) % 24;
+      const mn = m % 60;
+      return `${String(h).padStart(2, '0')}:${String(mn).padStart(2, '0')}`;
+    }
+
+    function formatDuration(m) {
+      if (m < 60) return `${m}m`;
+      const h = Math.floor(m / 60);
+      const mn = m % 60;
+      return mn === 0 ? `${h}h` : `${h}h ${mn}m`;
+    }
+
+    function isConsecutive(indices) {
+      if (indices.length < 2) return false;
+      const sorted = [...indices].sort((a, b) => a - b);
+      for (let i = 1; i < sorted.length; i++) {
+        if (sorted[i] !== sorted[i - 1] + 1) return false;
+      }
+      return true;
+    }
+
+    function isSlotFree(i) {
+      const s = slotData[i];
+      return !s.merged && s.isMergedInto === undefined;
+    }
+
+    function resolveToMergeHead(i) {
+      return slotData[i].isMergedInto ?? i;
+    }
+
+    // ========== SLOT MANAGEMENT FUNCTIONS ==========
+    function unmergeAt(index) {
+      const slot = slotData[index];
+      const parentIndex = slot.isMergedInto ?? index;
+      const parent = slotData[parentIndex];
+
+      if (!parent.merged) return;
+
+      const span = parent.span;
+      const parentHold = parent.hold;
+
+      for (let j = parentIndex; j < parentIndex + span; j++) {
+        if (!slotData[j]) continue;
+
+        slotData[j].merged = false;
+        slotData[j].span = 1;
+        slotData[j].isMergedInto = undefined;
+        slotData[j].mergedEnd = null;
+        slotData[j].hold = parentHold;
+      }
+    }
+
+    function holdSlots(indices, hold) {
+      [...indices].forEach(i => {
+        if (slotData[i]) slotData[i].hold = hold;
+      });
+    }
+
+    function mergeSlots(indices) {
+      const sel = [...indices].sort((a, b) => a - b);
+
+      if (!isConsecutive(sel)) return;
+
+      const canMerge = sel.every(i => isSlotFree(i));
+      if (!canMerge) return;
+
+      const first = sel[0];
+      const last = sel[sel.length - 1];
+      const span = sel.length;
+      const mergeHold = sel.every(i => slotData[i].hold);
+
+      // reset (important when reusing slots)
+      for (let j = first; j <= last; j++) {
+        slotData[j].merged = false;
+        slotData[j].span = 1;
+        slotData[j].isMergedInto = undefined;
+        slotData[j].hold = false;
+      }
+
+      slotData[first].merged = true;
+      slotData[first].span = span;
+      slotData[first].mergedEnd = formatTime(slotData[last].end);
+      slotData[first].hold = mergeHold;
+
+      for (let j = first + 1; j <= last; j++) {
+        slotData[j].isMergedInto = first;
+      }
+    }
+
+    // ========== DATA FUNCTIONS ==========
+    function render() {
+      const startVal = document.getElementById('start-time').value;
+      const endVal = document.getElementById('end-time').value;
+      const slotInput = document.getElementById('slot-length');
+      const errorEl = document.getElementById('slot-len-error');
+      const container = document.getElementById('slots-container');
+      const rawVal = slotInput.value.trim();
+      const slotLen = parseInt(rawVal, 10);
+      const isValid = rawVal !== '' && Number.isInteger(slotLen) && slotLen >= 1 && slotLen <= 720 && String(slotLen) === rawVal;
+
+      if (!isValid) {
+        errorEl.style.display = 'block';
+        container.innerHTML = '';
+        setStats();
+        return;
+      }
+
+      errorEl.style.display = 'none';
+      const startMins = parseMinutes(startVal);
+      const endMins = parseMinutes(endVal);
+
+      if (!startVal || !endVal || endMins <= startMins) {
+        container.innerHTML = '<div>Set a valid start time before end time.</div>';
+        setStats();
+        return;
+      }
+
+      const totalMins = endMins - startMins;
+      const slotCount = Math.floor(totalMins / slotLen);
+
+      if (slotCount === 0) {
+        container.innerHTML = '<div>No complete slots fit in this window.</div>';
+        setStats();
+        return;
+      }
+
+      const prevData = [...slotData];
+      slotData = [];
+
+      for (let i = 0; i < slotCount; i++) {
+        const s = startMins + i * slotLen;
+        const e = s + slotLen;
+        const key = `${formatTime(s)}-${formatTime(e)}`;
+        const prev = prevData.find(d => d.key === key) || {};
+
+        slotData.push({
+          idx: i,
+          start: s,
+          end: e,
+          key,
+          hold: prev.hold || false,
+          merged: prev.merged || false,
+          span: prev.span || 1,
+          isMergedInto: prev.isMergedInto ?? undefined,
+          mergedEnd: prev.mergedEnd || null
+        });
+      }
+
+      selectedIndices = new Set([...selectedIndices].filter(i => i < slotCount));
+      renderGrid();
+      setStats(totalMins, slotLen);
+    }
+
+    function setStats(totalMins, slotLen) {
+      const heads = slotData.filter(s => s.isMergedInto === undefined);
+      const count = heads.length;
+      const holdC = heads.filter(s => s.hold).length;
+      const avail = count - holdC;
+      document.getElementById('total-slots').textContent = count || '—';
+      document.getElementById('available-slots').textContent = count ? avail : '—';
+      document.getElementById('hold-slots').textContent = holdC;
+    }
+
+    function commit() {
+      renderGrid();
+      const startMins = parseMinutes(document.getElementById('start-time').value);
+      const endMins = parseMinutes(document.getElementById('end-time').value);
+      const slotLen = parseInt(document.getElementById('slot-length').value, 10);
+      setStats(endMins - startMins, slotLen);
+    }
+
+    // ========== RENDERING FUNCTIONS ==========
+    function getAvailableGridColumns() {
+      const container = document.getElementById('slots-container');
+      const minColWidth = 80; // matches minmax(80px, 1fr)
+      const gap = 12;
+      const containerWidth = container.offsetWidth || window.innerWidth;
+      const cols = Math.max(1, Math.floor((containerWidth + gap) / (minColWidth + gap)));
+      return cols;
+    }
+
+    function renderGrid() {
+      const container = document.getElementById('slots-container');
+      const grid = document.createElement('div');
+      grid.className = 'slots-grid';
+      const maxCols = getAvailableGridColumns();
+
+      function placeDiv(div, row, col, span) {
+        div.style.gridColumn = `${col + 1} / span ${span}`;
+        div.style.gridRow = `${row}`;
+        grid.appendChild(div);
+      }
+
+      slotData.forEach((sd, i) => {
+        // skip children
+        if (sd.isMergedInto !== undefined) return;
+
+        const actualSpan = sd.span || 1;
+        const classes = ['slot'];
+        if (selectedIndices.has(i)) classes.push('selected');
+        if (sd.merged) {
+          classes.push('is-merged');
+          if (sd.hold) classes.push('is-hold');
+        } else if (sd.hold) {
+          classes.push('is-hold');
+        }
+
+        const startRow = Math.floor(i / maxCols) + 1;
+        let startCol = i % maxCols;
+
+        if (sd.merged && actualSpan > maxCols - startCol) {
+          // Multi-row merged group
+          let remaining = actualSpan;
+          let currentRow = startRow;
+          let currentCol = startCol;
+          let fragment = 0;
+
+          while (remaining > 0) {
+            const spanThisRow = Math.min(remaining, maxCols - currentCol);
+            const div = document.createElement('div');
+            const fragmentClasses = [...classes];
+            if (fragment === 0) fragmentClasses.push('is-merged-start');
+            else if (remaining - spanThisRow > 0) fragmentClasses.push('is-merged-mid');
+            else fragmentClasses.push('is-merged-end');
+            div.className = fragmentClasses.join(' ');
+            if (fragment === 0) {
+              const endTime = sd.mergedEnd;
+              const mergedLabel = sd.hold ? `Merged (${sd.span}) · Held` : `Merged (${sd.span})`;
+              div.innerHTML = `
+                <div class="slot-time">${formatTime(sd.start)}</div>
+                <div class="slot-end">to ${endTime}</div>
+                <div class="slot-tag">${mergedLabel}</div>
+              `;
+            }
+            div.addEventListener('click', e => handleSlotClick(e, i));
+            placeDiv(div, currentRow, currentCol, spanThisRow);
+
+            remaining -= spanThisRow;
+            currentRow += 1;
+            currentCol = 0;
+            fragment += 1;
+          }
+        } else {
+          const div = document.createElement('div');
+          div.className = classes.join(' ');
+          const span = Math.min(actualSpan, maxCols - startCol);
+          const endTime = sd.merged ? sd.mergedEnd : formatTime(sd.end);
+          div.innerHTML = `
+            <div class="slot-time">${formatTime(sd.start)}</div>
+            <div class="slot-end">to ${endTime}</div>
+          `;
+          if (sd.merged) {
+            const mergedLabel = sd.hold ? `Merged (${sd.span}) · Held` : `Merged (${sd.span})`;
+            div.innerHTML += `<div class="slot-tag">${mergedLabel}</div>`;
+          } else if (sd.hold) {
+            div.innerHTML += `<div class="slot-tag">Held</div>`;
+          }
+          div.addEventListener('click', e => handleSlotClick(e, i));
+          placeDiv(div, startRow, startCol, span);
+        }
+      });
+
+      container.innerHTML = '';
+      container.appendChild(grid);
+      updatePanel();
+    }
+
+    function updatePanel() {
+      const sel = [...selectedIndices].sort((a, b) => a - b);
+      const panel = document.getElementById('side-panel');
+
+      if (sel.length === 0) {
+        panel.classList.remove('visible');
+        return;
+      }
+
+      panel.classList.add('visible');
+
+      const canMerge = isConsecutive(sel) && sel.every(i => isSlotFree(i));
+      const hasMerged = sel.some(i => {
+        const s = slotData[i];
+        return s.merged || s.isMergedInto !== undefined;
+      });
+      const anyHold = sel.some(i => slotData[i]?.hold);
+      const allHold = sel.every(i => slotData[i]?.hold);
+
+      document.getElementById('panel-hold').classList.toggle('disabled', !sel.length || allHold);
+      document.getElementById('panel-unhold').classList.toggle('disabled', !sel.length || !anyHold);
+      document.getElementById('panel-merge').classList.toggle('disabled', !canMerge);
+      document.getElementById('panel-unmerge').classList.toggle('disabled', !hasMerged);
+    }
+
+    // ========== EVENT HANDLERS ==========
+    function handleSlotClick(e, i) {
+      if (e.shiftKey && lastClickedIndex !== null) {
+        const lo = Math.min(lastClickedIndex, i);
+        const hi = Math.max(lastClickedIndex, i);
+        for (let j = lo; j <= hi; j++) {
+          selectedIndices.add(resolveToMergeHead(j));
+        }
+      } else if (e.metaKey || e.ctrlKey) {
+        const head = resolveToMergeHead(i);
+        if (selectedIndices.has(head)) {
+          selectedIndices.delete(head);
+        } else {
+          selectedIndices.add(head);
+        }
+      } else {
+        const head = resolveToMergeHead(i);
+        if (selectedIndices.size === 1 && selectedIndices.has(head)) {
+          selectedIndices.clear();
+        } else {
+          selectedIndices.clear();
+          selectedIndices.add(head);
+        }
+      }
+
+      lastClickedIndex = i;
+      renderGrid();
+    }
+
+    // ========== EVENT ATTACHMENTS ==========
+    // Form inputs
+    document.getElementById('start-time').addEventListener('input', render);
+    document.getElementById('end-time').addEventListener('input', render);
+    document.getElementById('slot-length').addEventListener('input', render);
+
+    // Panel actions - Hold/Unhold
+    document.getElementById('panel-hold').addEventListener('click', () => {
+      holdSlots(selectedIndices, true);
+      selectedIndices.clear();
+      commit();
+    });
+
+    document.getElementById('panel-unhold').addEventListener('click', () => {
+      holdSlots(selectedIndices, false);
+      selectedIndices.clear();
+      commit();
+    });
+
+    // Panel actions - Merge/Unmerge
+    document.getElementById('panel-merge').addEventListener('click', () => {
+      mergeSlots(selectedIndices);
+      selectedIndices.clear();
+      commit();
+    });
+
+    document.getElementById('panel-unmerge').addEventListener('click', () => {
+      [...selectedIndices].forEach(i => unmergeAt(i));
+      selectedIndices.clear();
+      commit();
+    });
+
+    // Global keyboard events
+    document.addEventListener('keydown', e => {
+      if (e.key === 'Escape') {
+        selectedIndices.clear();
+        renderGrid();
+      }
+    });
+
+    // ========== INITIALIZATION ==========
+    render();
+  </script>
+{% endblock %}
diff --git a/app/views/z-sketching/calc.html b/app/views/z-sketching/calc.html
new file mode 100644
index 0000000..8c0d442
--- /dev/null
+++ b/app/views/z-sketching/calc.html
@@ -0,0 +1,176 @@
+<!-- Use this page as the index for your project -->
+
+<!-- ADDING CUSTOM CSS - Add your custom CSS or Sass in /app/assets/sass/main.scss -->
+
+<!-- Extends the layout from /app/views/layout.html -->
+{% extends 'layout.html' %}
+<!--
+  In /app/views/layout.html you can:
+    - change the header and footer
+    - add custom CSS and JavaScript
+-->
+
+<!--
+  Use this to set the page name which will appear at the
+  start of the <title> tag, followed by the service name.
+  This is often not needed on the homepage, where only the
+  service name is needed. You can also reuse this variable
+  within the <h1>, where they are the same.
+-->
+{% set pageName = "" %}
+
+<!-- For adding a breadcrumb or back link -->
+<!-- Code examples can be found at https://service-manual.nhs.uk/design-system/components/breadcrumbs and https://service-manual.nhs.uk/design-system/components/back-link -->
+{% block beforeContent %}
+{% endblock %}
+
+<!-- For adding page content -->
+<!-- Page layout code can be found at https://service-manual.nhs.uk/design-system/styles/layout -->
+{% block content %}
+  <style>
+  .slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; }
+  .slot { background: #fff; outline: 1px solid #aeb7bd; padding: 4px; }
+
+  #form-grid {
+    display: grid; grid-template-columns: repeat(2, 120px) auto; gap: 12px; align-items: start;
+  }
+  </style>
+
+  <h1 class="nhsuk-heading-l">Session setup</h1>
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-full">
+
+      <div id="form-grid">
+        <div class="nhsuk-form-group">
+          <label class="nhsuk-label" for="start-time">
+            Start time
+          </label>
+          <input class="nhsuk-input nhsuk-input--width-5" type="time" id="start-time" value="09:00">
+        </div>
+        <div class="nhsuk-form-group">
+          <label class="nhsuk-label" for="end-time">
+            End time
+          </label>
+          <input class="nhsuk-input nhsuk-input--width-5" type="time" id="end-time" value="17:00">
+        </div>
+        <div class="nhsuk-form-group">
+          <label class="nhsuk-label" for="slot-length">
+            Slot length, in minutes
+          </label>
+          <input class="nhsuk-input nhsuk-input--width-2" type="number" id="slot-length" value="6" min="1" max="720" step="1">
+        </div>
+      </div>
+      <div id="slot-len-error">Enter a whole number between 1 and 720</div>
+
+      <p>Session length: <span id="total-time">—</span>, containing <span id="slots-label">-</span></p>
+      <p>Slots available to auto-book: <span id="available-slots">0</span>, slots being held: <span id="hold-slots">0</span></p>
+    </div>
+  </div>
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-three-quarters">
+      <p class="nhsuk-body-s">Click to select, shift+click for a range, ⌘/Ctrl+click for multiple</p>
+      <div id="slots-container"></div>
+    </div>
+    <div class="nhsuk-grid-column-one-quarter">
+      <div class="side-panel" id="side-panel">
+        <div class="side-panel-title" id="panel-title">1 slot selected</div>
+        <button class="panel-item" id="panel-hold"><i class="ti ti-lock" aria-hidden="true"></i>Set to always hold</button>
+        <button class="panel-item" id="panel-unhold" style="display:none"><i class="ti ti-lock-open" aria-hidden="true"></i>Remove hold</button>
+        <div class="panel-sep"></div>
+        <button class="panel-item" id="panel-merge"><i class="ti ti-arrows-join" aria-hidden="true"></i>Merge slots</button>
+        <div class="panel-sep"></div>
+        <button class="panel-item" id="panel-attrs"><i class="ti ti-tag" aria-hidden="true"></i>Add special attributes</button>
+        <div class="panel-sep"></div>
+        <button class="panel-item danger" id="panel-deselect"><i class="ti ti-x" aria-hidden="true"></i>Deselect all</button>
+      </div>
+  </div>
+{% endblock %}
+
+{% block pageScripts %}
+  <script type="text/javascript">
+
+    function parseMinutes(timeStr) {
+      const [h, m] = timeStr.split(':').map(Number);
+      return h * 60 + m;
+    }
+
+    function formatTime(totalMins) {
+      const h = Math.floor(totalMins / 60) % 24;
+      const m = totalMins % 60;
+      return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+    }
+
+    function formatDuration(mins) {
+      if (mins < 60) return `${mins} minutes`;
+      const h = Math.floor(mins / 60);
+      const m = mins % 60;
+      return m === 0 ? `${h} hours` : `${h} hours ${m} minutes`;
+    }
+
+    function render() {
+      const startVal = document.getElementById('start-time').value;
+      const endVal = document.getElementById('end-time').value;
+      const slotInput = document.getElementById('slot-length');
+      const errorEl = document.getElementById('slot-len-error');
+      const container = document.getElementById('slots-container');
+
+      const rawVal = slotInput.value.trim();
+      const slotLen = parseInt(rawVal, 10);
+      const isValid = rawVal !== '' && Number.isInteger(slotLen) && slotLen >= 1 && slotLen <= 720 && String(slotLen) === rawVal;
+
+      if (!isValid) {
+        errorEl.style.display = 'block';
+        container.innerHTML = '';
+        document.getElementById('total-time').textContent = '—';
+        return;
+      }
+      errorEl.style.display = 'none';
+
+      const startMins = parseMinutes(startVal);
+      const endMins = parseMinutes(endVal);
+      const totalMins = endMins - startMins;
+
+      if (!startVal || !endVal || endMins <= startMins) {
+        container.innerHTML = '<div>Set a valid start time before end time.</div>';
+        document.getElementById('total-time').textContent = '—';
+        return;
+      }
+
+      const slotCount = Math.floor(totalMins / slotLen);
+
+      document.getElementById('total-time').textContent = formatDuration(totalMins);
+      document.getElementById('slots-label').textContent = `${slotCount} slot${slotCount !== 1 ? 's' : ''} of ${formatDuration(slotLen)} each`;
+
+      if (slotCount === 0) {
+        container.innerHTML = '<div>No complete slots fit. Try a shorter slot length.</div>';
+        return;
+      }
+
+      const grid = document.createElement('div');
+      grid.className = 'slots-grid';
+
+      for (let i = 0; i < slotCount; i++) {
+        const slotStart = startMins + i * slotLen;
+        const slotEnd = slotStart + slotLen;
+        const key = `${formatTime(slotStart)}-${formatTime(slotEnd)}`;
+
+        const div = document.createElement('div');
+        div.className = 'slot';
+        div.innerHTML = `${formatTime(slotStart)} <br><small class="nhsuk-u-secondary-text-colour">to ${formatTime(slotEnd)}</small>`;
+
+        grid.appendChild(div);
+      }
+
+      container.innerHTML = '';
+        container.appendChild(grid);
+      }
+
+    document.getElementById('start-time').addEventListener('input', render);
+    document.getElementById('end-time').addEventListener('input', render);
+    document.getElementById('slot-length').addEventListener('input', render);
+
+    render();
+  </script>
+{% endblock %}