{% extends "base.html" %}
{% from '_macros/carousel.html' import gallery with context %}

{% block title %}Garments Suite — {{ page_title }}{% endblock %}

{% block styles %}
<style>
/* ── Layout ─────────────────────────────────────────────────── */
.garment-detail {
  max-width: 1100px;
  margin: 0 auto;
}

.detail-breadcrumb {
  display: flex;
  gap: 1rem;
  margin-bottom: var(--space-md);
}

.breadcrumb-link {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.breadcrumb-link:hover { text-decoration: underline; }

/* Two-column on ≥ 700 px; single column (gallery then meta) on mobile */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (max-width: 699px) {
  .detail-layout { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ── Gallery ────────────────────────────────────────────────── */
.detail-gallery {
  position: sticky;
  top: 1rem;
  padding-right: 2rem;
  border-right: 1px solid rgba(42, 77, 58, 0.2);
}

@media (max-width: 699px) {
  .detail-gallery {
    position: static;
    padding-right: 0;
    border-right: none;
  }
}

.gallery-hero {
  position: relative;
  background: var(--bg-card);
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s ease;
}

.img-badge {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-sm);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Carousel buttons: always visible on touch devices */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.82);
  border: none;
  border-radius: 2px;
  width: 2.5rem;
  height: 3.5rem;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.15s, background 0.15s;
  opacity: 1; /* visible by default for touch */
}

/* On pointer devices, hide until hover */
@media (hover: hover) and (pointer: fine) {
  .carousel-btn { opacity: 0; }
  .gallery-hero:hover .carousel-btn { opacity: 1; }
}

.carousel-btn:hover  { background: rgba(255,255,255,0.97); }
.carousel-btn--prev  { left:  0.5rem; }
.carousel-btn--next  { right: 0.5rem; }

.gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.thumb-btn {
  position: relative;
  width: 72px;
  height: 96px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 2px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s;
}
.thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb-btn--active { border-color: var(--accent); }
.thumb-btn:hover:not(.thumb-btn--active) { border-color: var(--accent-muted); }

.thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 0.6rem;
  text-align: center;
  padding: 2px 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gallery-empty {
  aspect-ratio: 3 / 4;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-style: italic;
  font-family: var(--font-body);
}

/* ── Metadata panel ─────────────────────────────────────────── */
.detail-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.detail-header { margin-bottom: 0; }

.detail-prefix {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.25rem;
}

.detail-name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 400;
  margin: 0 0 0.2rem;
  line-height: 1.15;
  color: var(--text-primary);
}

.detail-classification {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

/* ── Definition list ────────────────────────────────────────── */
.meta-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-md);
  row-gap: 0.4rem;
  align-items: baseline;
  margin: 0;
}

.meta-grid dt {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.meta-grid dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-primary);
}

.meta-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: 0.4em;
}

/* ── Colours ────────────────────────────────────────────────── */
.colour-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.colour-swatch {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  flex-shrink: 0;
}

.colour-name {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-primary);
}

