{% extends "wardrobe/garment_form_base.html" %}

{% block page_title %}Edit {{ garment.name or garment.classification }}{% endblock %}
{% block form_title %}Edit Garment{% endblock %}

{% block breadcrumb %}
  <a href="{{ url_for('wardrobe.detail', garment_id=garment.id) }}" class="breadcrumb-link">
    ← {{ garment.name or garment.classification }}
  </a>
{% endblock %}

{% block form_action %}{{ url_for('wardrobe.edit', garment_id=garment.id) }}{% endblock %}
{% block submit_label %}Save Changes{% endblock %}

{% block form_actions_extra %}
  <a href="{{ url_for('wardrobe.detail', garment_id=garment.id) }}"
     class="btn btn--ghost">Cancel</a>
{% endblock %}

{% block images_section %}
  {% if images %}
    <div class="image-grid">
      {% for img in images %}
        <div class="image-card">
          <img src="{{ url_for('wardrobe.image', filename=img.filename) }}"
               alt="{{ img.filename }}" loading="lazy">
          <div class="image-flags">
            <label><input type="checkbox" name="img_front_{{ img.filename }}"
                           {% if img.front %}checked{% endif %}> Front</label>
            <label><input type="checkbox" name="img_back_{{ img.filename }}"
                           {% if img.back %}checked{% endif %}> Back</label>
            <label><input type="checkbox" name="img_model_{{ img.filename }}"
                           {% if img.model %}checked{% endif %}> Model</label>
          </div>
          <p class="image-filename">{{ img.filename }}</p>
          <button type="button"
                  class="btn btn--danger btn--small btn-img-remove"
                  data-filename="{{ img.filename }}"
                  data-action="{{ url_for('wardrobe.image_remove', garment_id=garment.id) }}">
            Remove
          </button>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <p class="empty-state">No images yet.</p>
  {% endif %}
{% endblock %}

{% block danger_zone %}
  {% if not garment.relinquished %}
    <section class="danger-zone">
      <h2 class="edit-section-heading">Danger Zone</h2>
      <div class="danger-inner">
        <p>Mark this garment as relinquished today. Sets the relinquished date and clears the owned flag.</p>
        <form method="post"
              action="{{ url_for('wardrobe.relinquish', garment_id=garment.id) }}"
              onsubmit="return confirm('Mark {{ garment.name or garment.classification }} as relinquished today?')">
          <button type="submit" class="btn btn--danger">Relinquish Today</button>
        </form>
      </div>
    </section>
  {% endif %}
{% endblock %}

{% block membership %}
<section class="membership-section">
  <h2 class="edit-section-heading">Sets &amp; Collections</h2>

  {# ── Sets ── #}
  <details class="membership-panel" {% if member_sets %}open{% endif %}>
    <summary>Sets</summary>

    {% if member_sets %}
      <ul class="membership-list">
        {% for s in member_sets %}
          <li class="membership-item">
            <span>{{ s.name }}</span>
            <span class="membership-type">{{ s.classification }}</span>
            <a href="{{ url_for('sets_.edit', name=s.name) }}"
               class="membership-manage">manage →</a>
          </li>
        {% endfor %}
      </ul>
    {% endif %}

    {% if non_member_sets %}
      <div class="membership-add">
        {% for s in non_member_sets %}
          <form method="post"
                action="{{ url_for('sets_.add', name=s.name) }}"
                class="membership-add-form">
            <input type="hidden" name="garment_id" value="{{ garment.id }}">
            <input type="hidden" name="next"
                   value="{{ url_for('wardrobe.edit', garment_id=garment.id) }}">
            <span class="membership-option-name">{{ s.name }}</span>
            <span class="membership-type">{{ s.classification }}</span>
            <button type="submit" class="btn btn--small btn--ghost">Add</button>
          </form>
        {% endfor %}
      </div>
    {% elif not member_sets %}
      <p class="membership-empty">No sets exist yet.</p>
    {% else %}
      <p class="membership-empty">Member of all sets.</p>
    {% endif %}
  </details>

  {# ── Collections ── #}
  <details class="membership-panel" {% if member_collections %}open{% endif %}>
    <summary>Collections</summary>

    {% if member_collections %}
      <ul class="membership-list">
        {% for c in member_collections %}
          <li class="membership-item">
            <span>{{ c.name }}</span>
            {% if c.vendor %}<span class="membership-type">{{ c.vendor }}</span>{% endif %}
            <a href="{{ url_for('collections.edit', name=c.name) }}"
               class="membership-manage">manage →</a>
          </li>
        {% endfor %}
      </ul>
    {% endif %}

    {% if non_member_collections %}
      <div class="membership-add">
        {% for c in non_member_collections %}
          <form method="post"
                action="{{ url_for('collections.add', name=c.name) }}"
                class="membership-add-form">
            <input type="hidden" name="garment_id" value="{{ garment.id }}">
            <input type="hidden" name="next"
                   value="{{ url_for('wardrobe.edit', garment_id=garment.id) }}">
            <span class="membership-option-name">{{ c.name }}</span>
            {% if c.vendor %}<span class="membership-type">{{ c.vendor }}</span>{% endif %}
            <button type="submit" class="btn btn--small btn--ghost">Add</button>
          </form>
        {% endfor %}
      </div>
    {% elif not member_collections %}
      <p class="membership-empty">No collections exist yet.</p>
    {% else %}
      <p class="membership-empty">Member of all collections.</p>
    {% endif %}
  </details>

</section>
{% endblock %}