<!-- /templates/_search.form.html -->
<form class="tpcms-search" method="get" action="{{action}}">
  {{category_input}}

  <!-- キーワード -->
  <label class="sr-only" for="q">キーワード</label>
  <input id="q" type="search" name="q" value="{{q}}" placeholder="キーワードで探す">

  <!-- 並び替え -->
  <label for="sort" class="sr-only">並び替え</label>
  <select id="sort" name="sort">
    <option value="id" {{sel_sort_id}}>ID</option>
    <option value="created_at" {{sel_sort_created_at}}>登録日</option>
    <option value="updated_at" {{sel_sort_updated_at}}>更新日</option>
  </select>

  <!-- 昇順/降順 -->
  <label for="dir" class="sr-only">方向</label>
  <select id="dir" name="dir">
    <option value="asc" {{sel_dir_asc}}>昇順</option>
    <option value="desc" {{sel_dir_desc}}>降順</option>
  </select>

  <!-- 件数 -->
  <label for="per" class="sr-only">件数</label>
  <select id="per" name="per">
    <option value="20" {{sel_per_20}}>20件</option>
    <option value="50" {{sel_per_50}}>50件</option>
    <option value="100" {{sel_per_100}}>100件</option>
  </select>

  <!-- 並びや件数変更時は 1ページ目に戻す -->
  <input type="hidden" name="page" value="1">
  
  <!-- select,radio,checkboxの検索パーツ出力（フラグが「検索」のみ） -->
  {{filters}}

  <div class="tpcms-actions">
    <button type="submit">検索</button>
    <button type="button" class="tpcms-reset">条件をクリア</button>
  </div>

<script>
(function(){
  var form = document.currentScript.closest('form');
  if(!form) return;

  var selCat = form.querySelector('#category'); // ホーム（未選択あり）の時だけ存在
  var hasSelect = !!(selCat && selCat.tagName.toLowerCase() === 'select');

  function showNotice(){
    var n = form.querySelector('.tpcms-cat-notice');
    if(!n){
      n = document.createElement('p');
      n.className = 'notice tpcms-cat-notice';
      n.textContent = 'カテゴリを選択して下さい';
      form.insertBefore(n, form.firstChild);
    }
    n.style.display = 'block';
  }

  // --- 送信（検索） ---
  // トップページ（カテゴリselectあり）のみ、「未選択なら送信しない＋案内表示」
  form.addEventListener('submit', function(e){
    if (hasSelect && !(selCat.value || '').trim()){
      e.preventDefault();
      showNotice();
      selCat.focus();
    }
  });

  // --- 「条件をクリア」 ---
  var btn = form.querySelector('.tpcms-reset');
  if(btn){
    btn.addEventListener('click', function(e){
      e.preventDefault(); // まず送信しない

      // キーワードをクリア
      var q = form.querySelector('input[name="q"]');
      if (q) q.value = '';

      // フィルタ（select/radio→select, checkbox）をクリア
      form.querySelectorAll('select[name^="f["]').forEach(function(s){ s.value = ''; });
      form.querySelectorAll('input[type="checkbox"][name^="f["]').forEach(function(cb){ cb.checked = false; });

      // 1ページ目へ
      var pg = form.querySelector('input[name="page"]');
      if (pg) pg.value = '1';

      if (hasSelect){
        // トップページ：カテゴリも未選択に戻し、その場に留まる
        selCat.value = '';
        showNotice();
        selCat.focus();
        return; // 送信しない
      }

      // 一覧ページ（カテゴリselectなし）のときだけ送信して反映
      form.submit();
    });
  }
})();
</script>


</form>