byceps/byceps

{% extends 'layout/admin/guest_server.html' %}
{% from 'macros/admin.html' import render_extra_in_heading, render_main_tabs %}
{% from 'macros/admin/guest_server.html' import get_server_status_color_name, render_hostname, render_ip_address, render_server_status %}
{% from 'macros/misc.html' import render_distribution_bar %}
{% from 'macros/icons.html' import render_icon %}
{% from 'macros/user.html' import render_user_avatar_and_name %}
{% set current_page_party = party %}
{% set current_tab = 'servers' %}
{% set page_title = _('Guest Servers') %}

{% block head %}
<style>
.servers-bar {
  margin-top: 0.5rem;
}

.servers-bar .progress {
  height: 0.125rem;
}

@media (min-width: 48rem) { /* 768px / 16px */
  .servers-bar {
    margin-top: 0.75rem;
  }
}
</style>
{%- endblock %}

{% block body %}

  <div class="row row--space-between block">
    <div>
      <h1 class="title">{{ page_title }} {{ render_extra_in_heading(server_quantities_by_status.total) }}</h1>
    </div>
    {%- if has_current_user_permission('guest_server.administrate') %}
    <div>
      <div class="button-row is-right-aligned">
        <a class="button" href="{{ url_for('.server_create_form', party_id=party.id) }}" title="{{ _('Register guest server') }}">{{ render_icon('add') }} <span>{{ _('Add') }}</span></a>
      </div>
    </div>
    {%- endif %}
  </div>

  <div class="row row--space-between block">
    <div>
{{
  render_main_tabs(
    Navigation()
      .add_item(url_for('.server_index', party_id=party.id), _('all') ~ '<span style="margin-left: 0.4rem;">%s</span>'|format(server_quantities_by_status.total|dim)|safe, id='all', icon='server')
      .add_item(url_for('.server_index', party_id=party.id, only_status='pending'), _('pending') ~ '<span style="margin-left: 0.4rem;">%s</span>'|format(server_quantities_by_status.pending|dim)|safe, id='pending', icon='pending')
      .add_item(url_for('.server_index', party_id=party.id, only_status='approved'), _('approved') ~ '<span style="margin-left: 0.4rem;">%s</span>'|format(server_quantities_by_status.approved|dim)|safe, id='approved', icon='success')
      .add_item(url_for('.server_index', party_id=party.id, only_status='checked_in'), _('checked in') ~ '<span style="margin-left: 0.4rem;">%s</span>'|format(server_quantities_by_status.checked_in|dim)|safe, id='checked_in', icon='log-in')
      .add_item(url_for('.server_index', party_id=party.id, only_status='checked_out'), _('checked out') ~ '<span style="margin-left: 0.4rem;">%s</span>'|format(server_quantities_by_status.checked_out|dim)|safe, id='checked_out', icon='log-out')
    , only_status.name if only_status else 'all'
  )
}}
    </div>
    <div class="column--grow servers-bar">
{{ render_distribution_bar(
  [
    (server_quantities_by_status.pending, 'color-info'),
    (server_quantities_by_status.approved, 'color-warning'),
    (server_quantities_by_status.checked_in, 'color-success'),
    (server_quantities_by_status.checked_out, 'color-disabled'),
  ],
  server_quantities_by_status.total,
) }}
    </div>
  </div>

  {%- if servers %}
    {%- for server in servers %}
  <a href="{{ url_for('.server_view', server_id=server.id) }}" class="box box--marked {{ get_server_status_color_name(server) }}">

    <div class="row">
      <div style="flex-basis: 33%;">

        <div class="data-label">{{ _('Owner') }}</div>
        <div class="data-value">{{ render_user_avatar_and_name(server.owner, size=20) }}</div>

      </div>
      <div style="flex-basis: 33%;">

        <div class="data-label">{{ _('Description') }}</div>
        <div class="data-value">{{ server.description|fallback }}</div>

      </div>
      <div style="flex-basis: 33%;">

        <div class="data-label">{{ _('Status') }}</div>
        <div class="data-value">{{ render_server_status(server) }}</div>

      </div>
    </div>

    <div class="mt">
      <div class="row">
        <div style="flex-basis: 33%;">

          <table class="index">
            <thead>
              <tr>
                <th class="data-label">{{ _('IP address') }}</th>
                <th class="data-label">{{ _('Hostname') }}</th>
              </tr>
            </thead>
            <tbody>
              {%- for address in sort_addresses(server.addresses) %}
              <tr>
                <td>{{ render_ip_address(address) }}</td>
                <td>{{ render_hostname(address, setting) }}</td>
              </tr>
              {%- endfor %}
            </tbody>
          </table>

        </div>
        <div style="flex-basis: 33%;">

          <div class="data-label">{{ _('Notes by owner') }}</div>
          <div class="data-value">{{ server.notes_owner|fallback(_('none')) }}</div>

        </div>
        <div style="flex-basis: 33%;">

          <div class="data-label">{{ _('Notes by admin') }}</div>
          <div class="data-value">{{ server.notes_admin|fallback(_('none')) }}</div>

        </div>
      </div>
    </div>

  </a>
    {%- endfor %}

  {%- else %}
  <div class="box">
    <div class="dimmed-box centered">{{ _('No servers') }}</div>
  </div>
  {%- endif %}

{%- endblock %}