{% extends 'admin/custom_base.html' %}
{% block body %}
<div class="container-fluid mt-3">
  <h4 class="mb-3">Custom Swatches</h4>
  <p class="text-muted small">Base items have one entry each. Add swatches below to create named color/style variants for gifting.</p>

  {% if error %}
  <div class="alert alert-danger alert-dismissible">{{ error }}<button type="button" class="close" data-dismiss="alert">&times;</button></div>
  {% endif %}
  {% if success %}
  <div class="alert alert-success alert-dismissible">{{ success }}<button type="button" class="close" data-dismiss="alert">&times;</button></div>
  {% endif %}

  {% if SCOPE_ADMIN in scopes %}
  <div class="card mb-4">
    <div class="card-header bg-primary text-white"><strong>+ Add Swatch</strong></div>
    <div class="card-body">
      <form method="POST">
        <input type="hidden" name="action_type" value="add">
        <div class="form-row align-items-end">
          <div class="form-group col-md-3 mb-2">
            <label class="small font-weight-bold">Base Item <span class="text-danger">*</span></label>
            <select class="form-control" id="base-guid-sel">
              <option value="">— select base item —</option>
              {% for item in base_items | sort(attribute='FriendlyName') %}
              <option value="{{ item.AvatarItemDesc.split(',')[0] }}">{{ item.FriendlyName }}</option>
              {% endfor %}
            </select>
            <input type="text" class="form-control mt-1" name="base_guid" id="base-guid-txt" placeholder="or paste base GUID">
          </div>
          <div class="form-group col-md-3 mb-2">
            <label class="small font-weight-bold">Swatch GUID <span class="text-danger">*</span></label>
            <input type="text" class="form-control" name="swatch_guid" placeholder="swatch variant GUID" required>
          </div>
          <div class="form-group col-md-3 mb-2">
            <label class="small font-weight-bold">Friendly Name <span class="text-danger">*</span></label>
            <input type="text" class="form-control" name="friendly_name" placeholder="e.g. Tennis Skirt (Blue)" required>
          </div>
          <div class="form-group col-md-3 mb-2">
            <button type="submit" class="btn btn-success btn-block">Add Swatch</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  {% endif %}

  <div class="card">
    <div class="card-header"><strong>Custom Swatches</strong> <span class="badge badge-secondary ml-1">{{ swatches|length }}</span></div>
    <div class="card-body p-0">
      <table class="table table-sm table-hover mb-0">
        <thead class="thead-dark">
          <tr>
            <th>Friendly Name</th>
            <th>AvatarItemDesc</th>
            {% if SCOPE_ADMIN in scopes %}<th>Actions</th>{% endif %}
          </tr>
        </thead>
        <tbody>
          {% if not swatches %}
          <tr><td colspan="3" class="text-center text-muted py-4">No custom swatches yet.</td></tr>
          {% else %}
          {% for s in swatches %}
          <tr>
            <td><strong>{{ s.FriendlyName }}</strong></td>
            <td><small class="text-monospace">{{ s.AvatarItemDesc }}</small></td>
            {% if SCOPE_ADMIN in scopes %}
            <td>
              <form method="POST" style="display:inline" onsubmit="return confirm('Delete this swatch?')">
                <input type="hidden" name="action_type" value="delete">
                <input type="hidden" name="desc" value="{{ s.AvatarItemDesc }}">
                <button type="submit" class="btn btn-xs btn-outline-danger">Delete</button>
              </form>
            </td>
            {% endif %}
          </tr>
          {% endfor %}
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>
<script>
document.getElementById('base-guid-sel').addEventListener('change', function() {
  if (this.value) document.getElementById('base-guid-txt').value = this.value;
});
</script>
{% endblock %}