{{/*
  The rail: logo, the site's pages ("doors"), the two account actions, and
  an index of the sections on this page. Sticky beside the column on wide
  screens; a one-line bar with a Menu toggle below 1000px.
*/}}
{{ $page := . }}
<aside class="rail">
  <div class="rail-bar">
    <a href="{{ "/" | relURL }}" class="brand" aria-label="Federated Computer, home">
      <img src="{{ "images/logo.png" | relURL }}" alt="Federated Computer" class="brand-logo" width="775" height="129">
    </a>

    <details class="menu">
      <summary><span class="menu-word">Menu</span><span class="menu-glyph" aria-hidden="true"><i></i><i></i></span></summary>
      <nav class="menu-panel" aria-label="Site">
        {{ range .Site.Menus.main }}
          <a href="{{ .URL | relURL }}" class="menu-top">{{ .Name }}</a>
          {{ with .Params.dropdown }}
            <div class="menu-sub">
              {{ range index $page.Site.Menus . }}<a href="{{ .URL | relURL }}">{{ .Name }}</a>{{ end }}
            </div>
          {{ end }}
        {{ end }}
        <div class="menu-actions">
          {{ partial "sections/ctas.html" (slice (dict "label" "Start Now" "url" "/start-now/" "style" "primary") (dict "label" "Sign In" "url" "/sign-in/" "style" "ghost")) }}
        </div>
      </nav>
    </details>
  </div>

  <nav class="nav nav-doors" aria-label="Site">
    {{ range .Site.Menus.main }}
      {{ $active := or (eq $page.RelPermalink .URL) (and (ne .URL "/") (hasPrefix $page.RelPermalink .URL)) }}
      <a href="{{ .URL | relURL }}"{{ if $active }} aria-current="page"{{ end }}>{{ .Name }}</a>
      {{ if $active }}
        {{ with .Params.dropdown }}
          <div class="nav-sub">
            {{ range index $page.Site.Menus . }}
              <a href="{{ .URL | relURL }}"{{ if eq $page.RelPermalink .URL }} aria-current="page"{{ end }}>{{ .Name }}</a>
            {{ end }}
          </div>
        {{ end }}
      {{ end }}
    {{ end }}
  </nav>

  <div class="rail-actions">
    <a href="{{ "/start-now/" | relURL }}" class="btn btn-primary btn-sm"><span class="btn-label">Start Now</span></a>
    <a href="{{ "/sign-in/" | relURL }}" class="rail-signin"{{ if eq $page.RelPermalink "/sign-in/" }} aria-current="page"{{ end }}>Sign In</a>
  </div>

  {{ $toc := slice }}
  {{ range .Params.sections }}
    {{ $label := or .toc .kicker .headline }}
    {{ if and $label (not (in (slice "hero" "divider" "final-cta") .type)) }}
      {{ $toc = $toc | append (dict "label" ($label | plainify) "id" (partial "section-id.html" .)) }}
    {{ end }}
  {{ end }}
  {{ if $toc }}
    <hr class="rail-rule">
    <nav class="nav nav-here" aria-label="On this page">
      {{ range $toc }}<a href="#{{ .id }}">{{ .label }}</a>{{ end }}
    </nav>
  {{ end }}

  {{/*
    "Apps + AI": a slowly scrolling wall of app tiles pinned to the bottom of
    the rail (wide screens only). The list is repeated once, hidden from
    assistive tech and focus, so the scroll can loop seamlessly. Tiles come
    from data/app_wall.yaml; icons from the sprite at images/app-icons.svg.
  */}}
  {{ with hugo.Data.app_wall }}
    {{ $sprite := "images/app-icons.svg" | relURL }}
    <nav class="app-wall" aria-label="Apps + AI">
      <a class="app-wall-head" href="{{ "/product/software-library/" | relURL }}">
        <span class="app-wall-title">Apps + AI</span>
        <span class="app-wall-count">Catalog<span class="arrow" aria-hidden="true">→</span></span>
      </a>
      <div class="app-wall-view">
        <div class="app-wall-scroll">
          {{ range $copy := slice 0 1 }}
          <ul class="app-wall-grid"{{ if $copy }} aria-hidden="true"{{ end }}>
            {{ range hugo.Data.app_wall }}
            <li>
              <a class="app-tile" href="{{ .url | relURL }}"{{ if $copy }} tabindex="-1"{{ end }}>
                {{ with .icon }}<svg class="app-tile-icon" aria-hidden="true"><use href="{{ $sprite }}#{{ . }}"></use></svg>
                {{ else }}<span class="app-tile-icon app-tile-letter" aria-hidden="true">{{ substr .name 0 1 }}</span>{{ end }}
                <span class="app-tile-name">{{ .name }}</span>
              </a>
            </li>
            {{ end }}
          </ul>
          {{ end }}
        </div>
      </div>
    </nav>
  {{ end }}
</aside>