{{define "cards"}}
  {{range .Issues}}
  <div class="card" hx-get="/issues/{{.RepoOwner}}/{{.RepoName}}/{{.Number}}" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true">
    <div class="card-title">{{.Title}}</div>
    <div class="card-meta">
      <span>{{.RepoOwner}}/{{.RepoName}} #{{.Number}}</span>
      {{range .Labels}}
      <span class="label" style="color:#{{.Color}};border:1px solid #{{.Color}}">{{.Name}}</span>
      {{end}}
      {{if .Assignee}}
      <span>{{.Assignee.Login}}</span>
      {{end}}
    </div>
  </div>
  {{end}}
  {{if .HasMore}}
  <div class="scroll-sentinel" hx-get="/issues?page={{.NextPage}}&org={{.SelectedOrg}}&state={{.SelectedState}}&label={{.SelectedLabel}}" hx-trigger="revealed" hx-swap="outerHTML" hx-target="this">
    <div class="spinner htmx-indicator"></div>
  </div>
  {{end}}
{{end}}

{{define "content"}}
<h1>Issues</h1>

<div class="filter-bar">
  <select name="org" hx-get="/issues" hx-trigger="change" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true" hx-include="[name='state'],[name='label']">
    <option value="">All orgs</option>
    {{range .Orgs}}
    <option value="{{.}}" {{if eq . $.SelectedOrg}}selected{{end}}>{{.}}</option>
    {{end}}
  </select>
  <select name="state" hx-get="/issues" hx-trigger="change" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true" hx-include="[name='org'],[name='label']">
    <option value="open" {{if eq .SelectedState "open"}}selected{{end}}>Open</option>
    <option value="closed" {{if eq .SelectedState "closed"}}selected{{end}}>Closed</option>
  </select>
  <input type="text" name="label" placeholder="Filter by label..." value="{{.SelectedLabel}}"
         hx-get="/issues" hx-trigger="input changed delay:400ms" hx-target="#main-content"
         hx-swap="innerHTML" hx-push-url="true" hx-include="[name='org'],[name='state']">
</div>

{{if .Error}}
<p class="empty">{{.Error}}</p>
{{else if not .Issues}}
<p class="empty">No issues found.</p>
{{else}}
<div id="issue-list">
  {{template "cards" .}}
</div>
{{end}}
{{end}}