{{define "title"}}Your organizations · MeshTender{{end}}
{{define "header"}}
<div class="row g-2 align-items-center">
  <div class="col">
    <div class="page-pretitle">Your network</div>
    <h1 class="page-title fs-1">Organizations</h1>
  </div>
  <div class="col-auto ms-auto d-print-none">
    <div class="btn-list">
      <a class="btn" href="{{.RootURL}}/orgs">{{template "icon-world" "me-1"}}Discover organizations</a>
      <a class="btn btn-primary" href="/orgs/new">{{template "icon-plus" "me-1"}}Create organization</a>
    </div>
  </div>
</div>
{{end}}
{{define "content"}}
{{if .Error}}<div class="alert alert-danger">{{.Error}}</div>{{end}}
{{if .Orgs}}
<div class="row row-cards" data-filter-root>
  {{/* 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. */}}
  <div class="col-lg-3 order-lg-last">
    <div class="card">
      <div class="card-body">
        <div class="mb-3">
          <label class="form-label" for="org-search">Search</label>
          <input type="search" id="org-search" class="form-control" data-filter-search placeholder="Organization name" aria-label="Search your organizations">
        </div>
        <div>
          <label class="form-label" for="org-role">Your role</label>
          <select id="org-role" class="form-select" data-filter-key="role" aria-label="Filter by your role">
            <option value="">Any role</option>
            <option value="admin">Admin</option>
            <option value="member">Member</option>
          </select>
        </div>
      </div>
    </div>
  </div>
  {{/* The list itself; at lg it sits left of the filters above. */}}
  <div class="col-lg-9">
    <div class="card">
      <div class="list-group list-group-flush">
        {{range .Orgs}}
        <a class="list-group-item list-group-item-action" href="/orgs/{{.Org.Slug}}"
           data-filter-item data-name="{{.Org.Name}}" data-role="{{.Role}}">
          <div class="d-flex align-items-center gap-2">
            <span class="fw-bold">{{.Org.Name}}</span>
            {{if .Org.Region}}<span class="badge bg-secondary-lt">{{.Org.Region}}</span>{{end}}
            {{if eq .Role "admin"}}<span class="badge bg-success-lt">admin</span>{{else}}<span class="badge bg-azure-lt">member</span>{{end}}
          </div>
          {{if .Org.Description}}<p class="text-secondary mb-0 mt-1">{{markdowntext .Org.Description}}</p>{{end}}
        </a>
        {{end}}
      </div>
      <div class="card-body text-secondary" data-filter-empty hidden>No organizations match your filters.</div>
    </div>
  </div>
</div>
{{else}}
<div class="empty">
  <div class="empty-icon">{{template "icon-world" ""}}</div>
  <p class="empty-title">No organizations yet</p>
  <p class="empty-subtitle text-secondary">You're not in any organizations yet. Find one near you and contribute to a larger mesh.</p>
  <div class="empty-action">
    <a class="btn btn-primary" href="{{.RootURL}}/orgs">{{template "icon-world" "me-1"}}Discover organizations</a>
    <a class="btn" href="/orgs/new">{{template "icon-plus" "me-1"}}Create one</a>
  </div>
</div>
{{end}}
{{end}}