{{template "head" .View}}
{{template "header" .View}}
<main id="main-content" class="fx-main flex-1">
  <section class="hero-cinematic fx-hero-band" aria-label="{{t .View "pages.flights.title"}}">
    <div class="hero-cinematic__media-wrap">
      <img
        src="/static/images/hero/terminal-exterior.jpg"
        alt="Grantley Adams International Airport terminal exterior in Barbados"
        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 fx-hero-band__content">
      <header class="fx-hero">
        <div class="fx-hero__copy">
          <p class="fx-kicker">
            <span class="fx-live" aria-hidden="true"></span>
            BGI · {{t .View "flights.redesign.liveOps"}}
          </p>
          <h1 class="fx-hero__title">{{t .View "flights.redesign.heroTitle"}}</h1>
          <p class="fx-hero__lead">{{t .View "flights.redesign.heroLead"}}</p>
        </div>
        <div class="fx-clock-card">
          <div class="fx-clock-card__timeblock">
            <p class="fx-clock-card__label">{{t .View "flights.redesign.barbadosTime"}}</p>
            <p id="fx-clock" class="fx-clock-card__time">--:--:--</p>
            <p id="fx-clock-date" class="fx-clock-card__date"></p>
            <p id="fx-updated" class="fx-clock-card__updated"></p>
          </div>
          <div class="fx-clock-card__weather" aria-label="{{t .View "home.weather.title"}}">
            <div class="fx-clock-card__weather-top">
              <span class="weather-icon weather-icon--on-brand fx-clock-card__weather-icon" aria-hidden="true">
                {{template "weather_icon" .Weather.ConditionKey}}
              </span>
              <div>
                <p class="fx-clock-card__weather-temp">{{.Weather.Temp}}°C</p>
                <p class="fx-clock-card__weather-cond">{{.Weather.Condition}}</p>
              </div>
            </div>
            <p class="fx-clock-card__weather-loc">
              {{.Weather.Location}}
              {{if .Weather.Live}}<span class="fx-clock-card__live">{{t .View "home.weather.liveBadge"}}</span>{{end}}
            </p>
            <dl class="fx-clock-card__weather-meta">
              <div>
                <dt>{{t .View "home.weather.feelsLike"}}</dt>
                <dd>{{.Weather.FeelsLike}}°</dd>
              </div>
              <div>
                <dt>{{t .View "home.weather.humidity"}}</dt>
                <dd>{{.Weather.Humidity}}%</dd>
              </div>
              <div>
                <dt>{{t .View "home.weather.wind"}}</dt>
                <dd>{{.Weather.Wind}} {{t .View "home.weather.windUnit"}}</dd>
              </div>
            </dl>
          </div>
        </div>
      </header>
    </div>
  </section>

  <div class="fx-atmosphere" aria-hidden="true">
    <span class="fx-atmosphere__haze"></span>
    <span class="fx-atmosphere__grain"></span>
  </div>

  <div class="fx-shell">
    <div id="fx-board" class="fx-board" data-i18n='{"searchPlaceholder":"{{t .View "flights.searchPlaceholder"}}","arrivals":"{{t .View "flights.arrivals"}}","departures":"{{t .View "flights.departures"}}","refresh":"{{t .View "flights.refresh"}}","retry":"{{t .View "flights.retry"}}","errorTitle":"{{t .View "flights.errorTitle"}}","noResults":"{{t .View "flights.noResults"}}","lastUpdated":"{{t .View "flights.lastUpdated"}}","barbados":"{{t .View "flights.barbados"}}","gate":"{{t .View "flights.gate"}}","earlierFlights":"{{t .View "flights.earlierFlights"}}","earlierFlightsCount":"{{t .View "flights.earlierFlightsCount"}}","nowBoarding":"{{t .View "flights.redesign.nowBoarding"}}","nextArrival":"{{t .View "flights.redesign.nextArrival"}}","nextDeparture":"{{t .View "flights.redesign.nextDeparture"}}","nextUp":"{{t .View "flights.nextUp"}}","allStatuses":"{{t .View "flights.redesign.allStatuses"}}","arrivalsCount":"{{t .View "flights.redesign.arrivalsCount"}}","departuresCount":"{{t .View "flights.redesign.departuresCount"}}","scheduled":"{{t .View "flights.redesign.scheduled"}}","estimated":"{{t .View "flights.redesign.estimated"}}","emptyBoard":"{{t .View "flights.redesign.emptyBoard"}}","loading":"{{t .View "flights.loading"}}","airline":"{{t .View "flights.table.airline"}}","flight":"{{t .View "flights.table.flight"}}","status":"{{t .View "flights.table.status"}}","eta":"{{t .View "flights.table.eta"}}","etd":"{{t .View "flights.table.etd"}}","from":"{{t .View "flights.table.from"}}","to":"{{t .View "flights.table.to"}}","statuses":{{.StatusLabelsJSON}}}'>
      <div class="fx-toolbar">
        <div id="fx-switch" class="fx-switch" role="tablist" aria-label="{{t .View "pages.flights.title"}}" data-active-tab="arrival">
          <span class="fx-switch__indicator" aria-hidden="true"></span>
          <button type="button" class="fx-switch__btn is-active" role="tab" aria-selected="true" data-pane="arrival">{{t .View "flights.arrivals"}}</button>
          <button type="button" class="fx-switch__btn" role="tab" aria-selected="false" data-pane="departure">{{t .View "flights.departures"}}</button>
        </div>
        <div class="fx-toolbar__search">
          <div class="fx-search">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
            <input type="search" id="fx-search" placeholder="{{t .View "flights.searchPlaceholder"}}" autocomplete="off" />
          </div>
          <button type="button" id="fx-refresh" class="fx-refresh" aria-label="{{t .View "flights.refresh"}}" title="{{t .View "flights.refresh"}}">
            <svg class="fx-refresh__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 21h5v-5"/></svg>
            <span class="fx-refresh__label">{{t .View "flights.refresh"}}</span>
          </button>
        </div>
      </div>

      <div id="fx-boarding" class="fx-boarding hidden" aria-live="polite"></div>

      <div id="fx-ticker" class="flight-board-ticker fx-ticker hidden" aria-hidden="true">
        <p class="flight-board-ticker__label">{{t .View "flights.nextUp"}}</p>
        <div class="flight-board-ticker__viewport">
          <div id="fx-ticker-track" class="flight-board-ticker__track"></div>
        </div>
      </div>

      <div id="fx-spotlights" class="fx-spotlights"></div>

      <div class="fx-filters-row">
        <p class="fx-filters-label" id="fx-filter-label">{{t .View "flights.redesign.filterLabel"}}</p>
        <div id="fx-filters" class="fx-filters" role="group" aria-labelledby="fx-filter-label"></div>
      </div>

      <div id="fx-error" class="fx-error hidden" role="alert"></div>

      <div class="fx-columns">
        <section class="fx-column is-active" data-pane="arrival" aria-labelledby="fx-arrivals-title">
          <header class="fx-column__head fx-column__head--arr">
            <div>
              <p class="fx-column__eyebrow">BGI</p>
              <h2 id="fx-arrivals-title">{{t .View "flights.arrivals"}}</h2>
            </div>
            <p id="fx-arrivals-count" class="fx-column__count"></p>
          </header>
          <div id="fx-arrivals" class="fx-column__list" aria-live="polite"></div>
        </section>
        <section class="fx-column" data-pane="departure" aria-labelledby="fx-departures-title">
          <header class="fx-column__head fx-column__head--dep">
            <div>
              <p class="fx-column__eyebrow">BGI</p>
              <h2 id="fx-departures-title">{{t .View "flights.departures"}}</h2>
            </div>
            <p id="fx-departures-count" class="fx-column__count"></p>
          </header>
          <div id="fx-departures" class="fx-column__list" aria-live="polite"></div>
        </section>
      </div>
    </div>
  </div>
</main>
<script src="/static/js/flights-redesign.js?v={{.View.AssetVersion}}" defer></script>
{{template "footer" .View}}
{{template "scripts" .View}}