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

<!-- add some classes required in plugins so they will be rendered into the css files -->
<div class="hidden pt-px pb-px"></div>

<div class="flexrow justify-between">
  [% PROCESS _infobox.tt %]
  <div class="card min-w-[150px]">
    <div class="body">
      <table class="cellspacing">
        <tr>
          <th class="align-top">Switch Theme</th>
          <td>
            <select multiple onchange="switchTheme(this)" size="[% c.config.themes.size %]" style="scrollbar-width: none;" class="w-full">
              [% FOREACH t = c.config.themes %]
                <option value="[% t | html %]"[% IF t == theme %] selected[% END %]>[% t | html %]</option>
              [% END %]
            </select>
          </td>
        </tr>
        <tr>
          <th class="align-top">Filter Boxes</th>
          <td>
            <input type="text" class="w-full min-w-[120px] deletable" id="filterboxes" onkeyup="filterBoxes(this)">
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

<div class="flexrow flex-nowrap mt-5">
  <div class="card overflow-hidden w-72 js-box">
    <div class="head justify-between">
      <h3>Icons</h3>
      [% PROCESS _table_search_field.tt ids=["iconsBox"] %]
    </div>
    <div class="actionbox" id="iconsBox">
      <!-- icons are updated automatically by running ./script/theme-icons-update.pl (do not change manually) icons:-->
      <div><a class="flex" href="#"><i class="fa-solid fa-align-center"></i>fa-solid fa-align-center</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-angle-right"></i>fa-solid fa-angle-right</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-arrow-left"></i>fa-solid fa-arrow-left</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-arrow-right"></i>fa-solid fa-arrow-right</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-arrow-right-to-bracket"></i>fa-solid fa-arrow-right-to-bracket</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-arrow-rotate-left"></i>fa-solid fa-arrow-rotate-left</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-arrow-turn-down"></i>fa-solid fa-arrow-turn-down</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-arrow-up-right-from-square"></i>fa-solid fa-arrow-up-right-from-square</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-arrows-rotate"></i>fa-solid fa-arrows-rotate</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-arrows-turn-to-dots"></i>fa-solid fa-arrows-turn-to-dots</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-backward-step"></i>fa-solid fa-backward-step</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-bars"></i>fa-solid fa-bars</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-bell"></i>fa-solid fa-bell</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-bell-slash"></i>fa-solid fa-bell-slash</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-bolt"></i>fa-solid fa-bolt</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-broom"></i>fa-solid fa-broom</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-bug"></i>fa-solid fa-bug</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-business-time"></i>fa-solid fa-business-time</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-chart-line"></i>fa-solid fa-chart-line</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-chart-simple"></i>fa-solid fa-chart-simple</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-check"></i>fa-solid fa-check</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-check round small green"></i>fa-solid fa-check round small green</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-chevron-down"></i>fa-solid fa-chevron-down</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-circle-pause"></i>fa-solid fa-circle-pause</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-circle-play"></i>fa-solid fa-circle-play</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-circle-question"></i>fa-solid fa-circle-question</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-circle-xmark"></i>fa-solid fa-circle-xmark</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-clipboard"></i>fa-solid fa-clipboard</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-clipboard-question"></i>fa-solid fa-clipboard-question</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-clock"></i>fa-solid fa-clock</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-clock-rotate-left small"></i>fa-solid fa-clock-rotate-left small</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-clone"></i>fa-solid fa-clone</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-code"></i>fa-solid fa-code</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-code-commit"></i>fa-solid fa-code-commit</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-comment"></i>fa-solid fa-comment</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-copy small"></i>fa-solid fa-copy small</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-cube small"></i>fa-solid fa-cube small</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-ellipsis-vertical"></i>fa-solid fa-ellipsis-vertical</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-envelope"></i>fa-solid fa-envelope</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-exclamation round small red"></i>fa-solid fa-exclamation round small red</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-exclamation round small yellow"></i>fa-solid fa-exclamation round small yellow</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-expand"></i>fa-solid fa-expand</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-eye small"></i>fa-solid fa-eye small</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-file-circle-check"></i>fa-solid fa-file-circle-check</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-file-circle-plus"></i>fa-solid fa-file-circle-plus</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-file-code"></i>fa-solid fa-file-code</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-folder-open"></i>fa-solid fa-folder-open</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-folder-tree"></i>fa-solid fa-folder-tree</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-house"></i>fa-solid fa-house</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-link small"></i>fa-solid fa-link small</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-lock"></i>fa-solid fa-lock</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-magnifying-glass-arrow-right"></i>fa-solid fa-magnifying-glass-arrow-right</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-magnifying-glass-minus"></i>fa-solid fa-magnifying-glass-minus</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-magnifying-glass-plus"></i>fa-solid fa-magnifying-glass-plus</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-maximize"></i>fa-solid fa-maximize</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-moon"></i>fa-solid fa-moon</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-pencil small"></i>fa-solid fa-pencil small</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-person-digging"></i>fa-solid fa-person-digging</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-plus"></i>fa-solid fa-plus</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-power-off round small red"></i>fa-solid fa-power-off round small red</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-question round small"></i>fa-solid fa-question round small</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-rectangle-list"></i>fa-solid fa-rectangle-list</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-reply-all"></i>fa-solid fa-reply-all</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-right-from-bracket"></i>fa-solid fa-right-from-bracket</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-rocket"></i>fa-solid fa-rocket</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-save"></i>fa-solid fa-save</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-shuffle"></i>fa-solid fa-shuffle</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-sitemap"></i>fa-solid fa-sitemap</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-square-caret-left"></i>fa-solid fa-square-caret-left</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-square-minus false;"></i>fa-solid fa-square-minus false;</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-tag"></i>fa-solid fa-tag</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-thumbtack"></i>fa-solid fa-thumbtack</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-trash"></i>fa-solid fa-trash</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-truck-fast"></i>fa-solid fa-truck-fast</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-up-right-and-down-left-from-center"></i>fa-solid fa-up-right-and-down-left-from-center</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-user-pen"></i>fa-solid fa-user-pen</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-volume-high small"></i>fa-solid fa-volume-high small</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-wand-magic-sparkles"></i>fa-solid fa-wand-magic-sparkles</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-wrench small"></i>fa-solid fa-wrench small</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-xmark"></i>fa-solid fa-xmark</a></div>
      <div><a class="flex" href="#"><i class="fa-solid fa-xmark round small red"></i>fa-solid fa-xmark round small red</a></div>
      <div><a class="flex" href="#"><i class="uil uil-angle-double-left"></i>uil uil-angle-double-left</a></div>
      <div><a class="flex" href="#"><i class="uil uil-angle-double-right"></i>uil uil-angle-double-right</a></div>
      <div><a class="flex" href="#"><i class="uil uil-angle-double-up"></i>uil uil-angle-double-up</a></div>
      <div><a class="flex" href="#"><i class="uil uil-angle-down"></i>uil uil-angle-down</a></div>
      <div><a class="flex" href="#"><i class="uil uil-angle-left"></i>uil uil-angle-left</a></div>
      <div><a class="flex" href="#"><i class="uil uil-angle-right"></i>uil uil-angle-right</a></div>
      <div><a class="flex" href="#"><i class="uil uil-angle-up"></i>uil uil-angle-up</a></div>
      <div><a class="flex" href="#"><i class="uil uil-arrow-from-top"></i>uil uil-arrow-from-top</a></div>
      <div><a class="flex" href="#"><i class="uil uil-arrows-shrink-v"></i>uil uil-arrows-shrink-v</a></div>
      <div><a class="flex" href="#"><i class="uil uil-band-aid"></i>uil uil-band-aid</a></div>
      <div><a class="flex" href="#"><i class="uil uil-bolt"></i>uil uil-bolt</a></div>
      <div><a class="flex" href="#"><i class="uil uil-bookmark"></i>uil uil-bookmark</a></div>
      <div><a class="flex" href="#"><i class="uil uil-brush-alt"></i>uil uil-brush-alt</a></div>
      <div><a class="flex" href="#"><i class="uil uil-check"></i>uil uil-check</a></div>
      <div><a class="flex" href="#"><i class="uil uil-cog"></i>uil uil-cog</a></div>
      <div><a class="flex" href="#"><i class="uil uil-columns"></i>uil uil-columns</a></div>
      <div><a class="flex" href="#"><i class="uil uil-copy"></i>uil uil-copy</a></div>
      <div><a class="flex" href="#"><i class="uil uil-corner-down-right-alt"></i>uil uil-corner-down-right-alt</a></div>
      <div><a class="flex" href="#"><i class="uil uil-data-sharing"></i>uil uil-data-sharing</a></div>
      <div><a class="flex" href="#"><i class="uil uil-dialpad"></i>uil uil-dialpad</a></div>
      <div><a class="flex" href="#"><i class="uil uil-draggabledots"></i>uil uil-draggabledots</a></div>
      <div><a class="flex" href="#"><i class="uil uil-envelope-add"></i>uil uil-envelope-add</a></div>
      <div><a class="flex" href="#"><i class="uil uil-external-link-alt"></i>uil uil-external-link-alt</a></div>
      <div><a class="flex" href="#"><i class="uil uil-eye-slash"></i>uil uil-eye-slash</a></div>
      <div><a class="flex" href="#"><i class="uil uil-fast-mail"></i>uil uil-fast-mail</a></div>
      <div><a class="flex" href="#"><i class="uil uil-file-export"></i>uil uil-file-export</a></div>
      <div><a class="flex" href="#"><i class="uil uil-file-plus-alt"></i>uil uil-file-plus-alt</a></div>
      <div><a class="flex" href="#"><i class="uil uil-filter"></i>uil uil-filter</a></div>
      <div><a class="flex" href="#"><i class="uil uil-folder"></i>uil uil-folder</a></div>
      <div><a class="flex" href="#"><i class="uil uil-folder-minus"></i>uil uil-folder-minus</a></div>
      <div><a class="flex" href="#"><i class="uil uil-folder-open"></i>uil uil-folder-open</a></div>
      <div><a class="flex" href="#"><i class="uil uil-icons"></i>uil uil-icons</a></div>
      <div><a class="flex" href="#"><i class="uil uil-info round"></i>uil uil-info round</a></div>
      <div><a class="flex" href="#"><i class="uil uil-key-skeleton"></i>uil uil-key-skeleton</a></div>
      <div><a class="flex" href="#"><i class="uil uil-left-arrow-to-left small"></i>uil uil-left-arrow-to-left small</a></div>
      <div><a class="flex" href="#"><i class="uil uil-lightbulb"></i>uil uil-lightbulb</a></div>
      <div><a class="flex" href="#"><i class="uil uil-link"></i>uil uil-link</a></div>
      <div><a class="flex" href="#"><i class="uil uil-link-h"></i>uil uil-link-h</a></div>
      <div><a class="flex" href="#"><i class="uil uil-list-ul"></i>uil uil-list-ul</a></div>
      <div><a class="flex" href="#"><i class="uil uil-lock-open-alt"></i>uil uil-lock-open-alt</a></div>
      <div><a class="flex" href="#"><i class="uil uil-newspaper"></i>uil uil-newspaper</a></div>
      <div><a class="flex" href="#"><i class="uil uil-picture"></i>uil uil-picture</a></div>
      <div><a class="flex" href="#"><i class="uil uil-placeholder"></i>uil uil-placeholder</a></div>
      <div><a class="flex" href="#"><i class="uil uil-plus"></i>uil uil-plus</a></div>
      <div><a class="flex" href="#"><i class="uil uil-plus-circle"></i>uil uil-plus-circle</a></div>
      <div><a class="flex" href="#"><i class="uil uil-puzzle-piece"></i>uil uil-puzzle-piece</a></div>
      <div><a class="flex" href="#"><i class="uil uil-save"></i>uil uil-save</a></div>
      <div><a class="flex" href="#"><i class="uil uil-schedule"></i>uil uil-schedule</a></div>
      <div><a class="flex" href="#"><i class="uil uil-search"></i>uil uil-search</a></div>
      <div><a class="flex" href="#"><i class="uil uil-server"></i>uil uil-server</a></div>
      <div><a class="flex" href="#"><i class="uil uil-share-alt"></i>uil uil-share-alt</a></div>
      <div><a class="flex" href="#"><i class="uil uil-signout"></i>uil uil-signout</a></div>
      <div><a class="flex" href="#"><i class="uil uil-sliders-v"></i>uil uil-sliders-v</a></div>
      <div><a class="flex" href="#"><i class="uil uil-sliders-v-alt"></i>uil uil-sliders-v-alt</a></div>
      <div><a class="flex" href="#"><i class="uil uil-square-full"></i>uil uil-square-full</a></div>
      <div><a class="flex" href="#"><i class="uil uil-star"></i>uil uil-star</a></div>
      <div><a class="flex" href="#"><i class="uil uil-sync"></i>uil uil-sync</a></div>
      <div><a class="flex" href="#"><i class="uil uil-table"></i>uil uil-table</a></div>
      <div><a class="flex" href="#"><i class="uil uil-thunderstorm"></i>uil uil-thunderstorm</a></div>
      <div><a class="flex" href="#"><i class="uil uil-times"></i>uil uil-times</a></div>
      <div><a class="flex" href="#"><i class="uil uil-times-circle"></i>uil uil-times-circle</a></div>
      <div><a class="flex" href="#"><i class="uil uil-trash-alt"></i>uil uil-trash-alt</a></div>
      <div><a class="flex" href="#"><i class="uil uil-trowel"></i>uil uil-trowel</a></div>
      <div><a class="flex" href="#"><i class="uil uil-user"></i>uil uil-user</a></div>
      <div><a class="flex" href="#"><i class="uil uil-users-alt"></i>uil uil-users-alt</a></div>
      <div><a class="flex" href="#"><i class="uil uil-volume"></i>uil uil-volume</a></div>
      <div><a class="flex" href="#"><i class="uil uil-volume-mute"></i>uil uil-volume-mute</a></div>
      <div><a class="flex" href="#"><i class="uil uil-web-section-alt"></i>uil uil-web-section-alt</a></div>
