byceps/byceps

{% extends 'layout/admin/shop/article.html' %}
{% from 'macros/admin.html' import render_extra_in_heading %}
{% from 'macros/admin/shop/article.html' import render_article_link %}
{% from 'macros/icons.html' import render_icon %}
{% from 'macros/misc.html' import render_progress_bar %}
{% from 'macros/pagination.html' import render_pagination_nav %}
{% set page_title = _('Articles') %}

{% block head %}
<style>
.progress-bar.color--available {
  background-color: #11aa22;
}

.progress-bar.color--ordered {
  background-color: #eecc00;
}
</style>
{%- endblock %}

{% block body %}

  <div class="row row--space-between block">
    <div>
      <h1 class="title">{{ page_title }} {{ render_extra_in_heading(articles.total) }}</h1>
    </div>
    {%- if has_current_user_permission('shop_article.create') %}
    <div>
      <div class="button-row is-right-aligned">
        <div class="dropdown">
          <button class="dropdown-toggle button">{{ render_icon('add') }} <span>{{ _('Create article') }}</span> {{ render_icon('chevron-down') }}</button>
          <ol class="dropdown-menu dropdown-menu--right">
            {%- for type, label in article_type_labels_by_type|items %}
            <li><a class="dropdown-item" href="{{ url_for('.create_form', shop_id=shop.id, type_name=type.name) }}">{{ label }}</a></li>
            {%- endfor %}
          </ol>
        </div>
        <div class="dropdown">
          <button class="dropdown-toggle button"><span>{{ render_icon('chevron-down') }}</span></button>
          <ol class="dropdown-menu dropdown-menu--right">
            <li><a class="dropdown-item" href="{{ url_for('.create_number_sequence_form', shop_id=shop.id) }}">{{ render_icon('add') }} {{ _('Create article number sequence') }}</a></li>
          </ol>
        </div>
      </div>
    </div>
    {%- endif %}
  </div>

  <form action="{{ url_for('.index_for_shop', shop_id=shop.id) }}" class="single-row block">
    <input type="search" name="search_term" placeholder="{{ _('Article number') }}, {{ pgettext('article', 'name') }}"{%- if search_term %} value="{{ search_term }}"{% endif %} class="form-control" autofocus>
    <button type="submit" class="button" title="{{ _('Search') }}">{{ render_icon('search') }}</button>
    <a href="{{ url_for('.index_for_shop', shop_id=shop.id) }}" class="button{% if not search_term %} dimmed{% endif %}" title="{{ _('Remove search term constraint') }}">{{ render_icon('remove') }}</a>
  </form>

  {%- if articles.items %}
  <table class="itemlist is-vcentered is-wide">
    <thead>
      <tr>
        <th>{{ _('Item number') }}</th>
        <th>{{ pgettext('article', 'Name') }}</th>
        <th>{{ _('Type') }}</th>
        <th class="hyphenate number" style="width: 15%;">{{ _('Unit price') }}<br>{{ _('Tax rate') }}</th>
        <th class="hyphenate number" style="width: 11%;">{{ _('Quantity') }}<br>{{ _('available') }}</th>
        <th class="number">{{ _('Total') }}</th>
        <th>{{ _('Availability') }}</th>
      </tr>
    </thead>
    <tbody>
      {%- for article in articles.items %}
      <tr>
        <td class="nowrap">
          <strong>{{ render_article_link(article) }}</strong>
          {%- for attached_article in article.attached_articles|sort(attribute='article.item_number') %}
            <div style="font-size: 0.625rem;">{{ render_icon('attached') }} {{ attached_article.quantity }} &times; {{ render_article_link(attached_article.article) }}</div>
          {%- endfor %}
        </td>
        <td>
          {{ article.name }}

          {%- if article.not_directly_orderable %}
          <br>{{ render_icon('info') }} {{ _('can only be ordered indirectly')|dim }}
          {%- endif %}

          {%- if article.separate_order_required %}
          <br>{{ render_icon('info') }} {{ _('must be ordered separately')|dim }}
          {%- endif %}

          {%- if article.available_from %}
          <br>{{ render_icon('time') }} {% filter dim %}{{ _('from') }} {{ article.available_from|datetimeformat }}{% endfilter %}
          {%- endif %}

          {%- if article.available_until %}
          <br>{{ render_icon('time') }} {% filter dim %}{{ _('until') }} {{ article.available_until|datetimeformat }}{% endfilter %}
          {%- endif %}
        </td>
        <td>{{ article_type_labels_by_type[article.type_] }}</td>
        <td class="nowrap number">
          {{- article.price|moneyformat }}<br>
          {{- article.tax_rate|tax_rate_as_percentage|dim -}}
        </td>
        <td class="number bignumber{% if article.quantity == 0 %} dimmed{% endif %}">{{ article.quantity }}</td>
        <td class="number">{{ article.total_quantity }}</td>
        <td>
          <div class="progress">
            {{ render_progress_bar(article.quantity, article.total_quantity, 'color--available') }}
            {{ render_progress_bar(totals_by_article_number[article.item_number][PaymentState.open], article.total_quantity, 'color--ordered') }}
          </div>
        </td>
      </tr>
      {%- endfor %}
      <tr>
    </tbody>
  </table>
  {%- else %}
  <div class="box">
    <div class="dimmed-box centered">{{ _('No articles exist.') }}</div>
  </div>
  {%- endif %}

{{ render_pagination_nav(articles, '.index_for_shop', {
  'shop_id': shop.id,
  'per_page': per_page,
  'search_term': search_term if search_term else None,
}) }}

{%- endblock %}