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

<div class="grid grid-2">
  {% for m in matches %}
  <div class="card animate-in game-3d-card" style="border-color:rgba(245,158,11,0.18)">
    <div class="card-inner">
      <div style="padding:0.6rem">
        <div class="flex justify-between" style="margin-bottom:0.25rem">
          <span class="badge" style="background:rgba(245,158,11,0.1);color:var(--w);border:1px solid rgba(245,158,11,0.18);font-size:0.58rem">{{ t('special_match') }}</span>
          <span class="badge badge-green" style="font-size:0.56rem">{{ m.game.name }}</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.current_players }}/{{ m.capacity }}
        </div>
        <div class="flex" style="gap:0.3rem">
          {% if user and user.id in m.participants|map(attribute='user_id')|list %}
            <span class="badge badge-green" style="font-size:0.62rem;padding:0.15rem 0.5rem">✓ {{ t('you_are_in') }}</span>
          {% else %}
            <a href="{{ url_for('web.match_join', match_id=m.id) }}" class="btn btn-primary btn-sm" style="flex:1;justify-content:center;font-size:0.72rem">{{ t('join_now') }}</a>
          {% endif %}
        </div>
      </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>
{% endblock %}