{% extends "base.html" %}
{% from '_macros/carousel.html' import carousel with context %}
{% block title %}Garments Suite — {{ set.name }}{% endblock %}

{% block styles %}
<style>
/* ── Page wrapper ── */
.set-detail {
  max-width: 1000px;
  margin: 0 auto;
}

/* ── Breadcrumb ── */
.set-breadcrumb { margin-bottom: 1rem; }
.set-breadcrumb a {
  font-family: var(--serif-body);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.set-breadcrumb a:hover { text-decoration: underline; }

/* ── Header ── */
.set-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.set-title {
  font-family: var(--serif-display);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 400;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.set-title-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.set-meta {
  font-family: var(--serif-body);
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 2rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.btn-edit {
  font-family: var(--serif-body);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(42,77,58,0.3);
  background: none;
  padding: 0.35rem 0.9rem;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.btn-edit:hover { background: rgba(42,77,58,0.06); }

/* ── Carousel ── */
.carousel-section { margin-bottom: 2.5rem; }

.carousel-section-heading {
  font-family: var(--serif-body);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin: 0 0 0.75rem;
}

.carousel { position: relative; user-select: none; }

.carousel-track-wrap {
  overflow: hidden;
  border-radius: 2px;
}

.carousel-track {
  display: flex;
  transition: transform 0.3s ease;
}

.carousel-slide {
  flex: 0 0 var(--slide-w, 160px);
  width: var(--slide-w, 160px);
  margin-right: 10px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.carousel-slide img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}
.carousel-slide:hover img,
.carousel-slide.active  img { border-color: var(--accent); }

/* Carousel nav buttons.
   On touch devices (no hover) buttons are always visible;
   on pointer devices they appear on hover. */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.88);
  border: none;
  width: 2.5rem;
  height: 4rem;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--accent);
  border-radius: 2px;
  z-index: 2;
  padding: 0;
  transition: opacity 0.15s, background 0.15s;
  opacity: 1; /* always visible — desktop hover will dim */
}

@media (hover: hover) and (pointer: fine) {
  .carousel-arrow { opacity: 0; }
  .carousel:hover .carousel-arrow { opacity: 1; }
}

.carousel-arrow:hover  { background: rgba(255,255,255,0.98); }
.carousel-arrow--prev  { left: 0.4rem; }
.carousel-arrow--next  { right: 0.4rem; }

.carousel-empty {
  font-family: var(--serif-body);
  font-style: italic;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ── Constituent cards ── */
.constituents-heading {
  font-family: var(--serif-body);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  margin-bottom: 1.25rem;
}

.constituent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

@media (max-width: 400px) {
  .constituent-grid { grid-template-columns: repeat(2, 1fr); }
}

.constituent-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.constituent-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(42,77,58,0.09);
}

.constituent-card-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cream);
}
.constituent-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.constituent-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--muted);
  font-family: var(--serif-body);
  font-style: italic;
}

.constituent-card-body {
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--cream);
}
.constituent-card-name {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.constituent-card-class {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.ordering-badge {
  display: inline-block;
  font-family: var(--serif-body);
  font-size: 0.65rem;
  color: var(--muted);
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 1px;
  padding: 1px 5px;
  margin-bottom: 0.3rem;
}

/* ── Lightbox (lives in the overlay block — outside .page)
   The styles must still be in the styles block so they land
   in <head>.  The HTML is in the overlay block. ── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overscroll-behavior: contain;
}
.lightbox[hidden] { display: none; }

.lightbox-img {
  max-width: min(92vw, 600px);
  max-height: 85dvh; /* dvh accounts for mobile browser chrome */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 2px;
  -webkit-user-drag: none;
  user-select: none;
}

.lightbox-close {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1.25rem, env(safe-area-inset-right));
  background: none;
  border: none;
  color: rgba(255,255,255,0.65);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close:hover { color: #fff; }

.lightbox-prev,
.lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 2.5rem;
  width: 3rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 2px;
  padding: 0;
  transition: background 0.15s;
  z-index: 1001;
  /* Touch target */
  min-width: 44px;
  min-height: 44px;
}
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255,255,255,0.22); }
.lightbox-prev { left: max(0.5rem, env(safe-area-inset-left)); }
.lightbox-next { right: max(0.5rem, env(safe-area-inset-right)); }

.lightbox-counter {
  position: fixed;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.45);
  font-family: var(--serif-body);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  z-index: 1001;
  pointer-events: none;
}
</style>
{% endblock %}

{% block content %}
<div class="set-detail">

  <nav class="set-breadcrumb">
    <a href="{{ url_for('sets_.index') }}">← Sets</a>
  </nav>

  <div class="set-header">
    <h1 class="set-title">
      {% if set.colour and set.hue is not none %}
        <span class="set-title-dot"
              style="background: hsl({{ set.hue }}, {{ set.saturation }}%, {{ set.lightness }}%);"></span>
      {% endif %}
      {{ set.name }}
    </h1>
    <a href="{{ url_for('sets_.edit', name=set.name) }}" class="btn-edit">Edit ✎</a>
  </div>

  <div class="set-meta">
    <span>{{ set.classification }}</span>
    {% if set.colour %}
      <span>·</span>
      <span>{{ set.colour }}</span>
    {% endif %}
    <span>·</span>
    <span>{{ constituents|length }} garment{{ 's' if constituents|length != 1 }}</span>
  </div>

  {# ── Image carousel ── #}
  {% if images %}
      <section class="carousel-section">
      <h2 class="carousel-section-heading">Images</h2>
      {{ carousel(images, 'wardrobe.image') }}
    </section>
  {% else %}
    <p class="carousel-empty">No model images recorded for this set.</p>
  {% endif %}

  {# ── Constituent garment cards ── #}
  {% if constituents %}
    <h2 class="constituents-heading">Garments — {{ constituents|length }}</h2>
    <div class="constituent-grid">
      {% for c in constituents %}
        <a class="constituent-card"
           href="{{ url_for('wardrobe.detail', garment_id=c.id) }}">
          <div class="constituent-card-image">
            {% if c.front_image %}
              <img src="{{ url_for('wardrobe.image', filename=c.front_image) }}"
                   alt="{{ c.garment_name }}" loading="lazy">
            {% else %}
              <div class="constituent-card-placeholder">No image</div>
            {% endif %}
          </div>
          <div class="constituent-card-body">
            <div class="ordering-badge">{{ c.ordering }}</div>
            <div class="constituent-card-name">
              {{ c.garment_name | truncate(36, true, '…') }}
            </div>
            <div class="constituent-card-class">{{ c.classification }}</div>
          </div>
        </a>
      {% endfor %}
    </div>
  {% endif %}

</div>
{% endblock %}