{% import "macros" as m %}{# -*- HTML -*- -#}
<!-- Copyright 2020u Ian Jackson
     SPDX-License-Identifier: AGPL-3.0-or-later
     There is NO WARRANTY. -->
{{ m::header() }}
<style>
  div[class=uos] {
    display: flex; flex-direction: column; flex-wrap: wrap;
  }
  div[id=infopane] {
    height: 340px;
  }
  div[id=uos] {
    flex-grow: 1;
  }
  div[class|=uokey] {
    outline: 1px solid #000;
    margin: 1px;
  }
  div[class=uokey-r] {
  }
  div[class=uokey-mid] {
  }
  .uos-mid {
    flex-grow: 1;
  }
  pre[id=error] {
    margin-bottom: 0;
    margin-top: 0;
  }
  div[id=rhs-panel] {
    display: flex;
    margin-left: 3px;
    flex-direction: column;
  }
</style>
{{ m::errors() }}
<div class="upper" style="display: flex; flex-flow: row nowrap;">
  <div>{{ m::space() }}</div>
  <div id="rhs-panel">
    <div>
      {{ m::nick() }} |
      {{ m::status() }}<br/>
    </div>
    <div id="links">{{ links }}</div>
    <div>
      <a href="/p?{{ ptoken }}">switch to portrait view</a> |
      {{ m::zoom() }}
    </div><div>
      {{ m::wresting() }}<br/>
    </div><div>
          
    </div>
    {{ m::infopane() }}

<div>
  <div id="log" style="overflow-y: scroll; height: 600px;">
  {% for ent in log %}
    <div>
    <span class="logts">{{ent.when}}</span><br/>
    <span class="logmsg">{{ ent.logent.logent.html | safe }}<span><br/>
    </div>
{%- endfor %}
  </div>
</div>
</div>
</div>

{{ m::footer() }}