{{define "title"}}Schedule{{end}}
{{define "content"}}
<div class="flex flex-col gap-12 pb-24">
  <section class="flex items-end justify-between gap-6 px-1">
    <div class="flex flex-col gap-2">
      <h1 class="text-4xl font-semibold tracking-tight text-foreground">Schedule</h1>
      <p class="text-lg text-foreground-muted">Shows from your watchlist that are currently airing.</p>
    </div>
    <a href="/watchlist" class="shrink-0 text-sm font-medium text-foreground-muted transition-colors hover:text-foreground">Manage watchlist</a>
  </section>

  <div hx-get="/api/schedule?year={{.ScheduleYear}}&week={{.ScheduleWeek}}" hx-trigger="load" hx-swap="outerHTML">
    {{template "schedule_skeleton"}}
  </div>
</div>
{{end}}

{{define "schedule_section"}}
<section class="flex w-full flex-col gap-8" data-schedule-section>
  {{if eq (len .Animes) 0}}
    <div class="flex flex-col items-center justify-center gap-4 bg-background-surface px-8 py-16 text-center ring-1 ring-[var(--border)]">
      <svg class="h-10 w-10 text-foreground-muted/50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
        <line x1="16" y1="2" x2="16" y2="6"/>
        <line x1="8" y1="2" x2="8" y2="6"/>
        <line x1="3" y1="10" x2="21" y2="10"/>
      </svg>
      <div class="flex max-w-md flex-col gap-1.5">
        <h2 class="text-base font-normal text-foreground">Nothing airing yet</h2>
        <p class="text-sm text-foreground-muted">Add currently airing shows to your watchlist to see their weekly broadcast schedule here.</p>
      </div>
      <div class="mt-2 flex flex-wrap items-center justify-center gap-3">
        <a href="/browse?status=airing" class="inline-flex h-9 items-center justify-center bg-background-button px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Browse airing</a>
        <a href="/discover" class="inline-flex h-9 items-center justify-center bg-transparent px-4 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Discover</a>
        <a href="/watchlist" class="inline-flex h-9 items-center justify-center bg-transparent px-4 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Open watchlist</a>
      </div>
    </div>
  {{else}}
    <div class="flex flex-wrap items-center justify-between gap-6 bg-background-surface px-6 py-5 ring-1 ring-[var(--border)]">
      <div class="flex flex-wrap items-center gap-x-10 gap-y-4 text-sm text-foreground-muted">
        <div class="flex items-center gap-4">
          <span class="text-xs font-semibold uppercase tracking-wider text-foreground-muted">Time</span>
          <div class="inline-flex overflow-hidden ring-1 ring-[var(--border)]">
            <button type="button" data-schedule-setting="timeFormat" data-schedule-value="24" class="h-9 px-4 text-xs font-semibold bg-background-button hover:bg-background-button-hover text-foreground transition-colors">24H</button>
            <button type="button" data-schedule-setting="timeFormat" data-schedule-value="12" class="h-9 px-4 text-xs font-semibold bg-background-button hover:bg-background-button-hover text-foreground transition-colors">12H</button>
          </div>
        </div>

        <div class="flex items-center gap-4">
          <span class="text-xs font-semibold uppercase tracking-wider text-foreground-muted">Images</span>
          <div class="inline-flex overflow-hidden ring-1 ring-[var(--border)]">
            <button type="button" data-schedule-setting="showImages" data-schedule-value="true" class="h-9 px-4 text-xs font-semibold bg-background-button hover:bg-background-button-hover text-foreground transition-colors">Show</button>
            <button type="button" data-schedule-setting="showImages" data-schedule-value="false" class="h-9 px-4 text-xs font-semibold bg-background-button hover:bg-background-button-hover text-foreground transition-colors">Hide</button>
          </div>
        </div>

        <div class="flex items-center gap-4">
          <span class="text-xs font-semibold uppercase tracking-wider text-foreground-muted">Sort</span>
          <select data-schedule-setting="sortBy" class="h-9 bg-background-button px-4 text-xs font-semibold text-foreground ring-1 ring-[var(--border)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
            <option value="time">Time</option>
            <option value="alpha">Alphabetical</option>
            <option value="score">Score</option>
          </select>
        </div>

        <div class="flex items-center gap-4">
          <span class="text-xs font-semibold uppercase tracking-wider text-foreground-muted">Week starts</span>
          <select data-schedule-setting="weekStart" class="h-9 bg-background-button px-4 text-xs font-semibold text-foreground ring-1 ring-[var(--border)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
            <option value="monday">Monday</option>
            <option value="sunday">Sunday</option>
            <option value="saturday">Saturday</option>
          </select>
        </div>
      </div>

      <div class="flex items-center gap-3">
        <button type="button" data-schedule-week-nav="-1" class="inline-flex h-9 items-center justify-center bg-background-button px-4 text-xs font-semibold text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground ring-1 ring-[var(--border)]">← Previous</button>
        <button type="button" data-schedule-week-nav="1" class="inline-flex h-9 items-center justify-center bg-background-button px-4 text-xs font-semibold text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground ring-1 ring-[var(--border)]">Next →</button>
      </div>
    </div>

    <div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" data-schedule-board>
      {{range (list "Monday" "Tuesday" "Wednesday" "Thursday" "Friday" "Saturday" "Sunday")}}
        {{$day := .}}
        <section class="flex min-w-0 flex-col bg-background-surface ring-1 ring-[var(--border)]" data-schedule-day="{{$day}}">
          <header class="flex items-baseline justify-between gap-3 border-b border-[var(--border-light)] px-7 py-6">
            <div class="min-w-0">
              <h2 class="text-lg font-semibold tracking-tight text-foreground" data-schedule-day-label>{{$day}}</h2>
              <div class="mt-1 text-sm text-foreground-muted" data-schedule-date-label>—</div>
            </div>
            <span class="shrink-0 text-sm tabular-nums font-medium text-foreground-muted" data-schedule-count>0</span>
          </header>
          <div class="flex flex-col pb-8 pt-4" data-schedule-day-items></div>
        </section>
      {{end}}
    </div>

    <div class="hidden" data-schedule-items-source>
      {{range .Animes}}
        {{$anime := .}}
        {{$imageUrl := "https://placehold.co/200x300?text=No+Image"}}
        {{if $anime.Images.Webp.LargeImageURL}}
          {{$imageUrl = $anime.Images.Webp.LargeImageURL}}
        {{else if $anime.Images.Jpg.LargeImageURL}}
          {{$imageUrl = $anime.Images.Jpg.LargeImageURL}}
        {{end}}
        <article
          data-schedule-item
          data-mal-id="{{$anime.MalID}}"
          data-title="{{$anime.DisplayTitle}}"
          data-score="{{$anime.Score}}"
          data-broadcast-day="{{$anime.Broadcast.Day}}"
          data-broadcast-time="{{$anime.Broadcast.Time}}"
          data-broadcast-timezone="{{$anime.Broadcast.Timezone}}"
        >
          <div class="flex gap-6 border-b border-[var(--border-light)] px-7 py-6 transition-colors last:border-b-0 hover:bg-[color:var(--color-surface-hover)]">
            <a href="/anime/{{$anime.MalID}}" class="shrink-0 overflow-hidden bg-background-surface" data-schedule-poster>
              <img src="{{$imageUrl}}" alt="{{$anime.DisplayTitle}}" class="h-28 w-20 object-cover" loading="lazy" />
            </a>

            <div class="flex min-w-0 flex-1 flex-col justify-center gap-3">
              <div class="flex items-start justify-between gap-4">
                <a href="/anime/{{$anime.MalID}}" class="min-w-0">
                  <h3 class="line-clamp-2 text-lg font-semibold leading-tight tracking-tight text-foreground">{{$anime.DisplayTitle}}</h3>
                </a>
                <button
                  type="button"
                  data-watchlist-toggle
                  data-mal-id="{{$anime.MalID}}"
                  data-watchlist-title="{{$anime.DisplayTitle}}"
                  data-watchlist-state="{{if (index $.WatchlistMap $anime.MalID)}}in{{else}}out{{end}}"
                  class="mt-1 shrink-0 text-foreground-muted transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50 {{if (index $.WatchlistMap $anime.MalID)}}!text-accent{{end}}"
                  aria-label="{{if (index $.WatchlistMap $anime.MalID)}}Remove from Watchlist{{else}}Add to Watchlist{{end}}"
                >
                  <svg class="size-5 watchlist-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
                </button>
              </div>

              <div class="flex items-center gap-5 text-base text-foreground-muted">
                <span class="tabular-nums font-medium" data-schedule-time>Unknown</span>
                {{if $anime.Score}}
                  <span class="flex items-center gap-1.5 tabular-nums font-medium" title="Score">
                    <svg class="h-4 w-4 fill-accent" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                    <span>{{$anime.Score}}</span>
                  </span>
                {{end}}
              </div>
            </div>
          </div>
        </article>
      {{end}}
    </div>
  {{end}}
