{{define "title"}}Organizations · MeshTender{{end}}
{{define "header"}}
<div class="row g-2 align-items-center">
  <div class="col">
    <h1 class="page-title fs-1">Organizations</h1>
    {{/* A filter-wide total, so a visitor can tell whether they're looking at the whole
         directory or a slice of it. It counts matches rather than rows on screen, which
         keeps it accurate as htmx appends further pages below. */}}
    <div class="page-subtitle" data-testid="org-count">
      {{if .Query}}
        {{.Total}} {{if eq .Total 1}}organization{{else}}organizations{{end}} matching “{{.Query}}”
      {{else}}
        {{.Total}} {{if eq .Total 1}}organization{{else}}organizations{{end}}
      {{end}}
    </div>
  </div>
  {{if .UserName}}
  <div class="col-auto ms-auto d-print-none">
    <a class="btn btn-primary" href="{{.AppURL}}/orgs/new">{{template "icon-plus" "me-1"}}Create organization</a>
  </div>
  {{end}}
</div>
{{end}}

{{/* org-rows renders just the directory rows; shared by the full page and the
     htmx "load more" fragment so appended pages match the first. */}}
{{define "org-rows"}}
{{range .All}}
<a class="list-group-item list-group-item-action" href="/orgs/{{.Slug}}" data-testid="org-row">
  <div class="d-flex align-items-center gap-2">
    <span class="fw-bold">{{.Name}}</span>
    {{if .Region}}<span class="badge bg-secondary-lt">{{.Region}}</span>{{end}}
  </div>
  {{if .Description}}<p class="text-secondary mb-1 mt-1">{{markdowntext .Description}}</p>{{end}}
  <div class="text-secondary small">{{.MemberCount}} member{{if ne .MemberCount 1}}s{{end}} · {{.RepeaterCount}} repeater{{if ne .RepeaterCount 1}}s{{end}}</div>
</a>
{{end}}
{{end}}

{{/* org-more is the "load more" control. It replaces itself (hx-swap outerHTML)
     with the next page's rows followed by a fresh org-more, so the list grows in
     place without scrolling to the top. The cursor already carries sort + query. */}}
{{define "org-more"}}
<div class="list-group-item text-center" id="org-more">
  <button class="btn btn-outline-secondary" hx-get="/orgs?cursor={{.NextCursor}}" hx-target="#org-more" hx-swap="outerHTML">
    Show more organizations
  </button>
</div>
{{end}}

{{/* orgs-frag is the htmx response layout: rows + next control, no page chrome. */}}
{{define "orgs-frag"}}{{template "org-rows" .}}{{if .NextCursor}}{{template "org-more" .}}{{end}}{{end}}

{{define "content"}}
{{if .Error}}<div class="alert alert-danger">{{.Error}}</div>{{end}}
<div class="row row-cards">
  {{/* Search/filters come FIRST in the DOM and move to the right of the list at lg
       (order-lg-last). Source order governs both the mobile stack and the tab order,
       so ordering with CSS alone would leave keyboard and screen-reader users
       traversing every row to reach the control that exists to avoid exactly that. */}}
  <!-- Search + sort (renders right of the list at lg) -->
  <div class="col-lg-3 order-lg-last">
    <div class="card">
      <div class="card-body">
        <form method="get" action="/orgs">
          <div class="mb-3">
            <label class="form-label" for="org-q">Search</label>
            <input type="search" id="org-q" class="form-control" name="q" value="{{.Query}}"
                   placeholder="Name, description, or region" aria-label="Search organizations">
          </div>
          <div class="mb-3">
            <label class="form-label" for="org-sort">Sort by</label>
            <select id="org-sort" class="form-select" name="sort" aria-label="Sort organizations" data-autosubmit>
              <option value="members"{{if eq .Sort "members"}} selected{{end}}>Most members</option>
              <option value="repeaters"{{if eq .Sort "repeaters"}} selected{{end}}>Most repeaters</option>
              <option value="name"{{if eq .Sort "name"}} selected{{end}}>Name (A–Z)</option>
              <option value="newest"{{if eq .Sort "newest"}} selected{{end}}>Newest</option>
            </select>
          </div>
          <button class="btn btn-primary w-100" type="submit">{{template "icon-search" "me-1"}}Search</button>
        </form>
      </div>
    </div>
  </div>

  <!-- The directory itself -->
  <div class="col-lg-9">
    <div class="card">
      {{if .All}}
      <div class="list-group list-group-flush" id="org-list">
        {{template "org-rows" .}}
        {{if .NextCursor}}{{template "org-more" .}}{{end}}
      </div>
      {{else}}
      <div class="card-body"><p class="text-secondary mb-0">{{if .Query}}No organizations match “{{.Query}}”.{{else}}No organizations yet.{{end}}</p></div>
      {{end}}
    </div>
  </div>
</div>
{{end}}