<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="sbManufacturer">제작사</label>
      <select id="sbManufacturer" name="manufacturer" hx-get="/sb" hx-include="this" 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>
    {% if section == "tcms" %}
    <div style="flex: 1; min-width:140px;">
      <label for="sbClassification">분류</label>
      <select id="sbClassification" 
        hx-get="/sb/signals/list" 
        hx-include="#sbManufacturer, #sbClassification, #sbAliasName, #sbSearch, #sbGroupCode" 
        hx-target="#sbList" 
        hx-params="*" 
        hx-trigger="change">
        <option value="" {% if selected_classification=='' %}selected{% endif %}>전체</option>
        {% for cl in signal_classifications %}
          <option value="{{ cl }}" {% if cl==selected_classification %}selected{% endif %}>{{ cl }}</option>
        {% endfor %}
      </select>
    </div>
    <div style="flex:1; min-width:140px;">
      <label for="sbAliasName">차량분류</label>
      <select id="sbAliasName" name="alias_name" hx-get="/sb/signals/list" hx-include="#sbManufacturer, #sbClassification, #sbAliasName, #sbSearch, #sbGroupCode" hx-target="#sbList" 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>
    {% else %}
    <div style="flex: 1; min-width:140px;">
      <label for="sbDevice">장치분류</label>
      <select id="sbDevice" name="device" hx-get="/sb/faults/list" hx-include="#sbManufacturer, #sbDevice, #sbCarType, #sbAliasName, #sbSearch, #sbGroupCode" hx-target="#sbList" hx-params="*" hx-trigger="change">
        <option value="" {% if selected_device=='' %}selected{% endif %}>전체</option>
        {% for d in devices|sort %}
          <option value="{{ d }}" {% if d==selected_device %}selected{% endif %}>{{ d }}</option>
        {% endfor %}
      </select>
    </div>
    <div style="flex: 1; min-width:100px;">
      <label for="sbCarType">호차</label>
      <select id="sbCarType" name="car_type" hx-get="/sb/faults/list" hx-include="#sbManufacturer, #sbDevice, #sbCarType, #sbAliasName, #sbSearch, #sbGroupCode" hx-target="#sbList" hx-params="*" hx-trigger="change">
        <option value="" {% if selected_car_type=='' %}selected{% endif %}>전체</option>
        {% for ct in car_types %}
          <option value="{{ ct }}" {% if ct==selected_car_type %}selected{% endif %}>{{ ct }}</option>
        {% endfor %}
      </select>
    </div>
    <div style="flex:1; min-width:140px;">
      <label for="sbAliasName">차량분류</label>
      <select id="sbAliasName" name="alias_name" hx-get="/sb/faults/list" hx-include="#sbManufacturer, #sbDevice, #sbCarType, #sbAliasName, #sbSearch, #sbGroupCode" hx-target="#sbList" 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>
    {% endif %}
  </div>
  <div class="search-row" style="display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem;">
    <div style="flex:4;">
      <label for="sbSearch">검색어</label>
      <input id="sbSearch" name="q" value="{{ q }}" placeholder="{% if section=='tcms' %}약어/설명 검색{% else %}코드/고장명 검색{% endif %}"
           hx-get="{% if section=='tcms' %}/sb/signals/list{% else %}/sb/faults/list{% endif %}"
           hx-trigger="keyup changed delay:200ms, search"
           hx-target="#sbList"
           hx-include="#sbManufacturer, #sbDevice, #sbCarType, #sbAliasName, #sbClassification, #sbSearch, #sbGroupCode">
    </div>
    <div style="flex:1; min-width:110px; text-align:right; align-self:end;">
      <label for="sbGroupCode" style="margin-bottom:.45em;display:flex;align-items:center;gap:.4em;justify-content:flex-end;">
        <input type="checkbox" id="sbGroupCode" name="group_code" value="on"
               hx-get="{% if section=='tcms' %}/sb/signals/list{% else %}/sb/faults/list{% endif %}"
               hx-target="#sbList"
               hx-include="#sbManufacturer, #sbDevice, #sbCarType, #sbAliasName, #sbClassification, #sbSearch, #sbGroupCode"
               hx-trigger="change" {% if selected_group_code=='on' %}checked{% endif %}>
        코드 묶기
      </label>
    </div>
  </div>

  {% if section == 'tcms' %}
    <div id="sbList" class="card-list"
         hx-get="/sb/signals/list"
         hx-trigger="load"
         hx-include="#sbManufacturer, #sbClassification, #sbAliasName, #sbSearch, #sbGroupCode">
      <!-- Signals 리스트 -->
    </div>
  {% else %}
    <div id="sbList" class="card-list"
         hx-get="/sb/faults/list"
         hx-trigger="load"
         hx-include="#sbManufacturer, #sbDevice, #sbCarType, #sbAliasName, #sbSearch, #sbGroupCode">
      <!-- Faults 리스트 -->
    </div>
  {% endif %}

</section>


