{{template "head" .View}}
{{template "header" .View}}
<main id="main-content" class="page-canvas flex-1">
  {{template "page_header" (pageHeader .View .TitleKey .DescKey .ImagePath)}}

  <div class="page-container py-8 pb-16">
    <div class="about-layout">
      {{template "about_subnav" .}}

      <div class="about-layout__main min-w-0">
        <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
          <a href="{{.BackURL}}" class="text-sm font-semibold text-brand-700 hover:text-brand-800 dark:text-brand-300">← All statistics</a>
          <div class="flex flex-wrap gap-2">
            <a href="{{.PDFURL}}" class="btn-primary">Download PDF</a>
          </div>
        </div>

        <section class="stats-report-hero reveal mb-6" aria-label="{{.Year.PeriodLabel}}">
          <div class="stats-report-hero__brand">
            <img src="/logos/gaia-logo-white.svg" alt="" width="140" height="42" class="h-9 w-auto" />
            <p class="stats-report-hero__eyebrow">Grantley Adams International Airport Inc. · Summary of Traffic</p>
          </div>
          <div class="stats-report-hero__copy">
            <p class="section-kicker text-brand-100">{{.Year.ShortPeriod}}</p>
            <h2 class="font-display text-2xl font-bold text-white sm:text-3xl">{{.Year.Year}} Traffic Dashboard</h2>
            <p class="mt-2 text-sm text-brand-50/90">{{.Year.PeriodLabel}} — recreated from the official monthly Summary of Traffic figures.</p>
          </div>
          <div class="stats-report-hero__kpis">
            <div>
              <p class="text-[11px] font-semibold uppercase tracking-wider text-brand-100/80">Passengers</p>
              <p class="font-display text-xl font-bold text-white">{{formatCompact .Year.Passengers}}</p>
              <p class="text-xs text-brand-50/80">{{formatInt .Year.Passengers}}</p>
            </div>
            {{if gt .Year.Movements 0}}
            <div>
              <p class="text-[11px] font-semibold uppercase tracking-wider text-brand-100/80">Aircraft movements</p>
              <p class="font-display text-xl font-bold text-white">{{formatInt .Year.Movements}}</p>
            </div>
            {{end}}
            {{if gt .Year.CargoKg 0}}
            <div>
              <p class="text-[11px] font-semibold uppercase tracking-wider text-brand-100/80">Cargo &amp; mail</p>
              <p class="font-display text-xl font-bold text-white">{{formatCargo .Year.CargoKg}}</p>
            </div>
            {{end}}
          </div>
        </section>

        {{if or (gt .Year.Embarked 0) (gt .Year.Disembarked 0)}}
        <div class="reveal-stagger mb-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          <div class="stat-card"><p class="stat-card__kicker">Embarked</p><p class="stat-card__value">{{formatInt .Year.Embarked}}</p></div>
          <div class="stat-card"><p class="stat-card__kicker">Disembarked</p><p class="stat-card__value">{{formatInt .Year.Disembarked}}</p></div>
          <div class="stat-card"><p class="stat-card__kicker">Transit</p><p class="stat-card__value">{{formatInt .Year.Transit}}</p></div>
          <div class="stat-card"><p class="stat-card__kicker">Transfers</p><p class="stat-card__value">{{formatInt .Year.Transfers}}</p></div>
        </div>
        {{end}}

        {{if .HasMonths}}
        <section class="content-section reveal mb-6 p-4 sm:p-6" aria-label="Monthly traffic table">
          <h3 class="font-display text-base font-bold text-slate-900 dark:text-white sm:text-lg">Monthly traffic</h3>
          <p class="mt-1 text-sm text-slate-600 dark:text-slate-300">Master table matching the official Summary of Traffic columns.</p>
          <div class="mt-4 overflow-x-auto">
            <table class="stats-master-table">
              <thead>
                <tr>
                  <th>Month</th>
                  <th>Embarked</th>
                  <th>Disembarked</th>
                  <th>Transit</th>
                  <th>Transfers</th>
                  <th>Total PAX</th>
                  <th>Cargo loaded</th>
                  <th>Cargo unloaded</th>
                  <th>Mail loaded</th>
                  <th>Mail unloaded</th>
                  <th>Cargo &amp; mail</th>
                  <th>Movements</th>
                </tr>
              </thead>
              <tbody>
                {{range .Months}}
                <tr>
                  <td class="font-medium">{{monthName .Month}}</td>
                  <td>{{formatInt .Embarked}}</td>
                  <td>{{formatInt .Disembarked}}</td>
                  <td>{{formatInt .Transit}}</td>
                  <td>{{formatInt .Transfers}}</td>
                  <td class="font-semibold">{{formatInt .Passengers}}</td>
                  <td>{{formatInt .CargoLoaded}}</td>
                  <td>{{formatInt .CargoUnloaded}}</td>
                  <td>{{formatInt .MailLoaded}}</td>
                  <td>{{formatInt .MailUnloaded}}</td>
                  <td class="font-semibold">{{formatInt .CargoKg}}</td>
                  <td>{{formatInt .Movements}}</td>
                </tr>
                {{end}}
              </tbody>
              <tfoot>
                <tr>
                  <th>Total</th>
                  <th>{{formatInt .Year.Embarked}}</th>
                  <th>{{formatInt .Year.Disembarked}}</th>
                  <th>{{formatInt .Year.Transit}}</th>
                  <th>{{formatInt .Year.Transfers}}</th>
                  <th>{{formatInt .Year.Passengers}}</th>
                  <th colspan="4"></th>
                  <th>{{formatInt .Year.CargoKg}}</th>
                  <th>{{formatInt .Year.Movements}}</th>
                </tr>
              </tfoot>
            </table>
          </div>
        </section>

        {{if .Charts}}
        <section class="mb-6" aria-label="Comparative charts">
          <div class="section-heading reveal mb-4">
            <p class="section-kicker">With comparative {{.PriorYear}}</p>
            <h3 class="section-title">Dashboard charts</h3>
            <p class="mt-1 text-sm text-slate-600 dark:text-slate-300">Bars show {{.Year.Year}} values; the line shows {{.PriorYear}}. Numbers are labeled on each month.</p>
          </div>
          <div class="grid gap-4 lg:grid-cols-2">
            {{range .Charts}}
            {{$overlay := .Overlay}}
            <article class="stats-compare-card reveal">
              <h4 class="stats-compare-card__title">{{.Title}}</h4>
              <div class="stats-compare-card__legend">
                <span><i class="stats-compare-card__swatch stats-compare-card__swatch--cur"></i>{{.Current}}</span>
                <span><i class="stats-compare-card__swatch stats-compare-card__swatch--pri"></i>{{.Prior}}</span>
              </div>
              <div class="stats-combo" role="img" aria-label="{{.Title}}">
                <div class="stats-combo__plot">
                  <div class="stats-combo__bars">
                    {{range .Points}}
                    <div class="stats-combo__col" style="--bar-h: {{.CurrentPct}}%;">
                      <span class="stats-combo__cur-val">{{if gt .Current 0}}{{formatCompact .Current}}{{else}}—{{end}}</span>
                      <div class="stats-combo__track">
                        <div class="stats-combo__bar" title="{{.Label}}: {{formatInt .Current}}"></div>
                      </div>
                      <span class="stats-combo__month">{{.Label}}</span>
                      <span class="stats-combo__pri-val" title="Prior year: {{formatInt .Prior}}">{{if gt .Prior 0}}{{formatCompact .Prior}}{{else}}—{{end}}</span>
                    </div>
                    {{end}}
                  </div>
                  {{if $overlay.Polyline}}
                  <svg class="stats-combo__svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
                    <polyline class="stats-combo__line" fill="none" points="{{$overlay.Polyline}}"></polyline>
                    {{range $overlay.Dots}}
                    {{if .HasValue}}
                    <circle class="stats-combo__dot" cx="{{printf "%.2f" .CX}}" cy="{{printf "%.2f" .CY}}" r="1.35"></circle>
                    {{end}}
                    {{end}}
                  </svg>
                  {{end}}
                </div>
              </div>
            </article>
            {{end}}
          </div>
        </section>
        {{end}}
        {{else}}
        <div class="content-section reveal mb-6 p-5 sm:p-6">
          <p class="text-sm text-slate-600 dark:text-slate-300">Monthly detail for {{.Year.Year}} is not in the database yet.</p>
        </div>
        {{end}}

        <div class="flex flex-wrap gap-3">
          <a href="{{.PDFURL}}" class="btn-primary">Download PDF</a>
          <a href="{{.BackURL}}" class="btn-secondary">Back to statistics</a>
        </div>
      </div>
    </div>
  </div>
</main>
{{template "footer" .View}}
{{template "scripts" .View}}