<bmx-dock-layout>

<bmx-dock-layout id="ex-dl" style="--bmx-dock-layout-height: 34rem">
  <nav data-panel="orders" data-title="Orders" data-icon="📦" data-closable="false" style="padding: 8px; overflow: auto">
    <ul id="ex-dl-orders" style="list-style: none; margin: 0; padding: 0; display: grid; gap: 4px"></ul>
  </nav>
  <section data-panel="details" data-title="Order HP-1042" data-closable="false" style="padding: 16px; overflow: auto">
    <h3 id="ex-dl-heading" style="margin: 0 0 4px">HP-1042 - Fenwick Joinery</h3>
    <p id="ex-dl-summary" style="margin: 0 0 12px; color: var(--bmx-text-muted)">Oak shelving, 12 units - due Thursday</p>
    <dl style="display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0">
      <dt style="color: var(--bmx-text-muted)">Depot</dt><dd style="margin: 0">Leeds North</dd>
      <dt style="color: var(--bmx-text-muted)">Carrier</dt><dd style="margin: 0">Northline, van 7</dd>
      <dt style="color: var(--bmx-text-muted)">Window</dt><dd style="margin: 0">08:00 - 12:00</dd>
      <dt style="color: var(--bmx-text-muted)">Value</dt><dd style="margin: 0">£4,820.00</dd>
    </dl>
  </section>
  <div data-panel="notes" data-title="Notes" style="display: flex; padding: 8px">
    <label for="ex-dl-notes" style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%)">Notes on this order</label>
    <textarea id="ex-dl-notes" style="flex: 1; resize: none; font: inherit; padding: 8px; border: 1px solid var(--bmx-border); border-radius: 6px; background: var(--bmx-surface); color: var(--bmx-text)">Call the site manager on arrival - loading bay 2.</textarea>
  </div>
  <div data-panel="activity" data-title="Activity" style="padding: 8px 12px; overflow: auto">
    <ol id="ex-dl-activity" style="margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; color: var(--bmx-text-muted)"></ol>
  </div>
  <div data-panel="problems" data-title="Problems" data-badge="2" style="padding: 8px 12px; overflow: auto">
    <p style="margin: 0 0 6px">⚠️ HP-1039: the delivery window overlaps the depot's closing time.</p>
    <p style="margin: 0">⚠️ HP-1047: no carrier booked.</p>
  </div>
  <div data-panel="help" data-title="Shortcuts" data-icon="⌨️" style="padding: 8px 12px; overflow: auto; font-size: 0.8125rem">
    <p style="margin: 0 0 6px"><strong>Drag a tab</strong> into another group, onto a side of one, to an edge, or hold Shift to float it.</p>
    <p style="margin: 0 0 6px"><strong>Alt+Shift+M</strong> moves the panel from the keyboard; <strong>Alt+Shift+arrows</strong> send it to the next group.</p>
    <p style="margin: 0"><strong>F6</strong> goes to the next group; <strong>Shift+F10</strong> opens a tab's options.</p>
  </div>
</bmx-dock-layout>
<p class="note" id="ex-dl-out" role="status" style="margin: 12px 0 0">Drag the tabs about, fold the Shortcuts group to an edge from its options, or type in Notes - it keeps what you typed wherever it goes.</p>

<script type="module">
  await customElements.whenDefined('bmx-dock-layout');
  const ws = document.getElementById('ex-dl');
  const out = document.getElementById('ex-dl-out');
  const orders = [
    ['HP-1042', 'Fenwick Joinery', 'Oak shelving, 12 units - due Thursday'],
    ['HP-1039', 'Castle Interiors', 'Pine desks, 4 units - due today'],
    ['HP-1047', 'Marsh & Co', 'Fittings, 30 boxes - due Friday'],
    ['HP-1050', 'Old Mill Studio', 'Oak shelving, 2 units - due Monday'],
  ];
  const list = document.getElementById('ex-dl-orders');
  for (const [id, customer] of orders) {
    const li = document.createElement('li');
    const button = document.createElement('button');
    button.type = 'button';
    button.textContent = `${id} · ${customer}`;
    button.style.cssText = 'width: 100%; text-align: start; font: inherit; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--bmx-text); cursor: pointer';
    button.addEventListener('click', () => {
      const [, name, summary] = orders.find(o => o[0] === id);
      document.getElementById('ex-dl-heading').textContent = `${id} - ${name}`;
      document.getElementById('ex-dl-summary').textContent = summary;
      ws.querySelector('[data-panel="details"]').dataset.title = `Order ${id}`;
      ws.openPanel('details');
    });
    li.append(button);
    list.append(li);
  }
  document.getElementById('ex-dl-activity').innerHTML = '<li>08:12 HP-1042 picked</li><li>08:40 HP-1039 loaded on van 3</li><li>09:05 HP-1047 awaiting a carrier</li>';

  // The layout in the shorthand: a row of three - the orders list, a column (details over notes) and the activity group.
  ws.layout = {
    row: [
      { stack: ['orders'], size: 22 },
      { column: [{ stack: ['details'], size: 62 }, { stack: ['notes', 'problems'], size: 38 }], size: 50 },
      { stack: ['activity', 'help'], size: 28 },
    ],
  };

  // Typing in the notes marks the tab with an unsaved-changes dot, and the page refuses to close it until it is saved.
  const notes = ws.querySelector('[data-panel="notes"]');
  document.getElementById('ex-dl-notes').addEventListener('input', () => notes.setAttribute('data-dirty', ''));
  ws.addEventListener('bmxClose', e => {
    if (e.detail.panel === 'notes' && notes.hasAttribute('data-dirty')) {
      e.preventDefault();
      out.textContent = 'bmxClose was cancelled: Notes has unsaved changes, so it stays open. (Your page would offer to save here.)';
    }
  });
  ws.addEventListener('bmxChange', e => {
    const layout = e.detail.layout;
    out.textContent = `bmxChange: ${e.detail.reason}${e.detail.panels.length ? ` (${e.detail.panels.join(', ')})` : ''}. ${layout.floating.length} floating, ${layout.autoHide.length} folded to an edge, ${layout.closed.length} closed.`;
  });
</script>