<div data-controller="sidebar">
  <aside class="tw-sidebar">
    <!-- Logo -->
    <div class="tw-sidebar-logo">
      <a href="#" class="tw-sidebar-logo-link">
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M37.47 38L29.43 17.99H26.34L18.27 38H21.12L22.89 33.53H32.85L34.62 38H37.47ZM32.13 31.34H23.64L27.87 20.54L32.13 31.34Z" fill="white"/>
          <path d="M39 18V14H37V18H33V20H37V24H39V20H43V18H39Z" fill="#EC634B"/>
        </svg>
      </a>
    </div>
    <!-- Navigation -->
    <nav class="tw-sidebar-nav" role="navigation" aria-label="LA Dashboard navigation">
      <!-- Overview (navigates to the Overview page) -->
      <a href="/lookbook/preview/projects/la_dashboard/overview"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Overview">
        <i class="fa-light fa-chart-pie tw-sidebar-icon"></i>
        <span class="tw:sr-only">Overview</span>
      </a>
      <!-- Comparison (navigates to the Comparison page) -->
      <a href="/lookbook/preview/projects/la_dashboard/comparison"
       data-turbo="false"
       class="tw-sidebar-item tw-active"
       data-label="Comparison">
        <i class="fa-light fa-chart-column tw-sidebar-icon"></i>
        <span class="tw:sr-only">Comparison</span>
      </a>
      <!-- Schools (navigates to the Schools page) -->
      <a href="/lookbook/preview/projects/la_dashboard/schools"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Schools">
        <i class="fa-light fa-school tw-sidebar-icon"></i>
        <span class="tw:sr-only">Schools</span>
      </a>
      <!-- Students (navigates to the Students page) -->
      <a href="/lookbook/preview/projects/la_dashboard/students"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Students">
        <i class="fa-light fa-users tw-sidebar-icon"></i>
        <span class="tw:sr-only">Students</span>
      </a>
      <!-- Destination Tracker (navigates to the Destination Tracker page) -->
      <a href="/lookbook/preview/projects/la_dashboard/destination_tracker"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Destination Tracker">
        <i class="fa-light fa-location-dot tw-sidebar-icon"></i>
        <span class="tw:sr-only">Destination Tracker</span>
      </a>
      <!-- Transitions (navigates to the Transitions page) -->
      <a href="/lookbook/preview/projects/la_dashboard/transitions"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Transitions">
        <i class="fa-light fa-right-left tw-sidebar-icon"></i>
        <span class="tw:sr-only">Transitions</span>
      </a>
      <!-- SEND & NEET (navigates to the SEND & NEET page) -->
      <a href="/lookbook/preview/projects/la_dashboard/send_neet"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="SEND & NEET">
        <i class="fa-light fa-person-circle-exclamation tw-sidebar-icon"></i>
        <span class="tw:sr-only">SEND & NEET</span>
      </a>
    </nav>
    <!-- Bottom Section -->
    <div class="tw-sidebar-bottom">
      <a href="/lookbook/preview/projects/la_dashboard/settings"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Settings">
        <i class="fa-light fa-cogs tw-sidebar-icon"></i>
        <span class="tw:sr-only">Settings</span>
      </a>
    </div>
  </aside>
  <header class="tw-topbar" role="banner">
    <div class="tw-topbar-left">
      <!-- LA brand lockup (logo placeholder + authority name) -->
      <div class="tw:flex tw:items-center tw:gap-3">
        <div class="tw-avatar tw-avatar-square tw-avatar-icon" role="img" aria-label="Hackney logo">
          <i class="fa-regular fa-building-columns tw:text-base"></i>
        </div>
        <h2 class="tw-h2 tw:text-neutral-800 tw:mb-0">Hackney</h2>
      </div>
    </div>
    <div class="tw-topbar-right">
      <!-- Action Buttons -->
      <button type="button" class="tw-btn tw-btn-outline-success tw-btn-multiline tw:hidden" data-controller="tooltip" data-tooltip-content-value="Referral Program" data-tooltip-placement-value="bottom">
        <i class="fa-solid fa-gift tw-icon-16"></i>
        Refer<br>
         & Save
      </button>
      <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline tw:hidden" data-controller="tooltip" data-tooltip-content-value="Discuss Ideas & Submit Feature Requests" data-tooltip-placement-value="bottom">
        <i class="fa-solid fa-users tw-icon-16"></i>
        Applicaa<br>
         Community
      </button>
      <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Support & Feature Requests" data-tooltip-placement-value="bottom">
        <i class="fa-solid fa-comment-question tw-icon-16"></i>
        Support<br>
         & Requests
      </button>
      <div class="tw-topbar-action-icons">
        <!-- Notification Icon -->
        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-topbar-notification-btn" aria-label="Notifications" data-controller="tooltip" data-tooltip-content-value="Notification" data-tooltip-placement-value="bottom">
          <i class="fa-solid fa-bell tw-icon-16"></i>
        </button>
      </div>
      <div class="tw-topbar-divider"></div>
      <!-- User Avatar Dropdown -->
      <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown">
        <button type="button" class="tw-dropdown-trigger tw-topbar-avatar"
              aria-label="User menu"
              aria-haspopup="true"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
          <div class="tw-avatar tw-avatar-primary" role="img" aria-label="Jane Doe">
            <span>JD</span>
          </div>
        </button>
        <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
          <div class="tw-dropdown-header">John Doe</div>
          <div class="tw-dropdown-divider"></div>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-circle-sterling tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Referrals & billing</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-lock tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Password & security</span>
          </button>
          <div class="tw-dropdown-divider"></div>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-layer-group tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Multiple form</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-envelope tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Email preferences</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-right-from-bracket tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Logout</span>
          </button>
        </div>
      </div>
    </div>
  </header>
  <main class="tw-sidebar-topbar-content-offset tw:bg-background tw-min-h-screen-offset">
    <div class="tw-container-fluid tw-page-container" data-controller="comparison">
      <!-- Page header: breadcrumb + title + subtitle -->
      <div class="tw-page-header tw:mb-4">
        <div class="tw-page-header-breadcrumb">
          <nav aria-label="Breadcrumb">
            <ol class="tw-breadcrumb">
              <li class="tw-breadcrumb-item">
                <a href="/lookbook/preview/projects/la_dashboard/overview" data-turbo="false" aria-label="Home">
                  <i class="fa-solid fa-house tw-breadcrumb-item-icon"></i>
                </a>
              </li>
              <li class="tw-breadcrumb-item tw-active" aria-current="page">Comparison</li>
            </ol>
          </nav>
        </div>
        <div class="tw-page-header-main">
          <div class="tw-page-header-title-group">
            <h1 class="tw-page-header-title">Comparison</h1>
            <!-- <span class="tw-page-header-subtitle">Benchmark Hackney's Year 11 cohort against other local authorities</span> -->
          </div>
        </div>
        <div class="tw-page-header-slot">
          <div class="tw:flex tw:items-center tw:gap-4 tw:flex-wrap">
            <p class="tw-small tw:text-neutral-800 tw:mb-0 tw:flex-1">
              <i class="fa-regular fa-arrow-right-arrow-left tw:mr-1"></i>
              <span data-comparison-target="banner">Comparing <strong>Hackney</strong> against <strong>3</strong> selected areas and the national average.</span>
            </p>
            <button type="button" class="tw-btn tw-btn-primary" data-action="click->comparison#exportSnapshot">
              <i class="fa-regular fa-file-export tw:mr-1"></i> Export snapshot
            </button>
            <!-- <button class="tw-btn tw-btn-primary tw:ml-auto" type="button">
              <i class="fa-regular fa-file-arrow-down tw:mr-1"></i> Download Audit Report
            </button> -->
          </div>
        </div>
      </div>
      <!-- Comparison banner -->
      <!-- <div class="tw-inline-notification tw-inline-notification-info tw:mb-4" role="status">
        <div class="tw-inline-notification-icon"><i class="fa-regular fa-arrow-right-arrow-left"></i></div>
        <div class="tw-inline-notification-content">
          <p class="tw-inline-notification-message" data-comparison-target="banner">Comparing <strong>Hackney</strong> against <strong>3</strong> selected areas and the national average.</p>
        </div>
      </div> -->
      <!-- Compare with… (selector panel) -->
      <div class="tw-card tw:mb-4">
        <div class="tw-card-body">
          <div class="tw:flex tw:flex-wrap tw:items-start tw:justify-between tw:gap-3 tw:mb-4">
            <div class="tw:flex tw:items-center tw:gap-3">
              <span class="tw:flex tw:items-center tw:justify-center tw:w-9 tw:h-9 tw:rounded-md tw:bg-blue-100 tw:text-primary-500">
                <i class="fa-regular fa-chart-column"></i>
              </span>
              <div>
                <h2 class="tw-h6 tw:mb-0">Compare with… <span class="tw-small tw:font-normal tw:text-neutral-500" data-comparison-target="selectedCount">3 selected</span></h2>
                <div class="tw-small tw:text-neutral-500">Pick boroughs to benchmark against. Toggle the national average on or off.</div>
              </div>
            </div>
            <div class="tw:flex tw:items-center tw:gap-2">
              <div class="tw-form-check tw-form-switch tw:mb-0 tw:pr-2">
                <input class="tw-form-check-input tw:mt-0" type="checkbox" id="cmpNational" checked
                       data-comparison-target="nationalToggle" data-action="change->comparison#toggleNational">
                <label class="tw-form-check-label" for="cmpNational">National average</label>
              </div>
              <button type="button" class="tw-btn tw-btn-sm tw-btn-secondary" data-action="click->comparison#clearAll">Clear</button>
            </div>
          </div>
          <!-- Picker: searchable, region-grouped multi-select dropdown (menu filled by comparison_controller) -->
          <div class="tw-dropdown tw-dropdown-block tw-dropdown-search" data-comparison-target="dropdown">
            <div class="tw-dropdown-trigger" data-comparison-target="trigger"
                 data-action="click->comparison#focusSearch">
              <i class="fa-regular fa-magnifying-glass tw:text-neutral-400 tw:flex-shrink-0" aria-hidden="true"></i>
              <input type="text" class="tw-dropdown-search-input"
                     placeholder="Search areas to compare…" autocomplete="off"
                     aria-label="Search areas to compare" aria-controls="cmpMenu"
                     data-comparison-target="searchInput"
                     data-action="focus->comparison#openMenu input->comparison#filter keydown->comparison#searchKeydown">
              <i class="fa-regular fa-chevron-down tw-dropdown-chevron" aria-hidden="true"
                 data-action="click->comparison#toggleMenu"></i>
            </div>
            <div id="cmpMenu" class="tw-dropdown-menu tw-dropdown-menu-scrollable"
                 role="group" aria-label="Areas to compare" data-comparison-target="menu"></div>
            <div class="tw-dropdown-status" role="status" aria-live="polite"
                 data-comparison-target="status" hidden>
              No matches for “<span data-comparison-target="statusQuery"></span>”
            </div>
          </div>
          <!-- Selected comparators (Hackney locked first); filled by comparison_controller -->
          <div class="tw-tag-group tw:mt-3" data-comparison-target="chips"></div>
        </div>
      </div>
      <!-- Cohort context -->
      <div class="tw-card tw:mb-4">
        <div class="tw-card-body">
          <div class="tw:flex tw:items-center tw:gap-3 tw:mb-3">
            <span class="tw:flex tw:items-center tw:justify-center tw:w-9 tw:h-9 tw:rounded-md tw:bg-blue-100 tw:text-primary-500">
              <i class="fa-regular fa-table-columns"></i>
            </span>
            <div>
              <h2 class="tw-h6 tw:mb-0">Cohort context</h2>
              <div class="tw-small tw:text-neutral-500">Year 11 cohort size and SEND profile — sense-check that you're comparing like-for-like.</div>
            </div>
          </div>
          <div data-comparison-target="cohortGrid" class="tw:grid tw:grid-cols-2 tw:md:grid-cols-3 tw:lg:grid-cols-5 tw:gap-3"></div>
        </div>
      </div>
      <!-- Risk Factor (RAG) breakdown -->
      <div class="tw-card tw:mb-4">
        <div class="tw-card-body">
          <div class="tw:flex tw:flex-wrap tw:items-center tw:justify-between tw:gap-3 tw:mb-3">
            <div class="tw:flex tw:items-center tw:gap-3">
              <span class="tw:flex tw:items-center tw:justify-center tw:w-9 tw:h-9 tw:rounded-md tw:bg-orange-100 tw:text-orange-600">
                <i class="fa-regular fa-triangle-exclamation"></i>
              </span>
              <div>
                <h2 class="tw-h6 tw:mb-0">Risk Factor (RAG) Breakdown</h2>
                <div class="tw-small tw:text-neutral-500">NEET / RONI risk distribution per cohort — ranked best to worst by low-risk share.</div>
              </div>
            </div>
            <div class="tw:flex tw:items-center tw:gap-3">
              <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw-small tw:text-neutral-500"><span class="tw:w-2.5 tw:h-2.5 tw:rounded-full tw:bg-green-600"></span>Low risk</span>
              <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw-small tw:text-neutral-500"><span class="tw:w-2.5 tw:h-2.5 tw:rounded-full tw:bg-orange-500"></span>Medium risk</span>
              <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw-small tw:text-neutral-500"><span class="tw:w-2.5 tw:h-2.5 tw:rounded-full tw:bg-red-500"></span>High risk</span>
            </div>
          </div>
          <div class="tw:h-[280px] tw:w-full">
            <canvas data-comparison-target="ragCanvas" role="img" aria-label="Risk factor (RAG) breakdown by borough — low, medium and high risk percentages"></canvas>
          </div>
        </div>
      </div>
      <!-- Benchmark metrics table -->
      <div class="tw-card tw:mb-4">
        <div class="tw-card-body">
          <div class="tw:flex tw:items-center tw:gap-3">
            <span class="tw:flex tw:items-center tw:justify-center tw:w-9 tw:h-9 tw:rounded-md tw:bg-blue-100 tw:text-primary-500">
              <i class="fa-regular fa-chart-simple"></i>
            </span>
            <div>
              <h2 class="tw-h6 tw:mb-0">Benchmark metrics</h2>
              <div class="tw-small tw:text-neutral-500">Hackney highlighted; best value per row in green; Hackney's delta vs the selected-borough average.</div>
            </div>
          </div>
        </div>
        <div class="tw:overflow-x-auto">
          <table class="tw-table" data-comparison-target="metricsTable"></table>
        </div>
      </div>
      <!-- At-a-glance ranking -->
      <div class="tw-card tw:mb-4">
        <div class="tw-card-body">
          <div class="tw:flex tw:items-center tw:gap-3">
            <span class="tw:flex tw:items-center tw:justify-center tw:w-9 tw:h-9 tw:rounded-md tw:bg-blue-100 tw:text-primary-500">
              <i class="fa-regular fa-ranking-star"></i>
            </span>
            <div>
              <h2 class="tw-h6 tw:mb-0">At-a-glance ranking</h2>
              <div class="tw-small tw:text-neutral-500">Hackney's position on each metric across the selected areas.</div>
            </div>
          </div>
        </div>
        <table class="tw-table">
          <thead>
            <tr>
              <th>Metric</th>
              <th class="tw:text-right">Hackney</th>
              <th class="tw:text-right">Rank</th>
            </tr>
          </thead>
          <tbody data-comparison-target="rankingBody"></tbody>
        </table>
      </div>
      <!-- Toast container (export confirmation) -->
      <div class="tw-toast-container" data-controller="toast" data-comparison-target="toastContainer"></div>
    </div>
  </main>
</div>