{% extends "base.html" %}
{% block title %}{{ t('advanced_search') }} — {{ t('brand') }}{% endblock %}
{% block content %}
<h2 style="margin-bottom:0.5rem;font-size:1.1rem">{{ t('advanced_search') }}</h2>

<div class="card animate-in" style="margin-bottom:0.8rem">
  <form method="GET" class="grid grid-3" style="gap:0.5rem">
    <div>
      <label style="font-size:0.68rem;color:var(--mute)">{{ t('filter_by_game') }}</label>
      <select name="game_id" class="input" onchange="loadModes(this.value)" style="font-size:0.78rem">
        <option value="">— {{ t('games') }} —</option>
        {% for g in games %}
        <option value="{{ g.id }}" {% if g.id == game_id %}selected{% endif %}>{{ g.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label style="font-size:0.68rem;color:var(--mute)">{{ t('filter_by_mode') }}</label>
      <select name="mode_id" class="input" style="font-size:0.78rem">
        <option value="">— {{ t('modes') }} —</option>
        {% for m in modes %}
        <option value="{{ m.id }}" {% if m.id == mode_id %}selected{% endif %}>{{ m.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label style="font-size:0.68rem;color:var(--mute)">{{ t('start_time') }}</label>
      <input type="datetime-local" name="start_time" class="input" value="{{ start_time }}" style="font-size:0.78rem">
    </div>
    <div>
      <label style="font-size:0.68rem;color:var(--mute)">{{ t('end_time') }}</label>
      <input type="datetime-local" name="end_time" class="input" value="{{ end_time }}" style="font-size:0.78rem">
    </div>
    <div class="flex" style="align-items:flex-end;gap:0.3rem">
      <button type="submit" class="btn btn-primary btn-sm">{{ t('apply_filters') }}</button>
      <a href="{{ url_for('web.search') }}" class="btn btn-outline btn-sm">{{ t('clear_filters') }}</a>
    </div>
  </form>
</div>

<h3 style="margin-bottom:0.4rem;font-size:0.92rem">{{ t('daily_matches') }}</h3>
<div class="grid grid-2">
  {% for m in matches %}
  <div class="card animate-in game-3d-card">
    <div class="card-inner">
      <div style="padding:0.6rem">
        <div class="flex justify-between" style="margin-bottom:0.25rem">
          <span class="badge badge-green" style="font-size:0.58rem">{{ m.game.name }}</span>
          <span class="badge badge-amber" style="font-size:0.56rem">{{ m.mode.name if m.mode else '' }}</span>
        </div>
        <div style="font-weight:700;font-size:0.82rem;margin-bottom:0.2rem">{{ m.title }}</div>
        <div style="color:var(--dim);font-size:0.68rem;margin-bottom:0.15rem">{{ m.starts_at.strftime('%H:%M · %m/%d') }}</div>
        <div style="color:var(--mute);font-size:0.65rem;margin-bottom:0.5rem">
          {{ m.entry_fee }} {{ t('entry_fee') }} · {{ m.prize_pool }} · {{ m.capacity }}
        </div>
        <a href="{{ url_for('web.match_join', match_id=m.id) }}" class="btn btn-primary btn-sm" style="width:100%;justify-content:center;font-size:0.72rem">{{ t('join_now') }}</a>
      </div>
    </div>
  </div>
  {% else %}
  <div class="card text-center animate-in" style="color:var(--dim);grid-column:1/-1;padding:1.5rem">
    {{ t('no_matches_today') }}
  </div>
  {% endfor %}
</div>

<script>
function loadModes(gid){if(!gid)return;fetch('/api/game/modes/'+gid).then(r=>r.json()).then(modes=>{const sel=document.querySelector('select[name="mode_id"]');sel.innerHTML='<option value="">-- Modes --</option>';modes.forEach(m=>sel.innerHTML+=`<option value="${m.id}">${m.name}</option>`);});}
{% if game_id %}loadModes({{ game_id }});{% endif %}
</script>
{% endblock %}