{% extends "strava/pages/base.html" %}
{% load static humanize %}

{% block title %}Gear{% endblock %}

{% block content %}
<!-- ============ Gear Page ============ -->
<main class="gear-page" data-screen-label="Gear">

  <!-- Page header -->
  <div class="gear-hero">
    <div>
      <p class="gear-hero-eyebrow">Equipment</p>
      <h1>My Gear</h1>
      <p class="gear-hero-sub" id="gear-hero-sub">{{ total_items }} item{{ total_items|pluralize }} · {{ summary.total_km|intcomma }} km total</p>
    </div>
    <a href="https://www.strava.com/settings/gear" target="_blank" rel="noopener" class="gear-add-btn">
      <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
      Add Gear
    </a>
  </div>

  <!-- Filter bar -->
  <form class="acts-filters" id="gear-filters"
        hx-get="{% url 'strava:gear' %}"
        hx-target="#gear-results"
        hx-swap="innerHTML"
        hx-push-url="true"
        hx-trigger="change, keyup delay:300ms from:#gear-search">
    <input type="hidden" name="athlete" value="{{ athlete_id }}">
    <input type="hidden" name="dir" id="g-dir" value="{{ dir }}">

    <div class="af-search">
      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
      <input type="text" placeholder="Search gear…" id="gear-search" name="q" value="{{ q }}">
    </div>

    <div class="af-sep"></div>

    <div class="af-sport-wrap">
      <select class="af-sport-select" name="type">
        <option value="all"{% if type == 'all' %} selected{% endif %}>All Gear</option>
        <option value="bike"{% if type == 'bike' %} selected{% endif %}>Bikes</option>
        <option value="shoe"{% if type == 'shoe' %} selected{% endif %}>Shoes</option>
      </select>
      <span class="af-sport-caret"><svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
    </div>

    <div class="af-sport-wrap">
      <select class="af-sport-select" name="age">
        <option value="all"{% if age == 'all' %} selected{% endif %}>All (incl. old)</option>
        <option value="active"{% if age == 'active' %} selected{% endif %}>Active only</option>
        <option value="old"{% if age == 'old' %} selected{% endif %}>Old only</option>
      </select>
      <span class="af-sport-caret"><svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
    </div>

    <div class="af-sport-wrap">
      <select class="af-sport-select" name="sort">
        <option value=""{% if not sort %} selected{% endif %}>Default order</option>
        <option value="name"{% if sort == 'name' %} selected{% endif %}>Name</option>
        <option value="distance"{% if sort == 'distance' %} selected{% endif %}>Distance</option>
        <option value="rides"{% if sort == 'rides' %} selected{% endif %}>Activities</option>
        <option value="recent"{% if sort == 'recent' %} selected{% endif %}>Last used</option>
      </select>
      <span class="af-sport-caret"><svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
    </div>

    <button type="button" class="af-view-btn" id="gear-dir-btn" onclick="toggleDir()" title="Toggle sort direction">
      {% if dir == 'asc' %}
        <svg viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="6 11 12 5 18 11"></polyline></svg>
      {% else %}
        <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="6 13 12 19 18 13"></polyline></svg>
      {% endif %}
    </button>
  </form>

  <!-- Gear feed — rendered server-side, swapped by htmx -->
  <div id="gear-results">
    {% include "strava/hx/gear_results.html" %}
  </div>

</main>

<!-- ============ Gear Detail Sheet ============ -->
<div class="gear-sheet" id="gear-sheet" onclick="closeSheetOnBg(event)">
  <div class="gear-sheet-inner" id="gear-sheet-inner">
    <div class="gear-sheet-img" id="gs-img">
      <div class="gear-sheet-img-icon" id="gs-img-icon">
        <!-- icon injected by JS -->
      </div>
      <button class="gear-sheet-close" onclick="closeSheet()">
        <svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
      </button>
    </div>
    <div class="gear-sheet-body">
      <h2 class="gear-sheet-name" id="gs-name"></h2>
      <p class="gear-sheet-brand" id="gs-brand"></p>
      <div class="gear-sheet-stats" id="gs-stats"></div>
      <div class="gear-wear-section">
        <div class="gear-wear-label">
          <span class="wear-name">Wear</span>
          <span class="wear-pct" id="gs-wear-pct"></span>
        </div>
        <div class="gear-wear-track">
          <div class="gear-wear-track-fill" id="gs-wear-fill"></div>
        </div>
      </div>
      <div class="gear-sheet-divider"></div>
      <div class="gear-sheet-row">
        <span class="gear-sheet-row-label">Last used</span>
        <span class="gear-sheet-row-val" id="gs-last-used"></span>
      </div>
      <div class="gear-sheet-row">
        <span class="gear-sheet-row-label">Type</span>
        <span class="gear-sheet-row-val" id="gs-type"></span>
      </div>
      <div class="gear-sheet-divider"></div>
      <div class="gear-sheet-actions">
        <button class="gs-btn gs-btn-ghost">
          <svg viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
          Edit
        </button>
        <button class="gs-btn gs-btn-primary">
          <svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
          View Activities
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'strava/js/gear.js' %}"></script>
{% endblock %}