{{template "head" .View}}
{{template "header" .View}}
<main id="main-content" class="error-page flex-1">
  <div class="error-page__bg" aria-hidden="true"></div>
  <div class="error-page__orb error-page__orb--brand" aria-hidden="true"></div>
  <div class="error-page__orb error-page__orb--gold" aria-hidden="true"></div>

  <div class="page-container relative z-10 flex flex-1 flex-col items-center justify-center py-16 sm:py-20">
    <div class="error-page__panel w-full max-w-2xl text-center">
      <p class="section-kicker hero-enter inline-flex items-center gap-2">
        <span class="live-dot" aria-hidden="true"></span>
        {{t .View "common.airportKicker"}}
      </p>

      <p class="error-page__code hero-enter hero-enter-delay-1 font-display" aria-hidden="true">{{.Code}}</p>

      <h1 class="hero-enter hero-enter-delay-1 mt-2 font-display text-3xl font-bold text-slate-900 sm:text-4xl dark:text-white">
        {{if .IsError}}
          {{t .View "pages.notFound.errorHeading"}}
        {{else}}
          {{t .View "pages.notFound.heading"}}
        {{end}}
      </h1>

      <p class="hero-enter hero-enter-delay-2 mx-auto mt-4 max-w-lg text-base leading-relaxed text-slate-600 dark:text-slate-300">
        {{if .IsError}}
          {{t .View "pages.notFound.errorMessage"}}
        {{else}}
          {{t .View "pages.notFound.message"}}
        {{end}}
      </p>

      <div class="hero-enter hero-enter-delay-3 mt-8 flex flex-wrap items-center justify-center gap-3">
        <a href="/" class="btn-primary">
          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
          {{t .View "pages.notFound.backHome"}}
        </a>
        <a href="/flights" class="btn-secondary">{{t .View "nav.flights"}}</a>
        <a href="/search" class="btn-secondary">{{t .View "pages.search.title"}}</a>
      </div>

      {{if not .IsError}}
      <div class="hero-enter hero-enter-delay-4 mt-10 border-t border-slate-200/80 pt-8 dark:border-slate-700/80">
        <p class="text-sm font-semibold text-slate-700 dark:text-slate-200">{{t .View "pages.notFound.helpfulTitle"}}</p>
        <ul class="mt-4 grid gap-2 sm:grid-cols-2">
          <li>
            <a href="/flights" class="error-page__link">
              <span>{{t .View "nav.flights"}}</span>
              <svg class="h-4 w-4 opacity-60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </a>
          </li>
          <li>
            <a href="/passenger-guide" class="error-page__link">
              <span>{{t .View "nav.passengerGuide"}}</span>
              <svg class="h-4 w-4 opacity-60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </a>
          </li>
          <li>
            <a href="/directory" class="error-page__link">
              <span>{{t .View "nav.directory"}}</span>
              <svg class="h-4 w-4 opacity-60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </a>
          </li>
          <li>
            <a href="/services" class="error-page__link">
              <span>{{t .View "nav.services"}}</span>
              <svg class="h-4 w-4 opacity-60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </a>
          </li>
        </ul>
      </div>
      {{end}}
    </div>
  </div>
</main>
{{template "footer" .View}}
{{template "scripts" .View}}