byceps/byceps

{% extends 'layout/admin/seating.html' %}
{% from 'macros/admin.html' import render_extra_in_heading %}
{% from 'macros/icons.html' import render_icon %}
{% from 'macros/misc.html' import render_progress_bar %}
{% set current_page_party = party %}
{% set current_tab = 'areas' %}
{% set page_title = [_('Areas'), party.title] %}

{% block body %}

  <div class="row row--space-between block">
    <div>
      <h1 class="title">{{ _('Areas') }} {{ render_extra_in_heading(areas_with_utilization|length) }}</h1>
    </div>
    {%- if has_current_user_permission('seating.administrate') %}
    <div>
      <div class="button-row is-right-aligned">
        <a class="button" href="{{ url_for('.area_create_form', party_id=party.id) }}">{{ render_icon('add') }} <span>{{ _('Create area') }}</span></a>
      </div>
    </div>
    {%- endif %}
  </div>

  {%- if areas_with_utilization %}
  <table class="itemlist is-vcentered is-wide">
    <thead>
      <tr>
        <th>{{ _('Title') }}<br>{{ _('Slug') }}</th>
        <th>{{ _('Background image') }}<br>{{ _('Dimensions') }}</th>
        <th class="number">{{ _('Seats') }}<br>{{ _('occupied') }}</th>
        <th class="number">{{ _('Seats') }}<br>{{ _('available') }}</th>
        <th>{{ _('Utilization') }}</th>
      </tr>
    </thead>
    <tbody>
      {%- for area, utilization in areas_with_utilization|sort(attribute='0.title') %}
      <tr>
        <td>
          <a href="{{ url_for('.area_view', area_id=area.id) }}"><strong>{{ area.title }}</strong></a><br>
          {{ area.slug|dim }}
        </td>
        <td>
          {%- if area.image_filename %}
          {{ area.image_filename }}<br>
          {% filter dim %}{{ area.image_width }} &times; {{ area.image_height }} {{ _('pixels') }}{% endfilter %}
          {%- else %}
          {{ _('not specified')|dim }}
          {%- endif %}
        </td>
        <td class="bignumber number">{{ utilization.occupied|numberformat }}</td>
        <td class="bignumber number">{{ utilization.total|numberformat }}</td>
        <td>
          <div class="progress">
            {{ render_progress_bar(utilization.occupied, utilization.total) }}
          </div>
        </td>
      </tr>
      {%- endfor %}
    </tbody>
    <tfoot>
      <tr>
        <td><strong>{{ _('Total') }}</strong></td>
        <td></td>
        <td class="bignumber number">{{ total_seat_utilization.occupied|numberformat }}</td>
        <td class="bignumber number">{{ total_seat_utilization.total|numberformat }}</td>
        <td>
          <div class="progress">
            {{ render_progress_bar(total_seat_utilization.occupied, total_seat_utilization.total) }}
          </div>
        </td>
      </tr>
    </tfoot>
  </table>
  {%- else %}
  <div class="box">
    <div class="dimmed-box centered">{{ _('No areas exist.') }}</div>
  </div>
  {%- endif %}

{%- endblock %}