{% extends "webapp/base.html" %}
{% block title %}{{ t('advanced_search') }} — FIGHTSKILL{% endblock %}
{% block content %}
<div style="max-width:1280px;margin:0 auto">

  <!-- Header -->
  <div style="margin-bottom:1.5rem">
    <h1 style="font-size:1.8rem"><span style="color:var(--neon)">{{ t('advanced_search') }}</span></h1>
  </div>

  <!-- Filters -->
  <div class="card" style="margin-bottom:1.5rem">
    <form method="GET" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem">
      <div>
        <label style="font-size:0.75rem;color:var(--text-muted);text-transform:uppercase">{{ t('filter_by_game') }}</label>
        <select class="input" name="game_id">
          <option value="">All 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.75rem;color:var(--text-muted);text-transform:uppercase">{{ t('start_time') }}</label>
        <input type="datetime-local" class="input" name="start_time" value="{{ start_time }}">
      </div>
      <div>
        <label style="font-size:0.75rem;color:var(--text-muted);text-transform:uppercase">{{ t('end_time') }}</label>
        <input type="datetime-local" class="input" name="end_time" value="{{ end_time }}">
      </div>
      <div style="display:flex;align-items:flex-end;gap:0.5rem">
        <button type="submit" class="btn btn-primary">{{ t('apply_filters') }}</button>
        <a href="{{ url_for('web.search') }}" class="btn btn-ghost">{{ t('clear') }}</a>
      </div>
    </form>
  </div>

  <!-- Matches -->
  <h2 style="font-size:1.2rem;margin-bottom:1rem">{{ t('matches') }} ({{ matches|length }})</h2>
  <div style="display:flex;gap:0.4rem;margin-bottom:1rem;align-items:center;font-size:0.8rem;color:var(--text-muted)">
    🌐 {{ t('region') }}: <strong style="color:var(--neon)">
      {% if user_region == 'ir' %}🇮🇷 ایران{% elif user_region == 'eu' %}🇪🇺 اروپا{% elif user_region == 'ea' %}🌏 آسیا{% elif user_region == 'na' %}🇺🇸 آمریکا{% else %}🌍 گلوبال{% endif %}
    </strong>
    <span style="color:var(--text-muted);font-size:0.75rem">— {{ t('region_note') | default('Matches in your region only') }}</span>
  </div>
  <div style="display:grid;gap:0.75rem">
    {% for m in matches %}
    <div class="card" style="display:flex;align-items:center;gap:1rem;padding:1rem">
      <div style="flex:1">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.25rem">
          <span style="font-weight:700">{{ m.title }}</span>
          <span class="badge {% if m.status=='live' %}badge-pink{% else %}badge-neon{% endif %}">{{ m.status }}</span>
        </div>
        <div style="font-size:0.8rem;color:var(--text-muted)">{{ m.game.name }} · {{ m.starts_at.strftime('%H:%M %m/%d') }}</div>
      </div>
      <div style="text-align:right;display:flex;align-items:center;gap:0.75rem">
        <div style="font-family:'Orbitron';font-size:0.85rem">
          <span style="color:var(--neon);font-weight:700">{{ m.current_players }}</span><span style="color:var(--text-muted)"> : {{ m.capacity }}</span>
        </div>
        <span class="match-region-tag">
          {% if m.region == 'ir' %}🇮🇷 IR{% elif m.region == 'eu' %}🇪🇺 EU{% elif m.region == 'ea' %}🌏 EA{% elif m.region == 'na' %}🇺🇸 NA{% else %}🌍 GL{% endif %}
        </span>
        {% if m.id not in registered_match_ids %}
        <a href="{{ url_for('web.match_join', match_id=m.id) }}" class="btn btn-sm btn-primary">{{ t('join_now') }}</a>
        {% else %}
        <span class="badge badge-neon">{{ t('you_are_in') }}</span>
        {% endif %}
      </div>
    </div>
    {% else %}
    <div class="card text-center" style="padding:2rem;color:var(--text-muted)">{{ t('no_matches') }}</div>
    {% endfor %}
  </div>

</div>

<style>
  .match-region-tag {
    font-size: 0.6rem; font-weight: 600; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.15rem 0.4rem; letter-spacing: 0.05em; white-space: nowrap;
    font-family: 'Orbitron', sans-serif;
  }
</style>
{% endblock %}