source: Klonkt/src/views/partials/view-switcher.ejs@ 6eeb459

<%# View switcher partial — Tijdlijn / Grid + grid-cols picker.
    Mounted in shell.ejs once, visible on every non-admin page. Click
    handlers are wired in shell.ejs via event-delegation on document so
    HTMX-swapped content keeps working without rebinding. %>
<div class="view-switcher-wrap">
  <div class="container">
    <% if (typeof premiumUnlocked !== 'undefined' && premiumUnlocked && typeof agendaEnabled !== 'undefined' && agendaEnabled) {
         var _sbA = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
    %>
    <div class="agenda-pill">
      <a class="vs-agenda" href="<%= _sbA %>/shows" aria-label="Agenda — evenementen">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
        <span>Agenda</span>
      </a>
    </div>
    <% } %>
    <% if (typeof tenancy !== 'undefined' && tenancy === 'circle') {
         var _onCirkel = (typeof bodyClass === 'string' && bodyClass.indexOf('on-cirkel') >= 0);
         var _sb = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
    %>
    <div class="feed-scope" role="tablist" aria-label="Solo of cirkel">
      <a class="feed-scope-btn<%= _onCirkel ? '' : ' is-active' %>" href="<%= _sb %>/"
         role="tab" aria-selected="<%= _onCirkel ? 'false' : 'true' %>">Solo</a>
      <a class="feed-scope-btn<%= _onCirkel ? ' is-active' : '' %>" href="<%= _sb %>/cirkel"
         role="tab" aria-selected="<%= _onCirkel ? 'true' : 'false' %>">Cirkel</a>
    </div>
    <% } %>
    <div class="view-switcher" role="tablist" aria-label="Weergave">
      <button type="button" class="view-switch-btn" data-view="timeline" role="tab"
              aria-selected="<%= (typeof site !== 'undefined' && site && site.feed_view_default === 'grid') ? 'false' : 'true' %>">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
        <span>Tijdlijn</span>
      </button>
      <button type="button" class="view-switch-btn" data-view="grid" role="tab"
              aria-selected="<%= (typeof site !== 'undefined' && site && site.feed_view_default === 'grid') ? 'true' : 'false' %>">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
        <span>Grid</span>
      </button>
    </div>
    <div class="grid-cols-picker" aria-label="Aantal kolommen">
      <button type="button" class="grid-cols-btn" data-cols="2" title="2 kolommen">2</button>
      <button type="button" class="grid-cols-btn" data-cols="3" title="3 kolommen">3</button>
      <button type="button" class="grid-cols-btn" data-cols="4" title="4 kolommen">4</button>
    </div>
  </div>
</div>