{{define "filter_bar"}}
{{$selectedGenreIDs := .Genres}}
{{$selectedCount := len $selectedGenreIDs}}
{{$statusOptions := list
  (dict "Value" "" "Label" "Any Status")
  (dict "Value" "airing" "Label" "Airing")
  (dict "Value" "complete" "Label" "Complete")
  (dict "Value" "upcoming" "Label" "Upcoming")
}}
{{$typeOptions := list
  (dict "Value" "" "Label" "Any Type")
  (dict "Value" "tv" "Label" "TV")
  (dict "Value" "movie" "Label" "Movie")
  (dict "Value" "ova" "Label" "OVA")
  (dict "Value" "special" "Label" "Special")
  (dict "Value" "ona" "Label" "ONA")
}}
{{$sortOptions := list
  (dict "Value" "" "Label" "Default")
  (dict "Value" "popularity" "Label" "Popularity")
  (dict "Value" "score" "Label" "Score")
  (dict "Value" "title" "Label" "Title")
  (dict "Value" "start_date" "Label" "Start Date")
  (dict "Value" "episodes" "Label" "Episodes")
}}
<div class="flex flex-wrap items-center gap-3" hx-boost="true" hx-target="#browse-content" hx-swap="outerHTML" hx-push-url="true">
  <div class="min-w-50 flex-1">
    <form action="/browse" method="GET" id="browse-search-form" hx-get="/browse" hx-trigger="submit, input changed delay:350ms from:#search, search from:#search" hx-sync="this:replace">
      <div class="flex gap-2">
        <input
          id="search"
          name="q"
          type="text"
          value="{{.Query}}"
          placeholder="Search anime..."
          class=" w-full bg-background-button px-3 py-2 text-sm text-foreground placeholder-foreground-muted outline-none transition-colors hover:bg-background-button-hover focus:ring-1 focus:ring-accent"
        />
      </div>
      <input id="studio-input" type="hidden" name="studio" value="{{if .Studio}}{{.Studio}}{{end}}">
      {{if .Type}}<input type="hidden" name="type" value="{{.Type}}">{{end}}
      {{if .Status}}<input type="hidden" name="status" value="{{.Status}}">{{end}}
      {{if .OrderBy}}<input type="hidden" name="order_by" value="{{.OrderBy}}">{{end}}
      {{if .Sort}}<input type="hidden" name="sort" value="{{.Sort}}">{{end}}
      <input type="hidden" name="sfw" value="{{.SFW}}">
      {{range $g := .Genres}}<input type="hidden" name="genres" value="{{$g}}">{{end}}
    </form>
  </div>

  <ui-dropdown id="studio-dropdown" class="relative block" data-align="left" data-width="w-72" hx-push-url="false">
    <div data-trigger class="cursor-pointer">
      <button class=" flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
        {{if .Studio}}{{if .StudioName}}{{.StudioName}}{{else}}Studio #{{.Studio}}{{end}}{{else}}Any Studio{{end}}
        <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
      </button>
    </div>
    <div data-content class="hidden absolute z-50 w-72 overflow-hidden bg-background-button rounded-none shadow-card left-0 top-full mt-2">
      <div class="p-2">
        <input id="studio-search" type="text" placeholder="Search studios..." class=" w-full bg-background-sidebar px-3 py-2 text-sm text-foreground placeholder-foreground-muted outline-none focus:ring-1 focus:ring-accent"
          hx-get="/api/jikan/producers"
          hx-vals='{"page":1,"limit":12}'
          hx-trigger="input changed delay:250ms, search"
          hx-include="#studio-search"
          hx-target="#studio-results"
          hx-swap="innerHTML"
          hx-push-url="false"
          hx-headers='{"Accept":"text/html"}'
          name="q"
        />
      </div>
      <div class="flex max-h-72 flex-col overflow-y-auto scrollbar-hidden" id="studio-results" hx-get="/api/jikan/producers?page=1&limit=12" hx-trigger="load" hx-target="this" hx-swap="innerHTML" hx-push-url="false" hx-headers='{"Accept":"text/html"}'>
      </div>
    </div>
  </ui-dropdown>

  <form action="/browse" method="GET" hx-get="/browse" hx-trigger="change" hx-target="#browse-content" hx-select="#browse-content" hx-swap="outerHTML" class=" flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground">
    <input type="hidden" name="q" value="{{.Query}}">
    {{if .Studio}}<input type="hidden" name="studio" value="{{.Studio}}">{{end}}
    {{if .Type}}<input type="hidden" name="type" value="{{.Type}}">{{end}}
    {{if .Status}}<input type="hidden" name="status" value="{{.Status}}">{{end}}
    {{if .OrderBy}}<input type="hidden" name="order_by" value="{{.OrderBy}}">{{end}}
    {{if .Sort}}<input type="hidden" name="sort" value="{{.Sort}}">{{end}}
    <input type="hidden" name="sfw" value="{{.SFW}}" data-sfw-value>
    {{range $g := .Genres}}<input type="hidden" name="genres" value="{{$g}}">{{end}}
    <label class="flex cursor-pointer items-center gap-2">
      <input id="filter-sfw" type="checkbox" class="sr-only" data-checkbox-visual data-sfw-checkbox {{if .SFW}}checked{{end}}>
      <div class="flex h-5 w-5 items-center justify-center border-2 border-white/45 bg-transparent transition-colors">
        <svg class="{{if not .SFW}}hidden {{end}}h-3.5 w-3.5 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
      </div>
      SFW
    </label>
  </form>

  <ui-dropdown class="relative block" data-align="left" data-width="w-48">
    <div data-trigger class="cursor-pointer">
      <button class=" flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
        {{if $selectedCount}}Genres ({{$selectedCount}}){{else}}Genres{{end}}
        <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
      </button>
    </div>
    <div data-content class="hidden absolute z-50 w-48 max-h-80 overflow-y-auto bg-background-button shadow-card left-0 top-full mt-2 scrollbar-hidden">
      <form action="/browse" method="GET" hx-get="/browse" hx-trigger="change" hx-target="#browse-content" hx-select="#browse-content" hx-swap="outerHTML" class="flex flex-col">
        <input type="hidden" name="q" value="{{.Query}}">
        {{if .Studio}}<input type="hidden" name="studio" value="{{.Studio}}">{{end}}
        {{if .Type}}<input type="hidden" name="type" value="{{.Type}}">{{end}}
        {{if .Status}}<input type="hidden" name="status" value="{{.Status}}">{{end}}
        {{if .OrderBy}}<input type="hidden" name="order_by" value="{{.OrderBy}}">{{end}}
        {{if .Sort}}<input type="hidden" name="sort" value="{{.Sort}}">{{end}}
        <input type="hidden" name="sfw" value="{{.SFW}}">
        {{range orderedGenres .GenresList $selectedGenreIDs}}
          {{$genre := .Genre}}
          <label class="flex cursor-pointer items-center gap-3 px-2 py-1.5 text-sm text-foreground-muted hover:bg-surface-hover hover:text-foreground {{if .StartsInactive}}border-t border-white/15 mt-1 pt-2{{end}}">
            <input id="genre-{{$genre.MalID}}" type="checkbox" class="sr-only" name="genres" value="{{$genre.MalID}}" data-checkbox-visual data-genre-visual {{if .Selected}}checked{{end}}>
            <div class="flex h-5 w-5 items-center justify-center border-2 transition-colors {{if .Selected}}border-accent bg-foreground-muted/12{{else}}border-white/45 bg-transparent{{end}}">
              <svg class="{{if not .Selected}}hidden {{end}}h-3.5 w-3.5 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
            </div>
            {{$genre.Name}}
          </label>
        {{end}}
      </form>
    </div>
  </ui-dropdown>

  <ui-dropdown class="relative block" data-align="left" data-width="w-40">
    <div data-trigger class="cursor-pointer">
      <button class="flex items-center gap-2 bg-background-button  px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors">
        {{if eq .Status "airing"}}Airing{{else if eq .Status "complete"}}Complete{{else if eq .Status "upcoming"}}Upcoming{{else}}Any Status{{end}}
        <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
      </button>
    </div>
    <div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-card left-0 top-full mt-2 ">
      <div class="flex flex-col">
        {{range $statusOptions}}
          <a href='{{browseURL $ (dict "status" .Value)}}' class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">{{.Label}}</a>
        {{end}}
      </div>
    </div>
  </ui-dropdown>

  <ui-dropdown class="relative block" data-align="left" data-width="w-40">
    <div data-trigger class="cursor-pointer">
      <button class="flex items-center gap-2 bg-background-button  px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors">
        {{if eq .Type "tv"}}TV{{else if eq .Type "movie"}}Movie{{else if eq .Type "ova"}}OVA{{else if eq .Type "special"}}Special{{else if eq .Type "ona"}}ONA{{else}}Any Type{{end}}
        <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
      </button>
    </div>
    <div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-card left-0 top-full mt-2 ">
      <div class="flex flex-col">
        {{range $typeOptions}}
          <a href='{{browseURL $ (dict "type" .Value)}}' class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">{{.Label}}</a>
        {{end}}
      </div>
    </div>
  </ui-dropdown>

  <div class="flex items-center gap-1">
    <ui-dropdown class="relative block" data-align="left" data-width="w-48">
      <div data-trigger class="cursor-pointer">
        <button class=" flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
          Sort: {{if eq .OrderBy "popularity"}}Popularity{{else if eq .OrderBy "score"}}Score{{else if eq .OrderBy "title"}}Title{{else if eq .OrderBy "start_date"}}Start Date{{else if eq .OrderBy "episodes"}}Episodes{{else}}Default{{end}}
          <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
        </button>
      </div>
      <div data-content class="hidden absolute z-50 w-48 bg-background-button rounded-none shadow-card left-0 top-full mt-2 ">
        <div class="flex flex-col">
          {{range $sortOptions}}
            <a href='{{browseURL $ (dict "order_by" .Value)}}' class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">{{.Label}}</a>
          {{end}}
        </div>
      </div>
    </ui-dropdown>

    <a href='{{browseURL . (dict "sort" (nextSort .Sort))}}' class=" flex h-9 w-9 items-center justify-center bg-background-button text-foreground-muted hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
      {{if eq .Sort "asc"}}
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
      {{else}}
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M19 12l-7 7-7-7" /></svg>
      {{end}}
    </a>
  </div>
</div>
{{end}}
