<% include header.ejs %>

<article class="page">
<header><h2>Preferences</h2></header>

<div class="row">
  <div class="col-md-8">
    <article>
      <section>
      <p class="lead text-muted">
        Customize the web interface
      </p>

      <h4>
        There are few options you can set
      </h4>

      <dl class="dl-horizontal">
        <dt>Show header</dt><dd>Hide header to have a minimized interface <span class="text-muted">as much as possible</span>.</dd>

        <dt>Enable sidebar</dt><dd>Enable sidebar in <a href="<%= web.paths.distribution %>">distribution</a> page.</dd>

        <dt>Glossy theme</dt><dd>Use a glossy theme for the interface. Not too much changes, just fancy.</dd>

        <dt>Enable autoscroll</dt><dd>Enable scroll down page automatically while you are viewing a file and a new line is received.</dd>

        <dt>File background</dt><dd>Remove file background if it makes you uncomfortable while reading a log.</dd>

        <dt>File font-size</dt><dd>Increase the font size for files content.</dd>

        <dt class="debug">Debug level</dt><dd class="debug">Set debug level, please take a look at <a href="/javascripts/debug.js">debug.js</a> for more information. Level <code>0</code> means no debug. Please <strong>DO NOT</strong> enable debug if you do not really need it. Debug can affect perfomance.</dd>
      </dl>

      </section>
    </article>
  </div>

  <div class="col-md-4">
    <div id="preferences" class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Settings</h3>
      </div>
      <div class="panel-body">
        <div class="checkbox">
          <label>
            <input id="header" type="checkbox"> Show header
          </label>
        </div>
       <div class="checkbox">
          <label>
            <input id="sidebar" type="checkbox"> Enable sidebar
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input id="glossy_theme" type="checkbox"> Use a glossy theme
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input id="autoscroll" type="checkbox"> Enable autoscroll
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input id="file_background" type="checkbox"> Enable file background
          </label>
        </div>
        <div class="select">
          <select id="file_fontsize" class="form-control">
            <option>13</option>
            <option>14</option>
            <option>15</option>
            <option>16</option>
          </select>
          <label for="debug">File font-size</label>
        </div>
        <div class="select debug">
          <select id="debug" class="form-control">
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
          </select>
          <label for="debug">Debug level</label>
        </div>
      </div>
    </div> <!-- /#prefernces -->
  </div>
</div>
</article>

<% include footer.ejs %>