<section>
  <div class="filter-row" style="display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: end; margin-bottom: 1rem;">
    <div style="flex: 1; min-width:160px;">
      <label for="mmiManufacturer">제작사</label>
      <select id="mmiManufacturer" name="manufacturer"
              hx-get="/sb?section=mmicode"
              hx-include="#mmiManufacturer,#mmiAliasName,#mmiSearch,#mmiGroupCode"
              hx-target="#tabPanel" hx-params="*" hx-trigger="change">
        <option value="" {% if selected_manufacturer=='' %}selected{% endif %}>전체</option>
        {% for m in manufacturers %}
          <option value="{{ m }}" {% if m==selected_manufacturer %}selected{% endif %}>{{ m }}</option>
        {% endfor %}
      </select>
    </div>
    <div style="flex:1; min-width:130px;">
      <label for="mmiAliasName">차량분류</label>
      <select id="mmiAliasName" name="alias_name"
              hx-get="/sb?section=mmicode"
              hx-include="#mmiManufacturer,#mmiAliasName,#mmiSearch,#mmiGroupCode"
              hx-target="#tabPanel" hx-params="*" hx-trigger="change">
        <option value="" {% if selected_alias_name=='' %}selected{% endif %}>전체</option>
        {% for an in alias_names %}
          <option value="{{ an }}" {% if an==selected_alias_name %}selected{% endif %}>{{ an }}</option>
        {% endfor %}
      </select>
    </div>
  </div>
  <div class="search-row" style="display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem;">
    <div style="flex:4;">
      <label for="mmiSearch">검색어</label>
      <input id="mmiSearch" name="q" value="{{ q }}" placeholder="코드/설명/차량 검색"
           hx-get="/sb?section=mmicode"
           hx-trigger="keyup changed delay:200ms, search"
           hx-target="#tabPanel"
           hx-include="#mmiManufacturer,#mmiAliasName,#mmiSearch,#mmiGroupCode">
    </div>
    <div style="flex:1; min-width:110px; text-align:right; align-self:end;">
      <label for="mmiGroupCode" style="margin-bottom:.45em;display:flex;align-items:center;gap:.4em;justify-content:flex-end;">
        <input type="checkbox" id="mmiGroupCode" name="group_code" value="on"
               hx-get="/sb?section=mmicode"
               hx-target="#tabPanel"
               hx-include="#mmiManufacturer,#mmiAliasName,#mmiSearch,#mmiGroupCode"
               hx-trigger="change" {% if group_code=='on' %}checked{% endif %}>
        코드 묶기
      </label>
    </div>
  </div>

  <div class="list" {% if page > 0 %} style="display:contents;" {% endif %}>
    {% if rows %}
      {% for r in rows %}
        <article class="item">
          <header>
            <div class="code">{{ r.code_name }}</div>
            <div class="title">{{ r.code_description or '' }}</div>
          </header>
          <footer>
            <small>{{ r.manufacturer or '—' }}{% if r.alias_name %} · {{ r.alias_name }}{% endif %}{% if r.data_type %} · {{ r.data_type }}{% endif %}{% if r.car_id %} · {{ r.car_id }}{% endif %}</small>
          </footer>
        </article>
      {% endfor %}
    {% else %}
      <p>검색 결과가 없습니다.</p>
    {% endif %}
  </div>
</section>

{% if rows|length >= page_size %}
<div class="load-more-trigger"
      hx-get="/sb?section=mmicode&page={{ page + 1 }}&{{ query_params_string }}"
      hx-swap="outerHTML"
      hx-trigger="revealed">
  <article class="item placeholder">Loading...</article>
</div>
{% endif %}
