{% import "components/user.html" as user with context %}
{% import "components/ui/v1.html" as ui_v1 %}
{% extends "layout/basic.html" %}

{% block content %}
<div class="row onlineuser-page" data-onlineuser-page data-refresh-seconds="{{ refreshSeconds|default(30) }}">
  <div class="medium-12 columns">
    <div class="ui-page">
      <div class="ui-split onlineuser-layout">
        <section class="ui-panel onlineuser-main">
          <header class="ui-panel__header ui-toolbar ui-toolbar--flush onlineuser-header">
            <div class="onlineuser-title-wrap">
              <h1 class="ui-panel__title onlineuser-title">
                <span class="icon icon-user" aria-hidden="true"></span>
                {{ _('Recent Online') }}
              </h1>
              <p class="ui-panel__description onlineuser-subtitle">{{ _('Recent 24h active users: {0}').format(recentCount) }}</p>
            </div>
            <div class="ui-actions onlineuser-actions">
              <button type="button" class="rounded button onlineuser-refresh" data-onlineuser-refresh>
                <span class="icon icon-refresh" aria-hidden="true"></span>
                {{ _('Refresh Now') }}
              </button>
            </div>
          </header>

          <div class="ui-panel__body onlineuser-stats">
            <div class="ui-grid onlineuser-stats__grid">
              {{ ui_v1.stat(onlineCount, _('Current Online'), none, 'onlineuser-stat') }}
              {{ ui_v1.stat(activeLastHourCount, _('Active Last Hour'), none, 'onlineuser-stat') }}
              {{ ui_v1.stat(recentHours + 'h', _('Recent Window'), none, 'onlineuser-stat') }}
            </div>
          </div>

          {% if not rows.length %}
          <div class="ui-panel__body">
            {{ ui_v1.empty_state(_('No Recent Online Users'), none, 'icon icon-user', 'onlineuser-empty') }}
          </div>
          {% else %}
          <div class="ui-panel__body ui-table-wrap table-layout-guard onlineuser-table-wrap">
            <table class="data-table onlineuser-table">
              <colgroup>
                <col class="col--uid">
                <col class="col--user">
                <col class="col--status">
                <col class="col--last">
                <col class="col--active">
                <col class="col--hits">
              </colgroup>
              <thead>
                <tr>
                  <th class="col--uid">UID</th>
                  <th class="col--user">{{ _('Username') }}</th>
                  <th class="col--status">{{ _('Status') }}</th>
                  <th class="col--last">{{ _('Last Seen') }}</th>
                  <th class="col--active">{{ _('Estimated Active Time') }}</th>
                  <th class="col--hits">{{ _('Hits') }}</th>
                </tr>
              </thead>
              <tbody>
                {%- for row in rows -%}
                <tr>
                  <td class="col--uid onlineuser-uid" data-label="UID">{{ row.udoc._id }}</td>
                  <td class="col--user onlineuser-user" data-label="{{ _('Username') }}">{{ user.render_inline(row.udoc) }}</td>
                  <td class="col--status" data-label="{{ _('Status') }}">
                    {% if row.online %}
                    {{ ui_v1.badge(_(row.statusText), 'success', 'onlineuser-status') }}
                    {% else %}
                    {{ ui_v1.badge(_(row.statusText), 'neutral', 'onlineuser-status') }}
                    {% endif %}
                  </td>
                  <td class="col--last onlineuser-last" data-label="{{ _('Last Seen') }}">
                    {{ row.lastActiveText }}<small>{{ row.agoText }}</small>
                  </td>
                  <td class="col--active onlineuser-active" data-label="{{ _('Estimated Active Time') }}">{{ row.activeMinutes }} min</td>
                  <td class="col--hits onlineuser-hits" data-label="{{ _('Hits') }}">{{ row.hits }}</td>
                </tr>
                {%- endfor -%}
              </tbody>
            </table>
          </div>
          {% endif %}
        </section>

        <aside class="ui-sidebar onlineuser-side">
          <section class="ui-panel">
            <header class="ui-panel__header">
              <h2 class="ui-panel__title onlineuser-side-title">
                <span class="icon icon-statistics" aria-hidden="true"></span>
                {{ _('Status') }}
              </h2>
            </header>
            <div class="ui-panel__body onlineuser-side-body">
              <div class="onlineuser-side-line">
                <span>{{ _('Current Domain') }}</span>
                <strong>{{ domainId }}</strong>
              </div>
              <div class="onlineuser-side-line">
                <span>{{ _('Current Online') }}</span>
                <strong>{{ onlineCount }}</strong>
              </div>
              <div class="onlineuser-side-line">
                <span>{{ _('Active Last Hour') }}</span>
                <strong>{{ activeLastHourCount }}</strong>
              </div>
              <div class="onlineuser-side-line">
                <span>{{ _('Auto refresh every {0}s').format(refreshSeconds) }}</span>
                <strong>{{ refreshSeconds }}s</strong>
              </div>
              <div class="onlineuser-side-line">
                <span class="onlineuser-side-note">{{ _('Only domain managers can view this page.') }}</span>
              </div>
            </div>
          </section>
        </aside>
      </div>
    </div>
  </div>
</div>
{% endblock %}