byceps/byceps

{% extends 'layout/admin/base.html' %}
{% from 'macros/admin/brand.html' import render_brand_avatar %}
{% from 'macros/icons.html' import render_icon %}
{% from 'macros/misc.html' import render_tag %}
{% from 'macros/user.html' import render_user_avatar %}
{% set current_page = 'user_badge_admin' %}
{% set page_title = [_('Badge'), badge.label] %}

{% block head %}
<style>
.badge-details {
  display: flex;
  margin-bottom: 2rem;
}

.badge-details .badge {
  flex: 0 0 auto;
}

.badge-details .description {
  align-self: center;
  margin-left: 1rem;
}

a.awardee {
  border: none;
  display: block;
  text-decoration: none;
}

a.awardee:hover .avatar {
  outline: currentColor solid 1px;
}
</style>
{% endblock %}

{% block body %}

  <div class="row row--space-between is-vcentered block">
    <div>

      <nav class="breadcrumbs">
        <ol>
          <li><a href="{{ url_for('.index') }}">{{ _('Badges') }}</a></li>
        </ol>
      </nav>
      <h1 class="title">{{ badge.label }}</h1>

    </div>
    <div>

      {%- if has_current_user_permission('user_badge.update') %}
      <div class="button-row is-right-aligned">
        <a class="button" href="{{ url_for('.update_form', badge_id=badge.id) }}">{{ render_icon('edit') }} <span>{{ _('Edit') }}</span></a>
      </div>
      {%- endif %}

    </div>
  </div>

  <div class="box">

    <div class="badge-details">
      <div class="badge">
        <div class="user-badge size-64" title="{{ badge.label }}"><img src="{{ badge.image_url_path }}"></div>
      </div>

      <div class="description">{{ badge.description|fallback('No description set.') }}</div>
    </div>

    <div class="data-label">{{ _('Slug') }}</div>
    <div class="data-value">{{ badge.slug }}</div>

    <div class="data-label">{{ _('Brand') }}</div>
    <div class="data-value">
      {%- if brand %}
        {{ render_brand_avatar(brand, '16') }}
        {{ brand.title }}
      {%- else %}
      <em>{{ _('unrestricted') }}</em>
      {%- endif %}
    </div>

    <div class="data-label">{{ render_tag(_('featured')) }}</div>
    <div class="data-value">{{ _('yes') if badge.featured else _('no') }}</div>

  </div>

  <h2>{{ _('Awarded to %(awardee_count)s users', awardee_count=awardees|length) }}</h2>
  <div class="box">

    {%- if awardees %}
    <ul class="list-grid">
      {%- for awardee in awardees %}
      <li><a class="awardee" href="{{ url_for('user_admin.view', user_id=awardee.id) }}">
{{ render_user_avatar(awardee, size=64) }}
      </a></li>
      {%- endfor %}
    </ul>
    {%- else %}
      <div class="dimmed-box centered">{{ _('This badge has not been awarded yet.') }}</div>
    {%- endif %}

  </div>

{%- endblock %}