<!--icons: end of "do not change manually" -->
      <div>
        <a>
        <div class="spinner mr-2"></div>Spinner
        </a>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-2 2xl:grid-cols-3 gap-5 h-fit">
    <div class="card min-w-[300px] js-box">
      <div class="head">
        <h3>Logos</h3>
      </div>
      <div class="body">
        <table>
          <tr>
            <th>small</th>
            <td><img src="[% url_prefix %]themes/[% theme %]/images/logo_thruk_small.png" alt="Thruk" title="Thruk"></td>
          </tr>
          <tr>
            <th>normal</th>
            <td><img src="[% url_prefix %]themes/[% theme %]/images/logo_thruk.png" alt="Thruk" title="Thruk"></td>
          </tr>
        </table>
      </div>
    </div>

    <div class="card min-w-[300px] js-box">
      <div class="head">
        <h3>.card</h3>
      </div>
      <div class="body">
        <table>
          <tr>
            <th><a href='#'>table header</a></th>
            <th><a href='#'>table header</a></th>
          </tr>
          <tr>
            <td><a href='#'>table row</a></td>
            <td><a href='#'>table row</a></td>
          </tr>
        </table>
      </div>
    </div>

    <div class="card shadow-float min-w-[300px] js-box">
      <div class="head">
        <h3>.card .shadow-float</h3>
      </div>
      <div class="body">
        <table>
          <tr><td><span class="textBody">.textBody</span></td></tr>
          <tr><td><span class="textCard">.textCard</span></td></tr>
          <tr><td><span class="textTH">.textTH</span></td></tr>
        </table>
      </div>
    </div>

    <div class="card min-w-[400px] text-center js-box">
      <div class="head">
        <h3 class="text-left">Host Colors</h3>
      </div>
      <table class="w-full">
        <tr>
          <td class="UP">UP</td>
          <td class="UNREACHABLE">UNREACHABLE</td>
          <td class="DOWN">DOWN</td>
          <td class="PENDING">PENDING</td>
        </tr>
      </table>
    </div>

    <div class="card min-w-[400px] text-center js-box">
      <div class="head">
        <h3 class="text-left">Service Colors</h3>
      </div>
      <table class="w-full">
        <tr>
          <td class="OK">OK</td>
          <td class="WARNING">WARNING</td>
          <td class="UNKNOWN">UNKNOWN</td>
          <td class="CRITICAL">CRITICAL</td>
          <td class="PENDING">PENDING</td>
        </tr>
      </table>
    </div>

    <div class="card js-box">
      <div class="head">
        <h3>Progressbar</h3>
      </div>
      <div class="body">
        <div class="progressbar">
          <div class="description textBody font-semibold" style="width: 90px;">Description</div>
          <div class="bar" style="height: 30px; width: 300px;">
            <div class="UP" style="width:20%"></div>
            <div class="WARNING" style="width:25%"></div>
            <div class="CRITICAL" style="width:10%"></div>
          </div>
          <div class="percent"><span>66%</span></div>
        </div>
        <div class="progressbar w-full mt-5" style="height:20px;">
          <div class="bar" style="height:20px;"><div style="width:33%; height:20px;"></div></div>
        </div>
      </div>
    </div>

    <div class="card w-fit js-box">
      <div class="head">
        <h3>Buttons</h3>
      </div>
      <div>
        <table class="w-full innercellborder cellspacing text-center">
          <tr>
            <th></th>
            <th>small</th>
            <th>(no class)</th>
            <th>big</th>
            <th>large</th>
          </tr>
          <tr>
            <th>default</th>
            <td></td>
            <td><button>default</button></td>
            <td><button class="big">big</button></td>
            <td></td>
          </tr>
          <tr>
            <th>with icon</th>
            <td></td>
            <td><button><i class="uil uil-grin"></i>default</button></td>
            <td><button class="big"><i class="uil uil-grin"></i>big</button></td>
            <td></td>
          </tr>
          <tr>
            <th>.round</th>
            <td><button class="small round"><i class="uil uil-grin"></i></button></td>
            <td><button class="round"><i class="uil uil-grin"></i></button></td>
            <td><button class="big round"><i class="uil uil-grin"></i></button></td>
            <td></td>
          </tr>
          <tr>
            <th>.green</th>
            <td></td>
            <td><button class="green">default</button></td>
            <td><button class="big green">big</button></td>
            <td></td>
          </tr>
          <tr>
            <th>.red</th>
            <td></td>
            <td><button class="red">default</button></td>
            <td><button class="big red">big</button></td>
            <td></td>
          </tr>
          <tr>
            <th>.iconOnly</th>
            <td></td>
            <td><button class="iconOnly"><i class="uil uil-grin"></i></button></td>
            <td><button class="big iconOnly"><i class="uil uil-grin"></i></button></td>
            <td><button class="large iconOnly"><i class="uil uil-grin"></i></button></td>
          </tr>
          <tr>
            <th>.iconOnly</th>
            <td><button class="iconOnly"><i class="fa-solid fa-check round small green"></i></button></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th>.iconOnly submit</th>
            <td><button class="iconOnly" type="submit"><i class="fa-solid fa-check round small green"></i></button></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th>buttongroup</th>
            <td></td>
            <td colspan=3>
              <div class="buttongroup">
                <button>btn1</button>
                <button>btn2</button>
                <button>btn3</button>
              </div>
            </td>
          </tr>
          <tr>
            <th>disabled</th>
            <td></td>
            <td><button disabled>disabled</button></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th>.spinner</th>
            <td></td>
            <td colspan=3>
              <button>
                <div class="spinner mr-1"></div>processing commands...
              </button>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <div class="card w-fit js-box">
      <div class="head">
        <h3>Peer Buttons</h3>
      </div>
      <div class="backends">
        <table class="w-full innercellborder cellspacing text-center">
          <tr>
            <th>Up</th>
            <td><button class="button_peer button_peerUP w-30">Up</button></td>
          </tr>
          <tr>
            <th>Down</th>
            <td><button class="button_peer button_peerDOWN w-30">Down</button></td>
          </tr>
          <tr>
            <th>Disabled</th>
            <td><button class="button_peer button_peerDIS w-30">Disabled</button></td>
          </tr>
          <tr>
            <th>Hidden</th>
            <td><button class="button_peer button_peerHID w-30">Hidden</button></td>
          </tr>
        </table>
      </div>
    </div>

    <div class="card w-fit js-box">
      <div class="head">
        <h3>Badges</h3>
      </div>
      <div class="body">
        <table class="cellspacing">
          <tr>
            <th>OK</th>
            <td><div class="badge OK">OK</button></td>
            <td><div class="badge OK text-left"><i class="fa-solid fa-check"></i>Success</div></td>
          </tr>
          <tr>
            <th>WARNING</th>
            <td><div class="badge WARNING">WARNING</button></td>
          </tr>
          <tr>
            <th>CRITICAL</th>
            <td><div class="badge CRITICAL">CRITICAL</button></td>
            <td><div class="badge CRITICAL text-left"><i class="fa-solid fa-exclamation"></i>Failed</div></td>
          </tr>
          <tr>
            <th>UNKNOWN</th>
            <td><div class="badge UNKNOWN">UNKNOWN</button></td>
          </tr>
          <tr>
            <th>PENDING</th>
            <td><div class="badge PENDING">PENDING</button></td>
          </tr>
          <tr>
            <th>none</th>
            <td><div class="badge">none</button></td>
            <td><div class="badge text-left"><div class="spinner"></div>Running</div></td>
          </tr>
        </table>
      </div>
    </div>

    <div class="card js-box">
      <div class="head">
        <h3>Forms</h3>
      </div>
      <div class="body">
        <form>
          <table class="cellspacing">
            <tr>
              <th>Textfield</th>
              <td><input type="text" class="w-full"></td>
            </tr>
            <tr>
              <th class="required">Invalid</th>
              <td><input type="text" class="w-full" name="test" required></td>
            </tr>
            <tr>
              <th>Disabled</th>
              <td><input type="text" value="disabled text" class="w-full" disabled></td>
            </tr>
            <tr>
              <th>Password</th>
              <td><input type="password" class="w-full"></td>
            </tr>
            <tr>
              <th>Search</th>
              <td><input type="search" class="deletable" class="w-full"></td>
            </tr>
            <tr>
              <th>Search II</th>
              <td>
                <div class="deleteicon ">
                  <input type="search" name="v" class="deletable autosubmit headersearch js-autoexpand js-suggest-advanced expanded" id="header-search" placeholder="search..." autocomplete="off">
                  <button type="reset" style="">×</button>
                </div>
              </td>
            </tr>
            <tr>
              <th>Submit</th>
              <td>
                <div class="flexrow gap-2 flex-nowrap">
                  <input type="submit" value="submit">
                  <input type="submit" value="disabled" disabled>
                </div>
              </td>
            </tr>
            <tr>
              <th>Dropdown</th>
              <td>
                <select>
                  <optgroup label="optgroup">
                    <option>option</option>
                    <option>option</option>
                  </optgroup>
                  <option>option</option>
                  <option>option</option>
                </select>
              </td>
            </tr>
            <tr>
              <th>Radiobox</th>
              <td>
                <div class="flexrow gap-0 flex-nowrap">
                  <input type="radio" name="radio" value="1" checked><label class="ml-1">Option 1</label>
                  <input type="radio" name="radio" value="2" class="ml-2"><label class="ml-1">Option 2</label>
                  <div class="radiogroup ml-5">
                    <input type="radio" name="radiog" value="1" checked><label>Option 1</label>
                    <input type="radio" name="radiog" value="2"><label>Option 2</label>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th>Checkbox</th>
              <td>
                <input type="checkbox" name="check" value="1" checked><label class="ml-1">Option 1</label>
                <input type="checkbox" name="check" value="2" class="ml-2"><label class="ml-1">Option 2</label>
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>

    <div class="grid gap-3 grid-cols-2 h-fit w-fit">
      <div class="card alert red relative w-36 js-box">
        <div class="head">
          <h3>red alert</h3>
        </div>
        <div class="body text-left">div.card.red.alert</div>
      </div>

      <div class="card alert yellow relative w-36 js-box">
        <div class="head">
          <h3>yellow alert</h3>
        </div>
        <div class="body text-left">div.card.yellow.alert</div>
      </div>

      <div class="card alert orange relative w-36 js-box">
        <div class="head">
          <h3>orange alert</h3>
        </div>
        <div class="body text-left">div.card.orange.alert</div>
      </div>

      <div class="card alert green relative w-36 js-box">
        <div class="head">
          <h3>green alert</h3>
        </div>
        <div class="body text-left">div.card.green.alert</div>
      </div>
    </div>

    <div class="card js-box">
      <div class="head">
        <h3>Console</h3>
      </div>
      <div class="body">
        <textarea class="CONSOLE w-[300px] h-[80px]">#> whoami