.colour-divider {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.patterned-badge {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid currentColor;
  padding: 2px 6px;
  border-radius: 2px;
}

/* ── Size ───────────────────────────────────────────────────── */
.size-list { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.size-chip {
  font-family: var(--font-body);
  font-size: 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2px 10px;
  border-radius: 2px;
}

/* ── Material ───────────────────────────────────────────────── */
.section-heading {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-sm);
  font-weight: 400;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.section-count {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
}

.material-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.material-item {
  display: grid;
  grid-template-columns: 80px max-content 1fr;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
}

.material-bar {
  display: block;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.6;
  min-width: 3px;
}

.material-pct {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-align: right;
  min-width: 2.5em;
}

.material-name { color: var(--text-primary); }

/* ── Tags ───────────────────────────────────────────────────── */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tag {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.tag--formality   { background: var(--accent); color: #fff; border-color: var(--accent); }
.tag--nightwear   { border-style: dashed; }
.tag--relinquished { background: #c0392b22; border-color: #c0392b55; color: #7a2020; }

/* ── Style attrs ────────────────────────────────────────────── */
.style-attrs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.style-attrs li {
  font-family: var(--font-body);
  font-size: 0.82rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 2px;
}

/* ── Description ────────────────────────────────────────────── */
.garment-description {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary, var(--text-primary));
  border-left: 3px solid var(--accent);
  padding-left: var(--space-sm);
  margin: 0;
}

/* ── Sets & Wear History sections ───────────────────────────── */
.detail-section {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--border);
  padding-top: var(--space-md);
}

.set-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.set-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.set-name  { color: var(--text-primary); font-weight: 500; }

.set-type {
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wear-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.3rem 1rem;
}

@media (max-width: 480px) {
  .wear-list { grid-template-columns: 1fr 1fr; }
}

.wear-entry {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-primary);
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border);
}

.duplicate-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.duplicate-link {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid rgba(42,77,58,0.3);
  padding: 3px 10px;
  border-radius: 2px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.duplicate-link:hover { background: rgba(42,77,58,0.06); }

.empty-state {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}
</style>
{% endblock %}

{% block content %}
<article class="garment-detail">

  {# ── Breadcrumb ───────────────────────────────────────────── #}
  <nav class="detail-breadcrumb" aria-label="Breadcrumb">
    <a href="{{ url_for('wardrobe.index') }}" class="breadcrumb-link">← Wardrobe</a>
    <a href="{{ url_for('wardrobe.edit', garment_id=garment.id) }}" class="breadcrumb-link">Edit ✎</a>
  </nav>

  {# ── Two-column layout ────────────────────────────────────── #}
  <div class="detail-layout">

    {# ── Left: image gallery ─────────────────────────────────── #}
    <section class="detail-gallery">
      {{ gallery(images, 'wardrobe.image', title=page_title) }}
    </section>

    {# ── Right: metadata ─────────────────────────────────────── #}
    <section class="detail-meta">

      <header class="detail-header">
        {% if garment.prefix %}
          <p class="detail-prefix">{{ garment.prefix }}</p>
        {% endif %}
        <h1 class="detail-name">{{ garment.name or garment.classification }}</h1>
        <p class="detail-classification">{{ garment.classification }}</p>
      </header>

      {# ── Provenance ────────────────────────────────────────── #}
      <dl class="meta-grid">
        {% if garment.vendor %}
          <dt>Vendor</dt>
          <dd>
            {% if garment.vendor_website %}
              <a href="{{ garment.vendor_website }}" target="_blank" rel="noopener">{{ garment.vendor }}</a>
            {% else %}
              {{ garment.vendor }}
            {% endif %}
            {% if garment.label and garment.label != garment.vendor %}
              <span class="meta-sub">under {{ garment.label }}</span>
            {% endif %}
          </dd>
        {% endif %}

        {% if garment.obtained %}
          <dt>Obtained</dt>
          <dd>{{ garment.obtained.strftime('%d %B %Y') }}</dd>
        {% endif %}

        {% if garment.cost is not none %}
          <dt>Cost</dt>
          <dd>£{{ '%.2f'|format(garment.cost|float) }}</dd>
        {% endif %}
      </dl>

      {# ── Colour swatches ───────────────────────────────────── #}
      {% if garment.colour or garment.patterned %}
        <div class="colour-row">
          {% if garment.patterned %}
            <span class="patterned-badge">Patterned</span>
          {% endif %}

          {% if garment.colour %}
            <span
              class="colour-swatch"
              style="background: hsl(
                {{ garment.colour_hue }},
                {{ garment.colour_sat }}%,
                {{ garment.colour_light }}%,
                {{ garment.colour_alpha }}
              );"
              title="{{ garment.colour }}"
              aria-label="{{ garment.colour }}"
            ></span>
            <span class="colour-name">{{ garment.colour }}</span>
          {% endif %}

          {% if garment.colour_secondary %}
            <span class="colour-divider">+</span>
            <span
              class="colour-swatch"
              style="background: hsl(
                {{ garment.colour2_hue }},
                {{ garment.colour2_sat }}%,
                {{ garment.colour2_light }}%,
                {{ garment.colour2_alpha }}
              );"
              title="{{ garment.colour_secondary }}"
              aria-label="{{ garment.colour_secondary }}"
            ></span>
            <span class="colour-name">{{ garment.colour_secondary }}</span>
          {% endif %}
        </div>
      {% endif %}

      {# ── Size ─────────────────────────────────────────────── #}
      {% if garment.size %}
        <dl class="meta-grid">
          <dt>Size</dt>
          <dd class="size-list">
            {% for s in garment.size %}
              <span class="size-chip">{{ s }}</span>
            {% endfor %}
          </dd>
        </dl>
      {% endif %}

      {# ── Material composition ──────────────────────────────── #}
      {% if material %}
        <div class="material-section">
          <h2 class="section-heading">Composition</h2>
          <ul class="material-list" role="list">
            {% for m in material %}
              <li class="material-item">
                <span class="material-bar" style="width: {{ m.percentage }}%;" aria-hidden="true"></span>
                <span class="material-pct">{{ m.percentage }}%</span>
                <span class="material-name">{{ m.material }}</span>
              </li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}

      {# ── Care ─────────────────────────────────────────────── #}
      {% if garment.washing_direction or garment.ironing_direction %}
        <div class="care-section">
          <h2 class="section-heading">Care</h2>
          <dl class="meta-grid">
            {% if garment.washing_direction %}
              <dt>Wash</dt>
              <dd>
                {{ garment.washing_direction }}
                {% if garment.maximum_washing_temperature %}
                  <span class="meta-sub">max {{ garment.maximum_washing_temperature }}°C</span>
                {% endif %}
              </dd>
            {% endif %}
            {% if garment.ironing_direction %}
              <dt>Iron</dt>
              <dd>
                {{ garment.ironing_direction }}
                {% if garment.maximum_ironing_temperature %}
                  <span class="meta-sub">max {{ garment.maximum_ironing_temperature }}°C</span>
                {% endif %}
              </dd>
            {% endif %}
          </dl>
        </div>
      {% endif %}

      {# ── Classification tags ───────────────────────────────── #}
      <div class="tag-row">
        <span class="tag tag--layer">{{ garment.layer }}</span>

        {% if garment.formal is not none %}
          <span class="tag tag--formality">{{ 'Formal' if garment.formal else 'Casual' }}</span>
        {% endif %}

        {% if garment.gender %}
          <span class="tag tag--gender">{{ garment.gender }}</span>
        {% endif %}

        {% if garment.base_category == 'Sleepwear' %}
          <span class="tag tag--nightwear">Sleepwear</span>
        {% endif %}

        {% if garment.leisure_use %}
          <span class="tag tag--leisure">{{ garment.leisure_use }}</span>
        {% endif %}

        {% if garment.relinquished %}
          <span class="tag tag--relinquished">
            Relinquished {{ garment.relinquished.strftime('%d %b %Y') }}
          </span>
        {% endif %}
      </div>

      {# ── Description ──────────────────────────────────────── #}
      {% if garment.description %}
        <p class="garment-description">{{ garment.description }}</p>
      {% endif %}

      {# ── Style details ────────────────────────────────────────── #}
      {% set bc = garment.base_category %}

      {% if bc == 'Bra' and garment.wired is not none %}
        <div class="style-section">
          <h2 class="section-heading">Style Details</h2>
          <ul class="style-attrs" role="list">
            {% if garment.bra_cut %}<li>{{ garment.bra_cut }}</li>{% endif %}
            {% if garment.wired %}<li>Wired</li>{% endif %}
            {% if garment.padded %}<li>Padded</li>{% endif %}
            {% if garment.push_up %}<li>Push-up</li>{% endif %}
            {% if garment.side_support %}<li>Side support</li>{% endif %}
            {% if garment.front_fastening %}<li>Front fastening</li>{% endif %}
            {% if garment.bra_neckline %}<li>{{ garment.bra_neckline }} neckline</li>{% endif %}
            {% if garment.double_strapped %}<li>Double-strapped</li>{% endif %}
          </ul>
        </div>

      {% elif bc == 'Dress' and garment.dress_skirt_length %}
        <div class="style-section">
          <h2 class="section-heading">Style Details</h2>
          <ul class="style-attrs" role="list">
            <li>{{ garment.dress_skirt_length }}</li>
            {% if garment.dress_sleeve %}<li>{{ garment.dress_sleeve }} sleeve</li>{% endif %}
            {% if garment.dress_neckline %}<li>{{ garment.dress_neckline }} neckline</li>{% endif %}
            {% if garment.bodice %}<li>{{ garment.bodice }} bodice</li>{% endif %}
          </ul>
        </div>

      {% elif bc == 'Shirt' and (garment.shirt_sleeve or garment.collar or garment.pintucks) %}
        <div class="style-section">
          <h2 class="section-heading">Style Details</h2>
          <ul class="style-attrs" role="list">
            {% if garment.shirt_sleeve %}<li>{{ garment.shirt_sleeve }} sleeve</li>{% endif %}
            {% if garment.collar %}<li>{{ garment.collar }} collar</li>{% endif %}
            {% if garment.cuffs %}<li>{{ garment.cuffs }} cuffs</li>{% endif %}
            {% if garment.pintucks %}<li>Pintucks</li>{% endif %}
          </ul>
        </div>

      {% elif bc == 'Underwear' and garment.high_waist is not none %}
        <div class="style-section">
          <h2 class="section-heading">Style Details</h2>
          <ul class="style-attrs" role="list">
            {% if garment.high_waist %}<li>High waist</li>{% endif %}
            {% if garment.high_leg %}<li>French cut</li>{% endif %}
            {% if garment.seamless %}<li>Seamless</li>{% endif %}
          </ul>
        </div>

      {% elif bc == 'Skirt' and garment.skirt_length %}
        <div class="style-section">
          <h2 class="section-heading">Style Details</h2>
          <ul class="style-attrs" role="list">
            <li>{{ garment.skirt_length }}</li>
          </ul>
        </div>

      {% elif bc == 'Hosiery' and garment.denier is not none %}
        <div class="style-section">
          <h2 class="section-heading">Style Details</h2>
          <dl class="meta-grid">
            <dt>Denier</dt><dd>{{ garment.denier }}d</dd>
            {% if garment.lace_top %}<dt>Lace top</dt><dd>Yes</dd>{% endif %}
          </dl>
        </div>

      {% elif bc == 'Jumper' and (garment.jumper_sleeve or garment.jumper_neckline or garment.jumper_cropped) %}
        <div class="style-section">
          <h2 class="section-heading">Style Details</h2>
          <ul class="style-attrs" role="list">
            {% if garment.jumper_sleeve %}<li>{{ garment.jumper_sleeve }} sleeve</li>{% endif %}
            {% if garment.jumper_neckline %}<li>{{ garment.jumper_neckline }} neckline</li>{% endif %}
            {% if garment.jumper_cropped %}<li>Cropped</li>{% endif %}
          </ul>
        </div>

      {% elif bc == 'Trouser' and (garment.trouser_cut or garment.trouser_rise) %}
        <div class="style-section">
          <h2 class="section-heading">Style Details</h2>
          <ul class="style-attrs" role="list">
            {% if garment.trouser_cut %}<li>{{ garment.trouser_cut }}</li>{% endif %}
            {% if garment.trouser_rise %}<li>{{ garment.trouser_rise }}-rise</li>{% endif %}
          </ul>
        </div>

      {% elif bc == 'Shoe' and (garment.shoe_heel_height is not none or garment.shoe_closure) %}
        <div class="style-section">
          <h2 class="section-heading">Style Details</h2>
          <ul class="style-attrs" role="list">
            {% if garment.shoe_heel_height is not none %}
              {% if garment.shoe_heel_height == 0 %}<li>Flat</li>
              {% elif garment.shoe_heel_height <= 30 %}<li>Low heel ({{ garment.shoe_heel_height }}mm)</li>
              {% elif garment.shoe_heel_height <= 70 %}<li>Mid heel ({{ garment.shoe_heel_height }}mm)</li>
              {% else %}<li>High heel ({{ garment.shoe_heel_height }}mm)</li>
              {% endif %}
            {% endif %}
            {% if garment.shoe_closure %}<li>{{ garment.shoe_closure }}</li>{% endif %}
          </ul>
        </div>

      {% elif bc == 'Coat' and (garment.coat_length or garment.coat_lapel) %}
        <div class="style-section">
          <h2 class="section-heading">Style Details</h2>
          <ul class="style-attrs" role="list">
            {% if garment.coat_length %}<li>{{ garment.coat_length }}</li>{% endif %}
            {% if garment.coat_lapel %}<li>{{ garment.coat_lapel }} lapel</li>{% endif %}
          </ul>
        </div>

      {% endif %}

    </section>{# /detail-meta #}
  </div>{# /detail-layout #}

  {# ── Duplicates ───────────────────────────────────────────── #}
  {% if duplicates %}
    <section class="detail-section">
      <h2 class="section-heading">Also Owned</h2>
      <ul class="duplicate-list" role="list">
        {% for d in duplicates %}
          <li>
            <a href="{{ url_for('wardrobe.detail', garment_id=d.id) }}" class="duplicate-link">
              #{{ d.id }}{% if d.colour %} — {{ d.colour }}{% endif %}
            </a>
          </li>
        {% endfor %}
      </ul>
    </section>
  {% endif %}

  {# ── Sets ─────────────────────────────────────────────────── #}
  {% if sets %}
    <section class="detail-section">
      <h2 class="section-heading">Part of Sets</h2>
      <ul class="set-list" role="list">
        {% for s in sets %}
          <li class="set-item">
            <a href="{{ url_for('sets_.detail', name=s.name) }}" class="set-name">{{ s.name }}</a>
            <span class="set-type">{{ s.classification }}</span>
          </li>
        {% endfor %}
      </ul>
    </section>
  {% endif %}

  {# ── Collections ──────────────────────────────────────────── #}
  {% if collections %}
    <section class="detail-section">
      <h2 class="section-heading">Part of Collections</h2>
      <ul class="set-list" role="list">
        {% for c in collections %}
          <li class="set-item">
            <a href="{{ url_for('collections.detail', name=c.name) }}" class="set-name">{{ c.name }}</a>
            {% if c.vendor %}<span class="set-type">{{ c.vendor }}</span>{% endif %}
          </li>
        {% endfor %}
      </ul>
    </section>
  {% endif %}

  {# ── Wear history ─────────────────────────────────────────── #}
  <section class="detail-section">
    <h2 class="section-heading">
      Wear History
      {% if wears %}
        <span class="section-count">
          {{ wears|length }}{%- if wears|length == 30 %}+{% endif %} recorded
        </span>
      {% endif %}
    </h2>
    {% if wears %}
      <ol class="wear-list" reversed>
        {% for w in wears %}
          <li class="wear-entry">{{ w.day.strftime('%A, %-d %B %Y') }}</li>
        {% endfor %}
      </ol>
    {% else %}
      <p class="empty-state">No wears recorded yet.</p>
    {% endif %}
  </section>

</article>
{% endblock %}