<section _="on load set #currentSectionRoot.value to '{{ section }}' then if '{{ section }}' != 'fault' then call (function(){ const btn = document.querySelector(`#subtabs .tab-button[data-section='{{ section }}']`); if(btn){ document.querySelectorAll('#subtabs .tab-button').forEach(x=>x.removeAttribute('aria-selected')); btn.setAttribute('aria-selected','true'); } })() end">
  <div class="subtabs seg" id="subtabs" role="tablist">
    <button class="tab-button small" data-section="fault" aria-selected="{{ 'true' if section=='fault' else 'false' }}"
            hx-get="/faults/list?manufacturer={{ manufacturer.slug }}&section=fault"
            hx-target="#faultList"
            _="on click call document.querySelectorAll('#subtabs .tab-button').forEach(x => x.removeAttribute('aria-selected')); then me.setAttribute('aria-selected','true'); then set #currentSection.value to 'fault'; then set #currentSectionRoot.value to 'fault'">
      고장코드
    </button>
    <button class="tab-button small" data-section="tcms" aria-selected="{{ 'true' if section=='tcms' else 'false' }}"
            hx-get="/faults/list?manufacturer={{ manufacturer.slug }}&section=tcms"
            hx-target="#faultList"
            _="on click call document.querySelectorAll('#subtabs .tab-button').forEach(x => x.removeAttribute('aria-selected')); then me.setAttribute('aria-selected','true'); then set #currentSection.value to 'tcms'; then set #currentSectionRoot.value to 'tcms'">
      TCMS 코드
    </button>
    <button class="tab-button small" data-section="emergency" aria-selected="{{ 'true' if section=='emergency' else 'false' }}"
            hx-get="/faults/list?manufacturer={{ manufacturer.slug }}&section=emergency"
            hx-target="#faultList"
            _="on click call document.querySelectorAll('#subtabs .tab-button').forEach(x => x.removeAttribute('aria-selected')); then me.setAttribute('aria-selected','true'); then set #currentSection.value to 'emergency'; then set #currentSectionRoot.value to 'emergency'">
      응급조치요령
    </button>
  </div>

  <div class="grid">
    <div>
      <label for="categorySelect">장치분류 선택</label>
      <select id="categorySelect"
              hx-get="/faults/list?manufacturer={{ manufacturer.slug }}"
              hx-include="#searchBox, #currentSection"
              hx-target="#faultList"
              hx-params="*"
              hx-trigger="change">
        <option value="">전체</option>
        {% for c in categories|sort(attribute='name') %}
          <option value="{{ c.id }}">{{ c.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label for="searchBox">검색어</label>
      <input id="searchBox" name="q" placeholder="검색어 입력"
             hx-get="/faults/list?manufacturer={{ manufacturer.slug }}"
             hx-trigger="keyup changed delay:200ms, search"
             hx-target="#faultList"
             hx-include="#categorySelect, #currentSection"
      >
      <input type="hidden" id="currentSection" name="section" value="fault">
    </div>
  </div>

  <div id="faultList" class="card-list" hx-get="/faults/list?manufacturer={{ manufacturer.slug }}&section={{ section }}" hx-trigger="load">
    <!-- 리스트 -->
  </div>
</section>


