[% PROCESS _header.tt %]
[% PROCESS _message.tt %]

<div class="flexrow lg:justify-between">
  [% PROCESS _infobox.tt %]
  <div class="card">
    <div class="head">
      <h3>Options</h3>
    </div>
    <div class="body flexrow flex-nowrap gap-2">
      <form method="GET" action="config.cgi">
        <table>
          <tr>
            <td>Object Type:</td>
          </tr>
          <tr>
            <td>
              <select name='type'>
                <option value='hosts'[%               IF type == 'hosts'               %] selected [% END %]>Hosts</option>
                <option value='hostgroups'[%          IF type == 'hostgroups'          %] selected [% END %]>Host Groups</option>
                <option value='services'[%            IF type == 'services'            %] selected [% END %]>Services</option>
                <option value='servicegroups'[%       IF type == 'servicegroups'       %] selected [% END %]>Service Groups</option>
                <option value='contacts'[%            IF type == 'contacts'            %] selected [% END %]>Contacts</option>
                <option value='contactgroups'[%       IF type == 'contactgroups'       %] selected [% END %]>Contact Groups</option>
                <option value='timeperiods'[%         IF type == 'timeperiods'         %] selected [% END %]>Timeperiods</option>
                <option value='commands'[%            IF type == 'commands'            %] selected [% END %]>Commands</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>
              <input type='submit' value='Update'>
            </td>
          </tr>
        </table>
      </form>
      <table>
        <tr>
          <td>Columns:</td>
        </tr>
        <tr>
          <td>
            <select style="height: 120px;" id='columns_sel' multiple='multiple' onchange="toggleVis(this)"></select>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

<h1 class="mt-5">Configuration</h1>

<div class="card w-full min-w-[420px] mt-5 overflow-hidden">
  <div class="head p-0 justify-between overflow-x-auto h-auto">
    <span class="tabs min-w-[140px] w-52 text-center[% IF dataTitle == 'Hosts' %] active[% END %]"><a class="block" href="config.cgi?type=hosts">Hosts</a></span>
    <span class="tabs min-w-[140px] w-52 text-center[% IF dataTitle == 'Host Groups' %] active[% END %]"><a class="block" href="config.cgi?type=hostgroups">Host Groups</a></span>
    <span class="tabs min-w-[140px] w-52 text-center[% IF dataTitle == 'Services' %] active[% END %]"><a class="block" href="config.cgi?type=services">Services</a></span>
    <span class="tabs min-w-[140px] w-52 text-center[% IF dataTitle == 'Service Groups' %] active[% END %]"><a class="block" href="config.cgi?type=servicegroups">Service Groups</a></span>
    <span class="tabs min-w-[140px] w-52 text-center[% IF dataTitle == 'Contacts' %] active[% END %]"><a class="block" href="config.cgi?type=contacts">Contacts</a></span>
    <span class="tabs min-w-[140px] w-52 text-center[% IF dataTitle == 'Contact Groups' %] active[% END %]"><a class="block" href="config.cgi?type=contactgroups">Contact Groups</a></span>
    <span class="tabs min-w-[140px] w-52 text-center[% IF dataTitle == 'Commands' %] active[% END %]"><a class="block" href="config.cgi?type=commands">Commands</a></span>
    <span class="tabs min-w-[140px] w-52 text-center[% IF dataTitle == 'Time Periods' %] active[% END %]"><a class="block" href="config.cgi?type=timeperiods">Timeperiods</a></span>
  </div>
  <div class="mainTableHeader">
    <div>
      [% IF  !pager || pager.total_pages <= 1 %]
        [% PROCESS _table_search_field.tt ids=["configtable"] %]
      [% END %]
    </div>
    <div>
      [% PROCESS _pager.tt %]
    </div>
    <div>
      [% PROCESS _pager_per_page.tt %]
    </div>
  </div>

  <div class="mainTable [% IF main_table_full %]fullsize[% END %]">
    [% content %]
  </div>

  <div class="mainTableFooter">
    [% PROCESS _pager_total_items.tt %]
  </div>
</div>


<script>
<!--
  var column_select = document.getElementById("columns_sel");
  var columns = new Array();
  jQuery('#configtable TH').each(function(i, col) {
    if(i >= 2 || "[% dataTitle %]" != 'Services') {
      columns.push(col.innerHTML);
    }
  });
  add_options(column_select, columns);
  jQuery("#columns_sel option").prop('selected',true);

  // Set the default "show" mode to that specified by W3C DOM
  // compliant browsers

  var showMode = 'table-cell';

  // However, IE5 at least does not render table cells correctly
  // using the style 'table-cell', but does when the style 'block'
  // is used, so handle this

  if (document.all) showMode='block';

  // This is the function that actually does the manipulation
  function toggleVis(sel){
    var table = jQuery('#configtable')[0];
    lines = table.getElementsByTagName('tr');

    for( var k = 0; k < lines.length; k++) {
      // Headers
      var h = lines[k].getElementsByTagName('th');
      if (h.length == 2 && k == 0) {
        if(sel.options[1].selected && sel.options[2].selected) {
          lines[0].style.display = "";
        } else {
          lines[0].style.display = "none";
        }
      }
      if(h.length == sel.options.length) {
        for (var i = 0; i < sel.options.length; i++) {
          if (sel.options[i].selected == true) {
            h[i].style.display = showMode;
          }
          else {
            h[i].style.display = 'none';
          }
        }
      }

      // Rows
      c = lines[k].getElementsByTagName('td');
      if (c.length == sel.options.length) {
        for (var i = 0; i < sel.options.length; i++) {
          if (sel.options[i].selected == true) {
            c[i].style.display = showMode;
          }
          else {
            c[i].style.display = 'none';
          }
        }
      }
    }
  }
-->
</script>

[% PROCESS _footer.tt %]
