{% extends 'pyplex/base.html' %}

{% block title %}{{_('Logs')}} - {{super()}} {% endblock %}
{% block subtitle %}{{_('Logs')}}{% endblock %}

{% block head %}
<style type="text/css">
.form-control {
  margin: 0 0 5px 0;
}
#logform2 {
  width: 300px;
}
@media screen and (max-width: 400px) {
  #logform2 {
  width: 80vw;
  }
}
.logdiv
{
  width: 100%;
  height: 46vh;
  overflow: auto;
  border: 1px solid #101010;
  outline: 1px solid #101010;
  background-color: #282828;
  margin-right: auto;
  margin-left: auto;
}
.logform
{
  display: table;
  margin: 0 auto 0 auto;
  padding-top: 5px;
}
.logtable
{
  background-color: #282828;
  margin: 0;
}
.logtable td
{
  border: none;
  white-space: nowrap;
  font-family: monospace;
  font-size: 16px;
  margin: 0;
  padding: 0 10px 0 10px;
  line-height: 110%;
}
td.logline
{
  background-color: #1f1f1f;
  text-align:right;
  padding: 0 5px 0 5px;
}
td.loglevel
{
  text-align:right;
}
.logperpage
{
  float: right;
  padding-bottom: 8px;
}
.logpaginator
{
  float: left;
  padding-top: 5px;
}
.logpaginator a
{
  padding: 0 8px 0 8px;
}
.logwarn
{
  text-align: center;
  color: red;
}
</style>
{% endblock %}

{% block content %}
<div class="clear"></div>

<div class="logpaginator"><a href="{{'/logs/1'|url}}"><span class="glyphicon glyphicon-fast-backward"></span></a> <a href="{{'/logs/'|url + iprev|string}}"><span class="glyphicon glyphicon-step-backward"></span></a>  <a href="{{'/logs/'|url + inext|string}}"><span class="glyphicon glyphicon-step-forward"></span></a> <a href="{{'/logs/'|url}}"><span class="glyphicon glyphicon-fast-forward"></span></a></div>
<div class="logperpage" style="float: right;">
  <form id="logform1" action="" method="POST">
    <label for="reversed">{{_('Reversed')}}:</label>
    <input type="checkbox" name="reversed" id="reversed" onchange="this.form.submit();" {% if reversed %} checked="checked" {% endif %} />&nbsp;
    <label for="perpage">{{_('Lines per page')}}:</label>&nbsp;
    <select name="perpage" id ="perpage" style="width: auto; height: auto; padding: 0; border: 0; display:inline;" onchange="this.form.submit();">
      {% for value in  perpage_p %}
        <option value="{{value.0}}"{% if value.0 == perpage %} selected="selected" {% endif %}>{{value.1}}</option>
      {% endfor %}
    </select>
  </form>
</div>
<div class="logwarn">{{warning}}</div>
<div style="clear: both;"></div>
<div class="logdiv">
  <table class="logtable" cellpadding="0" cellspacing="0">
  {% for line in log %}
    <tr><td class="logline">{{line.line}}</td><td>{{line.date}}</td><td class="loglevel">{{line.level}}</td><td>{{line.message}}</td></tr>
  {% endfor %}
  </table>
</div>
<div class="logform">
  <form id="logform2" action="" method="POST" style="width: auto">
    <label for="from" style="display: inline-block; float: left; margin-right: 5px; height: 34px; line-height: 34px;">Jump to time:</label>
    <input style="display: inline-block; text-align: center; float: left; width: 155px;" class="form-control" type="text" name="from" id="from" size="15" value="{{from}}"/>
    <input style="display: inline-block; float: left; margin-left: 5px;" class="btn btn-success" type="submit" value="{{_('Go')}}" />
  </form>
</div>
<!--<div style="clear: both;"></div>-->

{% endblock %}
