<div id="repo-list">
  {% if error %}
    <p role="alert" class="status-line status-bad">저장소 목록을 불러오지 못했습니다: {{ error }}</p>
  {% else %}
    <div class="summary">
      <div class="card"><div class="value">{{ summary.total }}</div><div class="label">전체 저장소</div></div>
      <div class="card"><div class="value{% if summary.syncing %} is-accent{% endif %}">{{ summary.syncing }}</div><div class="label">동기화 중</div></div>
      <div class="card"><div class="value is-success">{{ summary.gpg_pass }}</div><div class="label">GPG 검증 통과</div></div>
      <div class="card"><div class="value">{{ summary.total_packages }}</div><div class="label">총 패키지</div></div>
    </div>

    <div class="list-toolbar">
      <!-- 검색창은 표 바깥에 둬서 입력 중 포커스 유지. 정렬 상태([data-state])를 함께 전송 -->
      <input id="repo-search" class="repo-search" type="search" name="q" value="{{ q }}"
             placeholder="저장소 이름 검색"
             hx-get="/repos/table" hx-target="#repo-table-wrap" hx-swap="outerHTML"
             hx-trigger="input changed delay:300ms, search"
             hx-include="[data-state]">
    </div>

    {% include "partials/table_wrap.html" %}
  {% endif %}
</div>
