{% extends "base.html" %}
{% import "_macros.html" as m %}

{# `cv` is the three non-media jobs: a record, not portfolio tiles. #}
{% set shown = articles | rejectattr('category.name', 'equalto', 'cv') | list %}
{% set disciplines = shown | map(attribute='category.name') | unique | sort | list %}

{# Engagements, biggest first. A four-year relationship like ClipAward — nine
   entries spanning design, projection, animation and organisation — is the
   thing this portfolio has that a flat grid cannot show. Grouping is the
   default view; the sort buttons fall back to a flat grid. #}
{% set names = [] %}
{% for a in shown if a.metadata.get('project') and a.metadata.get('project') not in names %}
  {% if names.append(a.metadata.get('project')) %}{% endif %}
{% endfor %}
{% set groups = [] %}
{% for n in names %}
  {% set members = shown | selectattr('metadata.project', 'equalto', n) | list %}
  {% if groups.append({'name': n, 'members': members, 'n': members|length,
                       'first': members | map(attribute='date.year') | min}) %}{% endif %}
{% endfor %}
{# biggest engagement first, then earliest — Articles are not orderable, so
   sort on the counts rather than on the member lists #}
{% set groups = groups | sort(attribute='first') | sort(attribute='n', reverse=true) %}
{% set loose = shown | rejectattr('metadata.project') | list %}

{% block content %}
<section class="controls" aria-label="Filter">
  <span class="label">discipline</span>
  {% for d in disciplines %}
  <button type="button" data-axis="category" data-filter="{{ d }}" aria-pressed="false">{{ d }}</button>
  {% endfor %}
  <span class="count" data-count>{{ shown|length }} entries</span>
</section>

<section class="controls" aria-label="Arrangement">
  <span class="label">arrange</span>
  <button type="button" data-sort="year-desc" aria-pressed="true">newest</button>
  <button type="button" data-sort="group" aria-pressed="false">by engagement</button>
  <button type="button" data-sort="year-asc" aria-pressed="false">oldest</button>
  <button type="button" data-sort="title" aria-pressed="false">a–z</button>
</section>

<div class="grid">
  {% for g in groups %}
    {% set yrs = g.members | map(attribute='date.year') | list %}
    {% set kinds = g.members | map(attribute='category.name') | unique | sort | list %}
    <div class="item head" data-head="{{ g.name }}">
      <div class="item-content">
        <div class="grouphead">
          <span class="gname">{{ g.name }}</span>
          <span class="gmeta">{{ g.members|length }} entries · {{ yrs|min }}{% if yrs|min != yrs|max %}–{{ yrs|max }}{% endif %} · {{ kinds|join(', ') }}</span>
        </div>
      </div>
    </div>
    {% for a in g.members|sort(attribute='date') %}{{ m.tile(a, SITEURL) }}{% endfor %}
  {% endfor %}

  {% if loose %}
  <div class="item head" data-head="">
    <div class="item-content">
      <div class="grouphead">
        <span class="gname">Single commissions</span>
        <span class="gmeta">{{ loose|length }} entries</span>
      </div>
    </div>
  </div>
  {% for a in loose|sort(attribute='date', reverse=true) %}{{ m.tile(a, SITEURL) }}{% endfor %}
  {% endif %}
</div>
{% endblock %}