{{template "head" .View}}
{{template "header" .View}}
<main id="main-content" class="svx-page flex-1">
  <section class="hero-cinematic svx-hero-band" aria-labelledby="svx-hero-title">
    <div class="hero-cinematic__media-wrap">
      <img
        src="/static/images/pages/services.jpg"
        alt="Grantley Adams International Airport terminal"
        class="hero-cinematic__media hero-cinematic__media--animate"
        fetchpriority="high"
        decoding="async"
      />
    </div>
    <div class="hero-cinematic__overlay" aria-hidden="true"></div>
    <div class="hero-cinematic__orb hero-cinematic__orb--gold" aria-hidden="true"></div>
    <div class="hero-cinematic__orb hero-cinematic__orb--accent" aria-hidden="true"></div>
    <div class="hero-cinematic__grain" aria-hidden="true"></div>

    <div class="hero-cinematic__content svx-hero-band__content">
      <header class="svx-hero">
        <div class="svx-hero__copy">
          <p class="svx-kicker">{{t .View "common.airportKicker"}}</p>
          <h1 id="svx-hero-title" class="svx-hero__title">{{t .View "services.heroTitle"}}</h1>
          <p class="svx-hero__lead">{{t .View "services.heroLead"}}</p>
        </div>
      </header>
    </div>
  </section>

  <div class="svx-shell" data-services-redesign>
    <div class="svx-filters-wrap">
      <div class="page-container">
        <div class="svx-filters" role="tablist" aria-label="{{t .View "services.filterLabel"}}">
          <button type="button" class="svx-filter is-active" role="tab" aria-selected="true" data-svx-filter="all">{{t .View "services.filterAll"}}</button>
          <button type="button" class="svx-filter" role="tab" aria-selected="false" data-svx-filter="before">{{t .View "services.filterBefore"}}</button>
          <button type="button" class="svx-filter" role="tab" aria-selected="false" data-svx-filter="after">{{t .View "services.filterAfter"}}</button>
          <button type="button" class="svx-filter" role="tab" aria-selected="false" data-svx-filter="arrivals">{{t .View "services.filterArrivals"}}</button>
          <button type="button" class="svx-filter" role="tab" aria-selected="false" data-svx-filter="parking">{{t .View "services.filterParking"}}</button>
          <button type="button" class="svx-filter" role="tab" aria-selected="false" data-svx-filter="other">{{t .View "services.filterOther"}}</button>
        </div>
      </div>
    </div>

    <div class="page-container svx-main">
      <p class="svx-count" data-svx-count data-svx-count-fmt="{{t .View "services.countFmt"}}"></p>

      <div class="svx-list" id="svx-list" role="list">
        {{range .Services}}
        <button type="button"
          class="svx-row"
          role="listitem"
          data-svx-row
          data-service-id="{{.ID}}"
          data-groups="{{.FilterGroups}}"
          data-layout="{{.Layout}}"
          data-color="{{.Color}}"
          data-icon-bg="{{.IconBg}}"
          data-name="{{.Name}}"
          data-zone="{{.Zone}}"
          data-desc="{{.Description}}"
          data-features="{{.FeaturesJSON}}"
          data-rates-title="{{.RatesTitle}}"
          data-penalties-title="{{.PenaltiesTitle}}"
          data-note="{{.Note}}"
          data-rates="{{.RatesJSON}}"
          data-penalties="{{.PenaltiesJSON}}">
          <span class="svx-row__icon icon-box border {{.IconBg}} {{.Color}}" aria-hidden="true">
            {{template "service_icon" .ID}}
          </span>
          <span class="svx-row__body">
            <span class="svx-row__top">
              <span class="svx-row__title">{{.Name}}</span>
              <span class="svx-row__zone border {{.IconBg}} {{.Color}}">{{.Zone}}</span>
            </span>
            <span class="svx-row__summary">{{.Summary}}</span>
          </span>
          <span class="svx-row__chevron" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
          </span>
        </button>
        {{end}}
      </div>

      <p class="svx-empty hidden" data-svx-empty>{{t .View "services.filterEmpty"}}</p>

      <section class="svx-assist" aria-labelledby="svx-assist-title">
        <div class="svx-assist__copy">
          <h2 id="svx-assist-title" class="svx-assist__title">{{t .View "services.assistanceTitle"}}</h2>
          <p class="svx-assist__desc">{{t .View "services.assistanceDescription"}}</p>
        </div>
        <button type="button" class="svx-assist__btn" data-svx-open="wheelchair">{{t .View "services.wheelchairDetails"}}</button>
      </section>
    </div>
  </div>

  <div id="svx-drawer" class="svx-drawer hidden" role="dialog" aria-modal="true" aria-labelledby="svx-drawer-title" aria-hidden="true">
    <div class="svx-drawer__backdrop" data-svx-close tabindex="-1"></div>
    <div class="svx-drawer__panel" role="document">
      <div class="svx-drawer__header" id="svx-drawer-header">
        <button type="button" class="svx-drawer__close" data-svx-close aria-label="{{t .View "common.close"}}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
        </button>
        <div class="svx-drawer__intro">
          <span id="svx-drawer-icon" class="svx-drawer__icon icon-box border" aria-hidden="true"></span>
          <div>
            <p class="svx-drawer__kicker">{{t .View "common.airportService"}}</p>
            <h2 id="svx-drawer-title" class="svx-drawer__title"></h2>
            <p id="svx-drawer-zone" class="svx-drawer__zone"></p>
          </div>
        </div>
      </div>
      <div class="svx-drawer__body">
        <h3 class="svx-drawer__section">{{t .View "common.overview"}}</h3>
        <p id="svx-drawer-desc" class="svx-drawer__desc"></p>
        <div id="svx-drawer-details">
          <h3 id="svx-drawer-details-title" class="svx-drawer__section">{{t .View "common.keyDetails"}}</h3>
          <div id="svx-drawer-features"></div>
        </div>
        <p class="svx-drawer__note">{{t .View "services.modalDisclaimer"}}</p>
      </div>
    </div>
  </div>
</main>
{{template "footer" .View}}
{{template "scripts" .View}}
<script src="/static/js/services-redesign.js?v={{.View.AssetVersion}}" defer></script>