{% extends "base.html" %}
{% set editing = item is not none %}
{% block title %}{{ _('Edit') if editing else _('Add equipment') }} — The Shooter's Network{% endblock %}
{% block content %}
<h1>{{ _('Edit') if editing else _('Add equipment') }}</h1>

{% set f = prefill or item %}

<form method="post"
      action="{{ url_for('equipment.edit', item_id=item.id) if editing else url_for('equipment.new') }}"
      enctype="multipart/form-data"
      style="max-width:520px;">

  <div style="margin-bottom:1rem;">
    <label class="field-label">{{ _('Category *') }}</label>
    <select name="category" required style="width:100%;padding:0.55rem 0.75rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;background:#fff;">
      {% for key, label in categories %}
        <option value="{{ key }}" {% if (f and f.category == key) or (not f and key == 'rifle') %}selected{% endif %}>{{ label }}</option>
      {% endfor %}
    </select>
  </div>

  <div style="margin-bottom:1rem;">
    <label class="field-label">{{ _('Name *') }}</label>
    <input type="text" name="name" value="{{ f.name if f else '' }}" required
           placeholder="e.g. Tikka T3x, Glock 17"
           style="width:100%;padding:0.55rem 0.75rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;">
  </div>

  <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;">
    <div>
      <label class="field-label">{{ _('Brand') }}</label>
      <input type="text" name="brand" value="{{ f.brand if f else '' }}"
             placeholder="e.g. Tikka, Leupold"
             style="width:100%;padding:0.55rem 0.75rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;">
    </div>
    <div>
      <label class="field-label">{{ _('Model') }}</label>
      <input type="text" name="model" value="{{ f.model if f else '' }}"
             placeholder="e.g. T3x, VX-3HD"
             style="width:100%;padding:0.55rem 0.75rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;">
    </div>
  </div>

  <div id="rifle-fields" style="margin-bottom:1rem;">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
      <div>
        <label class="field-label">{{ _('Caliber') }}</label>
        <input type="text" name="caliber" value="{{ f.caliber if f else '' }}"
               placeholder="e.g. .308 Win, 6.5 CM"
               style="width:100%;padding:0.55rem 0.75rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;">
      </div>
    </div>
  </div>

  <div id="scope-fields" style="display:none;margin-bottom:1rem;">
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;">
      <div>
        <label class="field-label">{{ _('Magnification') }}</label>
        <input type="text" name="magnification" value="{{ f.magnification if f else '' }}"
               placeholder="e.g. 3-15x50"
               style="width:100%;padding:0.55rem 0.75rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;">
      </div>
      <div>
        <label class="field-label">{{ _('Reticle') }}</label>
        <select name="reticle" style="width:100%;padding:0.55rem 0.75rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;background:#fff;">
          <option value="">—</option>
          <option value="FFP" {% if f and f.reticle == 'FFP' %}selected{% endif %}>FFP (First Focal Plane)</option>
          <option value="SFP" {% if f and f.reticle == 'SFP' %}selected{% endif %}>SFP (Second Focal Plane)</option>
        </select>
      </div>
      <div>
        <label class="field-label">{{ _('Unit') }}</label>
        <select name="unit" style="width:100%;padding:0.55rem 0.75rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;background:#fff;">
          <option value="">—</option>
          <option value="MOA" {% if f and f.unit == 'MOA' %}selected{% endif %}>MOA</option>
          <option value="MRAD" {% if f and f.unit == 'MRAD' %}selected{% endif %}>MRAD</option>
        </select>
      </div>
    </div>
  </div>

  <div style="margin-bottom:1rem;">
    <label class="field-label">{{ _('Serial number') }}</label>
    <input type="text" name="serial_number" value="{{ f.serial_number if f else '' }}"
           style="width:100%;padding:0.55rem 0.75rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;">
  </div>

  <div style="margin-bottom:1rem;">
    <label class="field-label">{{ _('Notes') }}</label>
    <textarea name="notes" rows="3"
              style="width:100%;padding:0.55rem 0.75rem;border:1px solid #ccc;border-radius:4px;font-size:0.95rem;resize:vertical;">{{ f.notes if f else '' }}</textarea>
  </div>

  <div style="margin-bottom:1.5rem;">
    <label class="field-label">{{ _('Photo') }}</label>
    {% if editing and item.photo_url %}
      <div style="margin-bottom:0.5rem;">
        <img src="{{ item.photo_url }}" alt="Current photo"
             style="height:80px;border-radius:4px;object-fit:cover;">
        <span style="font-size:0.82rem;color:#888;margin-left:0.5rem;">{{ _('Upload a new one to replace it.') }}</span>
      </div>
    {% endif %}
    <input type="file" name="photo" accept="image/*"
           style="font-size:0.92rem;">
  </div>

  <div style="display:flex;gap:1rem;align-items:center;">
    <button type="submit"
            style="background:#1a1a2e;color:#fff;border:none;border-radius:4px;padding:0.6rem 1.5rem;font-size:0.95rem;cursor:pointer;">
      {{ _('Save changes') if editing else _('Add equipment') }}
    </button>
    <a href="{{ url_for('equipment.detail', item_id=item.id) if editing else url_for('equipment.index') }}"
       style="font-size:0.9rem;color:#666;">{{ _('Cancel') }}</a>
  </div>
</form>

<style>.field-label { display:block; font-size:.88rem; font-weight:600; color:#444; margin-bottom:.3rem; }</style>

<script>
function toggleCategoryFields() {
  var cat = document.querySelector('[name="category"]').value;
  var isScope = cat === 'scope';
  document.getElementById('scope-fields').style.display = isScope ? '' : 'none';
  document.getElementById('rifle-fields').style.display = isScope ? 'none' : '';
}
document.querySelector('[name="category"]').addEventListener('change', toggleCategoryFields);
toggleCategoryFields(); // run on load
</script>
{% endblock %}