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

{% block styles %}
.vendor-count {
  font-size: 0.82rem;
  color: var(--muted);
}

.vendor-website {
  font-size: 0.85rem;
}

.new-vendor-form {
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  max-width: 480px;
}

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

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

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

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

.inline-field input {
  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%;
}

.inline-field input: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;">Vendors</h2>
    <span class="text-muted" style="font-size:0.85rem;">
      {{ vendors|length }} vendor{{ 's' if vendors|length != 1 }}
    </span>
  </div>

  {% if vendors %}
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Website</th>
        <th>Labels</th>
        <th>Garments</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for v in vendors %}
      <tr>
        <td>{{ v.name }}</td>
        <td class="vendor-website">
          {% if v.website %}
            <a href="{{ v.website }}" target="_blank" rel="noopener">
              {{ v.website | replace('https://', '') | replace('http://', '') | truncate(40, True) }}
            </a>
          {% else %}
            <span class="text-muted">—</span>
          {% endif %}
        </td>
        <td class="vendor-count">{{ v.label_count }}</td>
        <td class="vendor-count">{{ v.garment_count }}</td>
        <td style="text-align:right;">
          <a href="{{ url_for('vendors.edit', name=v.name) }}"
             class="btn btn-outline" style="font-size:0.75rem;padding:4px 12px;">
            Edit
          </a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
    <p class="text-muted">No vendors yet.</p>
  {% endif %}

  {# ── New vendor ─────────────────────────────────────────────── #}
  <div class="new-vendor-form">
    <h2 style="margin-bottom:1rem;">Add Vendor</h2>
    <form method="post" action="{{ url_for('vendors.new') }}">
      <div class="inline-field-row">
        <div class="inline-field">
          <label for="v-name">Name</label>
          <input type="text" id="v-name" name="name" required placeholder="e.g. Pour Moi">
        </div>
        <div class="inline-field">
          <label for="v-website">Website</label>
          <input type="text" id="v-website" name="website" placeholder="https://…">
        </div>
        <button type="submit" class="btn btn-primary">Add</button>
      </div>
    </form>
  </div>

</section>
{% endblock %}