{% extends "erp_base.html" %}

{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831b" />{% 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 %}
      <div 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>
        <span class="cpg-center-name">{{ c.name }}</span>
        <form method="post" action="/cupang/centers/{{ c.id }}/edit" class="cpg-inline-form">
          <input type="hidden" name="active" value="{% if c.active %}0{% else %}1{% endif %}" />
          <button type="submit" class="erp-btn erp-btn-outline cpg-btn-sm"
                  title="{% if c.active %}비활성으로 전환{% else %}활성으로 전환{% endif %}">{% if c.active %}비활성{% else %}활성{% endif %}</button>
        </form>
        <form method="post" action="/cupang/centers/{{ c.id }}/delete" class="cpg-inline-form"
              onsubmit="return confirm('{{ c.name }} 센터를 삭제할까요?');">
          <button type="submit" class="erp-btn erp-btn-danger cpg-btn-sm">삭제</button>
        </form>
      </div>
      {% 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 %}