{% extends "base.html" %}
{% block title %}{{ item.name }} — 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;">
  <div>
    <div style="font-size:0.82rem;color:#888;margin-bottom:.2rem;">
      <a href="{{ url_for('equipment.index') }}">Equipment</a> &rsaquo;
      {{ categories.get(item.category, item.category).title() }}
    </div>
    <h1 style="margin:0;">{{ item.name }}</h1>
  </div>
  <div style="display:flex;gap:0.75rem;">
    <a href="{{ url_for('equipment.edit', item_id=item.id) }}"
       style="background:#f0f4ff;color:#1a1a2e;padding:0.5rem 1.1rem;border-radius:4px;font-size:0.9rem;text-decoration:none;">
      Edit
    </a>
    <form method="post" action="{{ url_for('equipment.delete', item_id=item.id) }}"
          onsubmit="return confirm('Delete {{ item.name }}?');">
      <button type="submit"
              style="background:#fff0f0;color:#c0392b;border:1px solid #f5c6c6;border-radius:4px;padding:0.5rem 1.1rem;font-size:0.9rem;cursor:pointer;">
        Delete
      </button>
    </form>
  </div>
</div>

{% if item.photo_url %}
<div style="margin-bottom:1.5rem;">
  <img src="{{ item.photo_url }}"
       data-gallery="equipment-{{ item.id }}"
       data-src="{{ item.photo_url }}"
       data-caption="{{ item.name }}"
       alt="{{ item.name }}"
       style="max-width:480px;width:100%;border-radius:8px;display:block;margin-bottom:.6rem;">
  <div style="display:flex;gap:.5rem;">
    {% for label, deg in [('↺ Left', -90), ('↻ Right', 90), ('180°', 180)] %}
    <form method="post" action="{{ url_for('equipment.rotate_photo_view', item_id=item.id) }}">
      <input type="hidden" name="degrees" value="{{ deg }}">
      <button type="submit"
              style="background:#f0f4ff;color:#1a1a2e;border:1px solid #c8d4f0;border-radius:4px;padding:.3rem .75rem;font-size:0.82rem;cursor:pointer;">
        {{ label }}
      </button>
    </form>
    {% endfor %}
  </div>
</div>
{% endif %}

<table style="max-width:480px;">
  <tbody>
    <tr><td style="color:#888;width:140px;">Category</td><td>{{ categories.get(item.category, item.category).title() }}</td></tr>
    {% if item.brand %}<tr><td style="color:#888;">Brand</td><td>{{ item.brand }}</td></tr>{% endif %}
    {% if item.model %}<tr><td style="color:#888;">Model</td><td>{{ item.model }}</td></tr>{% endif %}
    {% if item.category == 'scope' %}
      {% if item.magnification %}<tr><td style="color:#888;">Magnification</td><td>{{ item.magnification }}</td></tr>{% endif %}
      {% if item.reticle %}<tr><td style="color:#888;">Reticle</td><td>{{ item.reticle }}</td></tr>{% endif %}
      {% if item.unit %}<tr><td style="color:#888;">Unit</td><td>{{ item.unit }}</td></tr>{% endif %}
    {% else %}
      {% if item.caliber %}<tr><td style="color:#888;">Caliber</td><td>{{ item.caliber }}</td></tr>{% endif %}
    {% endif %}
    {% if item.serial_number %}<tr><td style="color:#888;">Serial</td><td>{{ item.serial_number }}</td></tr>{% endif %}
    <tr><td style="color:#888;">Added</td><td>{{ item.created_at.strftime('%d %b %Y') }}</td></tr>
  </tbody>
</table>

{% if item.notes %}
<div style="margin-top:1.5rem;">
  <h3>Notes</h3>
  <p style="color:#555;white-space:pre-wrap;">{{ item.notes }}</p>
</div>
{% endif %}
{% endblock %}