{% extends "erp_base.html" %}

{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831a" />{% endblock %}

{% block content %}
<section class="cpg">

  <div class="erp-page-actions">
    <a class="erp-btn erp-btn-primary" href="/cupang/">◀◀ 달력</a>
  </div>

  <div class="erp-card cpg-form-card cpg-center-card">

    <!-- 상단: 추가 + 검색 -->
    <div class="cpg-center-bar">
      <form method="post" action="/cupang/centers" class="cpg-center-addform">
        <input class="erp-input cpg-center-addinput" type="text" name="name"
               placeholder="센터명 입력 (예: 대구3)" required autocomplete="off" />
        <button type="submit" class="erp-btn erp-btn-primary">추가</button>
      </form>
      <input class="erp-input cpg-center-search" type="search" id="cpgCenterSearch"
             placeholder="센터 검색" autocomplete="off" />
    </div>

    <div class="cpg-card-head cpg-center-head">
      <h2>센터 목록 <span class="erp-muted" id="cpgCenterCount">({{ centers|length }})</span></h2>
      <span class="erp-muted">이름을 고치면 저장, 쓰지 않는 센터는 비활성 또는 삭제.</span>
    </div>

    <!-- 목록: 여러 열로 한 화면에 -->
    <div class="cpg-center-grid" id="cpgCenterGrid">
      {% for c in centers %}
      <form method="post" action="/cupang/centers/{{ c.id }}/edit"
            class="cpg-center-row {% if not c.active %}is-inactive{% endif %}"
            data-name="{{ c.name|lower }}">
        <span class="cpg-center-dot" title="{% if c.active %}활성{% else %}비활성{% endif %}"></span>
        <input class="erp-input cpg-center-name" type="text" name="name" value="{{ c.name }}" />
        <button type="submit" class="erp-btn erp-btn-outline cpg-btn-sm" title="이름 저장">저장</button>
        <button type="submit" name="active" value="{% if c.active %}0{% else %}1{% endif %}"
                class="erp-btn erp-btn-outline cpg-btn-sm"
                title="{% if c.active %}비활성으로 전환{% else %}활성으로 전환{% endif %}">{% if c.active %}비활성{% else %}활성{% endif %}</button>
        <button type="submit" formaction="/cupang/centers/{{ c.id }}/delete" formnovalidate
                class="erp-btn erp-btn-danger cpg-btn-sm"
                onclick="return confirm('{{ c.name }} 센터를 삭제할까요?');">삭제</button>
      </form>
      {% endfor %}
    </div>

  </div>
</section>

<script>
(function () {
  var box = document.getElementById('cpgCenterSearch');
  var grid = document.getElementById('cpgCenterGrid');
  var count = document.getElementById('cpgCenterCount');
  if (!box || !grid) return;
  var rows = Array.prototype.slice.call(grid.querySelectorAll('.cpg-center-row'));
  box.addEventListener('input', function () {
    var q = box.value.trim().toLowerCase();
    var n = 0;
    rows.forEach(function (r) {
      var hit = !q || (r.dataset.name || '').indexOf(q) !== -1;
      r.style.display = hit ? '' : 'none';
      if (hit) n += 1;
    });
    if (count) count.textContent = '(' + n + ')';
  });
})();
</script>
{% endblock %}