</section>
{{end}}

{{define "schedule_section_scraped"}}
<section class="flex w-full flex-col gap-8" data-schedule-section>
  {{if eq (len .ScheduleDays) 0}}
    <div class="flex flex-col items-center justify-center gap-4 bg-background-surface px-8 py-16 text-center ring-1 ring-[var(--border)]">
      <svg class="h-10 w-10 text-foreground-muted/50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"/>
        <polyline points="12 6 12 12 16 14"/>
      </svg>
      <div class="flex max-w-md flex-col gap-1.5">
        <h2 class="text-base font-normal text-foreground">No schedule data</h2>
        <p class="text-sm text-foreground-muted">Could not load the schedule feed right now.</p>
      </div>
    </div>
  {{else}}
    <div class="flex items-center justify-end gap-2">
      <a href="/schedule?year={{.PrevYear}}&week={{.PrevWeek}}" class="inline-flex h-8 items-center justify-center bg-background-button px-3 text-xs font-medium text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent ring-1 ring-[var(--border)]">← Previous</a>
      <a href="/schedule?year={{.NextYear}}&week={{.NextWeek}}" class="inline-flex h-8 items-center justify-center bg-background-button px-3 text-xs font-medium text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent ring-1 ring-[var(--border)]">Next →</a>
    </div>

    <div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      {{range .ScheduleDays}}
        <section class="flex min-w-0 flex-col bg-background-surface ring-1 ring-[var(--border)]">
          <header class="flex items-center justify-between gap-3 border-b border-[var(--border-light)] bg-background px-7 py-6">
            <div class="min-w-0">
              <div class="text-xs font-semibold uppercase tracking-wider text-foreground-muted">{{.DateLabel}}</div>
              <h2 class="mt-1 text-lg font-semibold leading-tight tracking-tight text-foreground">{{.WeekdayLabel}}</h2>
            </div>
          </header>
          <div class="flex flex-col pb-8 pt-4">
            {{if eq (len .Entries) 0}}
              <div class="flex min-h-32 items-center justify-center px-7 py-10 text-center text-sm text-foreground-muted">No releases scheduled</div>
            {{else}}
              {{range .Entries}}
                <a href="/browse?q={{urlquery .Title}}" class="group flex gap-6 border-b border-[var(--border-light)] px-7 py-6 transition-colors last:border-b-0 hover:bg-[color:var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
                  <div class="relative aspect-2/3 h-28 shrink-0 overflow-hidden bg-background-surface">
                    {{if .ImageURL}}
                      <img src="{{.ImageURL}}" alt="{{.Title}}" class="h-full w-full object-cover" loading="lazy" />
                    {{end}}
                    <div class="absolute inset-0 bg-linear-to-t from-black/40 via-transparent to-transparent opacity-70"></div>
                  </div>

                  <div class="flex min-w-0 flex-1 flex-col justify-center">
                    <div class="flex flex-wrap items-center gap-3">
                      <span class="bg-background-button px-2.5 py-1 text-xs font-semibold tabular-nums text-foreground">{{.LocalTime}}</span>
                      <span class="bg-background-button px-2.5 py-1 text-xs font-semibold text-foreground-muted">{{.EpisodeText}}</span>
                      <span class="ml-auto bg-accent px-2 py-0.5 text-[10px] font-bold text-black/95">{{.AirType}}</span>
                    </div>

                    <h3 class="mt-3 line-clamp-2 text-lg font-semibold leading-tight tracking-tight text-foreground">{{.Title}}</h3>
                    <span class="mt-auto pt-4 text-sm font-medium text-foreground-muted transition-colors group-hover:text-foreground">View details →</span>
                  </div>
                </a>
              {{end}}
            {{end}}
          </div>
        </section>
      {{end}}
    </div>
  {{end}}