root</textarea>
      </div>
    </div>

    <div class="js-box">
      <div class="body">
        [% PROCESS _log_date_select.tt start=date.now-86400 end=date.now  %]
      </div>
    </div>

  </div>
</div>

<div class="card w-full mt-5 js-box">
  <div class="mainTableHeader">
    <div>
      <i class="fa-solid fa-bars"></i>
    </div>
    <div>
      [% PROCESS _pager.tt pager={ page => 1, total_pages => 15, entries => 10 } data => [] %]
    </div>
    <div>
      [% PROCESS _pager_per_page.tt %]
    </div>
  </div>
  <div class="mainTable [% IF main_table_full %]fullsize[% END %]">
    <table class="mainTable striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Service</th>
          <th class="text-center">Duration</th>
          <th>Attempt</th>
          <th>ASDasdas</th>
          <th>ASDasdas</th>
          <th>ASDasdas</th>
          <th>ASDasdas</th>
          <th>Status Information</th>
          <th>Attempt</th>
          <th>ASDasdas</th>
          <th>ASDasdas</th>
          <th>ASDasdas</th>
        </tr>
      </thead>
      <tbody>
        [% index = 0 %]
        [% WHILE index < 60 %]
          <tr>
            <td>
              <div class="col_host_name">Test Host</div>
            </td>
            <td>
              <div class="col_description">Checks the current CPU load on the system</div>
            </td>
            <td class="text-center">4d 10h 05m 10s</td>
            <td>1/3</td>
            <td>123</td>
            <td>345</td>
            <td>123</td>
            <td>123</td>
            <td class="col_plugin_output">
              <div class="col_plugin_output">OK: OK - hostname: rta 2.526ms, lost 0%</div>
            </td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
          [% index = index + 1 %]
        [% END %]
      </tbody>
    </table>
  </div>

  <div class="mainTableFooter">
    <div class="flex-1 self-center">
      [% PROCESS _pager_total_items.tt size=100 total_items=242 %]
    </div>
  </div>
</div>

<script>
jQuery("#iconsBox A").click(function(evt) {
  copyCode(evt, jQuery(this).find("I").attr("class"));
  return false;
});

function filterBoxes(input) {
  var filter = jQuery(input).val().toLowerCase();
  set_hash(filter, 1);
  jQuery("DIV.js-box").each(function(i, box) {
    if(filter == "") {
      jQuery(box).show();
    } else {
      var found = false;
      jQuery(box).find("H3").each(function(i, h3) {
        if(jQuery(h3).text().toLowerCase().indexOf(filter) > -1) {
          found = true;
        }
      });
      if(found) {
        jQuery(box).show();
      } else {
        jQuery(box).hide();
      }
    }
  });
}

jQuery(document).ready(function() {
  var filter = document.getElementById("filterboxes");
  var val    = get_hash(1);
  if(val) {
    jQuery(filter).val(val);
    filterBoxes(filter);
  }
});

</script>

[% PROCESS _footer.tt %]
