{% extends "base.html" %}

{% block title %}HoopScout | Player Search{% endblock %}

{% block content %}
<section class="panel">
  <h1>Player Search</h1>
  <p class="mt-1 text-sm text-slate-600">Filter players by profile, origin, context, and production metrics.</p>

  <form
    method="get"
    class="mt-4 space-y-4"
    hx-get="{% url 'players:index' %}"
    hx-target="#player-results"
    hx-swap="innerHTML"
    hx-push-url="true"
    hx-indicator="#htmx-loading"
    hx-trigger="submit, change delay:200ms from:select, keyup changed delay:400ms from:#id_q"
  >
    <div class="grid gap-3 md:grid-cols-4">
      <div>
        <label for="id_q">Name</label>
        {{ search_form.q }}
      </div>
      <div>
        <label for="id_sort">Sort</label>
        {{ search_form.sort }}
      </div>
      <div>
        <label for="id_page_size">Page size</label>
        {{ search_form.page_size }}
      </div>
      <div class="flex items-end gap-2">
        <button type="submit" class="btn">Apply</button>
        <a class="btn-secondary" href="{% url 'players:index' %}">Reset</a>
      </div>
    </div>

    <div class="grid gap-3 md:grid-cols-3">
      <div><label for="id_nominal_position">Nominal position</label>{{ search_form.nominal_position }}</div>
      <div><label for="id_inferred_role">Inferred role</label>{{ search_form.inferred_role }}</div>
      <div><label for="id_nationality">Nationality</label>{{ search_form.nationality }}</div>
      <div><label for="id_competition">Competition</label>{{ search_form.competition }}</div>
      <div><label for="id_team">Team</label>{{ search_form.team }}</div>
      <div><label for="id_season">Season</label>{{ search_form.season }}</div>
      <div><label for="id_origin_competition">Origin competition</label>{{ search_form.origin_competition }}</div>
      <div><label for="id_origin_team">Origin team</label>{{ search_form.origin_team }}</div>
    </div>

    <details class="rounded-lg border border-slate-200 bg-slate-50 p-3">
      <summary>Physical and age filters</summary>
      <div class="mt-3 grid gap-3 md:grid-cols-4">
        <div><label for="id_age_min">Age min</label>{{ search_form.age_min }}</div>
        <div><label for="id_age_max">Age max</label>{{ search_form.age_max }}</div>
        <div><label for="id_height_min">Height min (cm)</label>{{ search_form.height_min }}</div>
        <div><label for="id_height_max">Height max (cm)</label>{{ search_form.height_max }}</div>
        <div><label for="id_weight_min">Weight min (kg)</label>{{ search_form.weight_min }}</div>
        <div><label for="id_weight_max">Weight max (kg)</label>{{ search_form.weight_max }}</div>
      </div>
    </details>

    <details class="rounded-lg border border-slate-200 bg-slate-50 p-3">
      <summary>Statistical filters</summary>
      <div class="mt-3 grid gap-3 md:grid-cols-4">
        <div><label for="id_games_played_min">Games min</label>{{ search_form.games_played_min }}</div>
        <div><label for="id_games_played_max">Games max</label>{{ search_form.games_played_max }}</div>
        <div><label for="id_minutes_per_game_min">MPG min</label>{{ search_form.minutes_per_game_min }}</div>
        <div><label for="id_minutes_per_game_max">MPG max</label>{{ search_form.minutes_per_game_max }}</div>
        <div><label for="id_points_per_game_min">PPG min</label>{{ search_form.points_per_game_min }}</div>
        <div><label for="id_points_per_game_max">PPG max</label>{{ search_form.points_per_game_max }}</div>
        <div><label for="id_rebounds_per_game_min">RPG min</label>{{ search_form.rebounds_per_game_min }}</div>
        <div><label for="id_rebounds_per_game_max">RPG max</label>{{ search_form.rebounds_per_game_max }}</div>
        <div><label for="id_assists_per_game_min">APG min</label>{{ search_form.assists_per_game_min }}</div>
        <div><label for="id_assists_per_game_max">APG max</label>{{ search_form.assists_per_game_max }}</div>
        <div><label for="id_steals_per_game_min">SPG min</label>{{ search_form.steals_per_game_min }}</div>
        <div><label for="id_steals_per_game_max">SPG max</label>{{ search_form.steals_per_game_max }}</div>
        <div><label for="id_blocks_per_game_min">BPG min</label>{{ search_form.blocks_per_game_min }}</div>
        <div><label for="id_blocks_per_game_max">BPG max</label>{{ search_form.blocks_per_game_max }}</div>
        <div><label for="id_turnovers_per_game_min">TOPG min</label>{{ search_form.turnovers_per_game_min }}</div>
        <div><label for="id_turnovers_per_game_max">TOPG max</label>{{ search_form.turnovers_per_game_max }}</div>
        <div><label for="id_fg_pct_min">FG% min</label>{{ search_form.fg_pct_min }}</div>
        <div><label for="id_fg_pct_max">FG% max</label>{{ search_form.fg_pct_max }}</div>
        <div><label for="id_three_pct_min">3P% min</label>{{ search_form.three_pct_min }}</div>
        <div><label for="id_three_pct_max">3P% max</label>{{ search_form.three_pct_max }}</div>
        <div><label for="id_ft_pct_min">FT% min</label>{{ search_form.ft_pct_min }}</div>
        <div><label for="id_ft_pct_max">FT% max</label>{{ search_form.ft_pct_max }}</div>
        <div><label for="id_efficiency_metric_min">Impact min</label>{{ search_form.efficiency_metric_min }}</div>
        <div><label for="id_efficiency_metric_max">Impact max</label>{{ search_form.efficiency_metric_max }}</div>
      </div>
    </details>
  </form>
</section>

<section id="player-results" class="panel mt-4" aria-live="polite">
  {% include "players/partials/results.html" %}
</section>
{% endblock %}