</section>
{{end}}

{{define "schedule_skeleton"}}
<div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  {{range (seq 7)}}
    <div class="flex flex-col bg-background-surface ring-1 ring-[var(--border)]">
      <div class="flex items-baseline justify-between border-b border-[var(--border-light)] px-7 py-6">
        <div class="flex flex-col gap-2">
          <div class="h-6 w-32 bg-foreground-muted/10 animate-pulse"></div>
          <div class="h-4 w-20 bg-foreground-muted/10 animate-pulse"></div>
        </div>
        <div class="h-4 w-10 bg-foreground-muted/10 animate-pulse"></div>
      </div>
      <div class="flex flex-col pb-8 pt-4">
        {{range (seq 3)}}
          <div class="flex gap-6 px-7 py-6 border-b border-[var(--border-light)] last:border-b-0">
            <div class="h-28 w-20 shrink-0 bg-foreground-muted/10 animate-pulse"></div>
            <div class="flex flex-1 flex-col justify-center gap-4">
              <div class="h-5 w-full bg-foreground-muted/10 animate-pulse"></div>
              <div class="h-4 w-2/3 bg-foreground-muted/10 animate-pulse opacity-60"></div>
            </div>
          </div>
        {{end}}
      </div>
    </div>
  {{end}}
</div>
{{end}}