<!-- °Ô½ÃÆÇ ½ÃÀÛ -->
<link rel="StyleSheet" href="/{{$template}}/inc/board/board_{{$com_board.code}}.css" type="text/css">
<script language="javascript" src="/cjs/board.js?com_board_id={{$com_board.code}}&template={{$template}}"></script>


<table border="0" cellspacing="0" cellpadding="0" width="{{$com_board.table_size}}" bgcolor="{{$com_board.table_bgcolor}}" background="{{$com_board.table_background}}">
<tr>
<td>


<!-- Ä«Å×°í¸® -->
<div class="ldh-board-category-wrap">
  <div class="ldh-board-category-title">CATEGORY</div>
  <div class="ldh-board-category-origin" id="ldhBoardCategoryOrigin">
    {{$com_board_category}}
  </div>
  <div class="ldh-board-category-buttons" id="ldhBoardCategoryButtons"></div>
</div>
<!-- //Ä«Å×°í¸® -->


<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr><td bgcolor="#E5E5E5" height="3"></td></tr>
</table>


<table border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse" width="100%" bordercolor="#E5E5E5" class="board">
<!-- ³»¿ë -->
{{$com_board_contents}}
<!-- //³»¿ë -->
</table>


<!-- ÆäÀÌÂ¡ -->
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr>
<td width="62"></td>
<td height="34" align="center" class="paging">
{{$com_board_paging}}
</td>
<td width="62" align="right">
<!-- ±Û¾²±â -->
{{$com_board_write}}
<!-- //±Û¾²±â -->
</td>
</tr>
<tr><td colspan="3" height="1" bgcolor="#E5E5E5"></td></tr>
</table>
<!-- //ÆäÀÌÂ¡ -->


<!-- °Ë»ö -->
{{$com_board_search}}
<!-- //°Ë»ö -->


</td>
</tr>
</table>


<script>
(function(){
  function initCategoryButtons(){
    var origin = document.getElementById('ldhBoardCategoryOrigin');
    var target = document.getElementById('ldhBoardCategoryButtons');
    if(!origin || !target) return;


    var select = origin.querySelector('select');
    if(!select) return;


    var options = select.options;
    var html = '';


    for(var i=0; i<options.length; i++){
      var opt = options[i];
      var text = (opt.text || '').replace(/^\s+|\s+$/g, '');
      var selected = opt.selected ? ' active' : '';


      if(!text) continue;


      html += '<button type="button" class="ldh-cat-btn'+ selected +'" data-index="'+ i +'">'+ text +'</button>';
    }


    target.innerHTML = html;


    var btns = target.querySelectorAll('.ldh-cat-btn');
    for(var j=0; j<btns.length; j++){
      btns[j].onclick = function(){
        var idx = parseInt(this.getAttribute('data-index'), 10);
        if(isNaN(idx)) return;


        select.selectedIndex = idx;


        if(typeof select.onchange === 'function'){
          select.onchange();
        }else if(document.createEvent){
          var evt = document.createEvent('HTMLEvents');
          evt.initEvent('change', true, false);
          select.dispatchEvent(evt);
        }
      };
    }
  }


  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', initCategoryButtons);
  }else{
    initCategoryButtons();
  }
})();
</script>
<!-- °Ô½ÃÆÇ ³¡ -->