{% extends "webapp/base.html" %}
{% block title %}{{ t('special_matches') }} — 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(--orange)">{{ t('special_matches') }}</span></h1>
    <p style="color:var(--text-muted);font-size:0.9rem">{{ t('special_desc') | default('Exclusive tournaments with special prizes.') }}</p>
  </div>

  <!-- Matches -->
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem">
    {% for m in matches %}
    <div class="card" style="overflow:hidden">
      <div style="height:120px;background:linear-gradient(135deg,var(--bg2),var(--surface2));display:flex;align-items:center;justify-content:center;font-size:3rem;border-radius:var(--r) var(--r) 0 0">
        🏆
      </div>
      <div style="padding:1rem">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
          <span class="badge badge-orange">{{ t('featured') }}</span>
          <span class="badge badge-neon">{{ m.game.name }}</span>
        </div>
        <h3 style="font-size:1.1rem;margin-bottom:0.5rem">{{ m.title }}</h3>
        <div style="font-size:0.8rem;color:var(--text-muted);margin-bottom:0.75rem">
          {{ m.starts_at.strftime('%H:%M %m/%d/%Y') }}
        </div>
        <div style="display:flex;justify-content:space-between;align-items:center">
          <span style="font-size:0.85rem;color:var(--text-dim)">{{ m.current_players }}/{{ m.capacity }}</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>
    </div>
    {% else %}
    <div class="card text-center" style="padding:3rem;color:var(--text-muted)">{{ t('no_special_matches') }}</div>
    {% endfor %}
  </div>

</div>
{% endblock %}