{% extends "base.html" %}
{% block title %}Equipment — The Shooter's Network{% endblock %}
{% block content %}
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;">
  <h1 style="margin:0;">My Equipment</h1>
  <a href="{{ url_for('equipment.new') }}"
     style="background:#1a1a2e;color:#fff;padding:0.5rem 1.2rem;border-radius:4px;font-size:0.92rem;text-decoration:none;">
    + Add item
  </a>
</div>

{% if items %}
  {% set cat_labels = dict(categories) %}
  {% for cat_key, cat_label in categories %}
    {% set group = items | selectattr('category', 'equalto', cat_key) | list %}
    {% if group %}
    <h2>{{ cat_label }}s</h2>
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-bottom:2rem;">
      {% for item in group %}
      <div style="border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;">
        {% if item.photo_url %}
          <img src="{{ item.photo_url }}" alt="{{ item.name }}"
               style="width:100%;height:150px;object-fit:cover;display:block;">
        {% else %}
          <div style="width:100%;height:80px;background:#f0f4ff;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#c0c8e0;">
            {% if item.category == 'rifle' or item.category == 'handgun' %}🔫
            {% elif item.category == 'scope' %}🔭
            {% else %}🔩{% endif %}
          </div>
        {% endif %}
        <div style="padding:0.9rem 1rem;">
          <div style="font-weight:600;color:#1a1a2e;margin-bottom:0.2rem;">{{ item.name }}</div>
          {% if item.brand or item.model %}
          <div style="font-size:0.85rem;color:#666;margin-bottom:0.3rem;">
            {{ [item.brand, item.model] | select | join(' · ') }}
          </div>
          {% endif %}
          {% if item.caliber %}
          <div style="font-size:0.82rem;color:#888;margin-bottom:0.6rem;">{{ item.caliber }}</div>
          {% endif %}
          <div style="display:flex;gap:0.75rem;margin-top:0.5rem;">
            <a href="{{ url_for('equipment.detail', item_id=item.id) }}" style="font-size:0.85rem;">View</a>
            <a href="{{ url_for('equipment.edit', item_id=item.id) }}" style="font-size:0.85rem;">Edit</a>
            <form method="post" action="{{ url_for('equipment.delete', item_id=item.id) }}" style="display:inline;"
                  onsubmit="return confirm('Delete {{ item.name }}?');">
              <button type="submit" class="btn-link" style="font-size:0.85rem;color:#e74c3c;">Delete</button>
            </form>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% endif %}
  {% endfor %}
{% else %}
<div style="text-align:center;padding:3rem 0;color:#888;">
  <div style="font-size:3rem;margin-bottom:1rem;">🔫</div>
  <p style="margin-bottom:1rem;">No equipment yet.</p>
  <a href="{{ url_for('equipment.new') }}">Add your first item</a>
</div>
{% endif %}
{% endblock %}