{% extends "base.html" %}
{% block title %}Collections{% endblock %}

{% block styles %}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.collection-card {
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s;
}

.collection-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.collection-card-image {
  aspect-ratio: 3/4;
  background: var(--cream);
  overflow: hidden;
}

.collection-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.collection-card-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rule);
  font-size: 2rem;
}

.collection-card-body {
  padding: 0.6rem 0.75rem 0.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.collection-card-name {
  font-family: var(--serif-display);
  font-size: 0.9rem;
  font-weight: 600;
}

.collection-card-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

.new-collection-form {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  max-width: 560px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.75rem;
}

@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.3rem; }

.field label {
  font-family: var(--serif-body);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field select {
  font-family: var(--serif-body);
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(42,77,58,0.25);
  border-radius: 2px;
  background: #fff;
  color: inherit;
  width: 100%;
}

.field input:focus,
.field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
{% endblock %}

{% block content %}
<section>

  <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px;">
    <h2 style="margin-bottom:0;border:none;">Collections</h2>
    <span class="text-muted" style="font-size:0.85rem;">
      {{ collections|length }} collection{{ 's' if collections|length != 1 }}
    </span>
  </div>

  {% if collections %}
    <div class="collection-grid">
      {% for c in collections %}
        <a href="{{ url_for('collections.detail', name=c.name) }}"
           class="collection-card">
          <div class="collection-card-image">
            {% if c.hero_image %}
              <img src="{{ url_for('wardrobe.image', filename=c.hero_image) }}"
                   alt="{{ c.name }}" loading="lazy">
            {% else %}
              <div class="collection-card-image-placeholder">◻</div>
            {% endif %}
          </div>
          <div class="collection-card-body">
            <div class="collection-card-name">{{ c.name }}</div>
            <div class="collection-card-meta">
              {% if c.vendor %}{{ c.vendor }} · {% endif %}
              {{ c.owned_count }} piece{{ 's' if c.owned_count != 1 }}
            </div>
          </div>
        </a>
      {% endfor %}
    </div>
  {% else %}
    <p class="text-muted" style="margin-bottom:2rem;">No collections yet.</p>
  {% endif %}

  {# ── New collection ──────────────────────────────────────────── #}
  <div class="new-collection-form">
    <h2 style="margin-bottom:1rem;">New Collection</h2>
    <form method="post" action="{{ url_for('collections.new') }}">
      <div class="field-row">
        <div class="field">
          <label for="c-name">Name</label>
          <input type="text" id="c-name" name="name" required
                 placeholder="e.g. New Romance">
        </div>
        <div class="field">
          <label for="c-vendor">Vendor</label>
          <select id="c-vendor" name="vendor">
            <option value="">— none —</option>
            {% for v in vendors %}
              <option value="{{ v }}">{{ v }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="field">
          <label for="c-website">Website</label>
          <input type="text" id="c-website" name="website" placeholder="https://…">
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Create</button>
    </form>
  </div>

</section>
{% endblock %}