{% extends 'base.html' %}

{% block content %}
<!-- This page is referenced by https://wiki.k-space.ee/en/hosting/doors -->
<div class="container">

  <div>
    <h3>Open</h3>

    <div class="horizontalRow">
      <div class="col s12 buttonExtra">
        <div>
          <div><img src="/static/backdoor.jpg"></div>
          <div><a class="waves-effect waves-light btn" href="/m/doorboy/backdoor/open">Back door</a></div>
          <div>k6.ee/0001</div>
        </div>
      </div>
      <div class="col s12 buttonExtra horizontalRow">
        <div>
          <div><img src="/static/grounddoor.png"></div>
          <div><a class="waves-effect waves-light btn" href="/m/doorboy/grounddoor/open">Ground door</a></div>
          <div>k6.ee/????</div>
        </div>
        <div><img src="/static/doorstairs.png"></div>
        <div>
          <div><img src="/static/frontdoor.jpg"></div>
          <div><a class="waves-effect waves-light btn" href="/m/doorboy/frontdoor/open">Front door</a></div>
          <div>k6.ee/0079</div>
        </div>
      </div>
    </div>

    <div class="horizontalRow">
      <div>
        <div class="col s12 buttonExtra"><div><img src="/static/workshopdoor.jpg"></div><div><a class="waves-effect waves-light btn {% if not workshop_access%}disabled{%endif%}" href="/m/doorboy/workshopdoor/open">Workshop</a></div><div>k6.ee/0020</div></div>
      </div>
    </div>
  </div>

<hr>
<div><ul>
  <li>Doors locations: <a href="https://k-space.ee/where">k-space.ee/where</a></li>
  <li>Hardware and stack are documented <a href="https://wiki.k-space.ee/en/hosting/doors">in Wiki</a>.</li>
  <li><a href="https://wiki.k-space.ee/en/about/membership">Membership</a> determines door access.</li>
</ul></div>

<div>
  <h3>Keycards</h3>
  <a href="/m/doorboy/me" class="waves-effect waves-light btn"><i class="material-icons left">person</i>Linked keycards</a>
  <p>Adding keycards:
    <ol>
      <li>Swipe keycard at any door listed above</li>
      <li>Refresh this page</li>
      <li>Find it below, click <pre style="display: inline;">Claim keycard</pre></li>
    </ol>
  </p>

<h4>Keycards last seen:</h4>
Does not include door opens by webhook.

<table>
  <thead>
    <tr>
        <!-- <th>&nbsp;</th> -->
        <th>Last seen</th>
        <th>&nbsp;</th>
        <th>Who</th>
        <th>UID hash tail</th>
        <!-- <th>Granted</th> -->
        <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    {% for o in latest_swipes %}
      <tr>
        <!-- Does not work -->
        <!-- <td>
        {% if o.inventory and o.inventory.owner %}
          &nbsp;
        {% else %}
          <i class="material-icons">error</i>{% endif %}
        </td> -->
        <td>{{ (o.last_seen or o.timestamp) | timeago }}</td>
        <td>{{ o.door }}</td>
        <td>{% if o.inventory and o.inventory.owner %}<a href="/m/user/{{ o.inventory.owner.username }}">{{ o.inventory.owner.username | display_name }}</a>{% else %}Unknown{% endif %}</td>
        <td><a href="/m/doorboy/{{ o._id }}/events">{{ o.token.uid_hash[-6:] }}</a></td>
        <!-- <td>{% if o.success %}<i class="material-icons">check_circle</i>{% else %}&nbsp;{% endif %}</td> -->
        <td>{% if o.inventory and o.inventory.owner %}{{ o.token.comment }}{% else %}<a class="waves-effect waves-light btn" href="/m/doorboy/{{ o._id }}/claim">Claim keycard</a>{% endif %}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

{% if false %}
<!-- whole section commented out -->
<div>

<p>Recent door open requests via Slack or the buttons above</p>

<table>
  <thead>
    <tr>
        <th>&nbsp;</th>
        <th>When</th>
        <th>Who</th>
        <th>Door</th>

    </tr>
  </thead>
  <tbody>
    {% for o in latest_events %}
      <tr>
        <td>{% if o.approved %}<i class="material-icons">check_circle</i>{% else %}&nbsp;{% endif %}</td>
        <td>{{ o.timestamp | timeago }}</td>
        <td><a href="/m/user/{{ o.member_id }}">{% if o.member %}{{ o.member }}{% else %}{{ o.member_id }}{% endif %}</a></td>
        <td>{{ o.door }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>
</div>
{% endif %}

</div>
{% endblock %}