{% extends "base.html" %}
{% block title %}{{ t('join_now') }} — {{ match.title }}{% endblock %}
{% block content %}
<div style="max-width:600px;margin:2rem auto">
  <a href="{{ url_for('web.home') }}" class="btn btn-outline btn-sm mb">← {{ t('back') }}</a>

  <div class="card animate-in p-5" style="border-color:var(--primary);box-shadow:var(--shadow-glow)">
    <!-- Match Image -->
    {% if match.game.image %}
    <img src="{{ match.game.image }}" style="width:100%;height:180px;object-fit:cover;border-radius:var(--radius) var(--radius) 0 0;margin-bottom:1.5rem" loading="lazy">
    {% else %}
    <div style="height:100px;background:linear-gradient(135deg,var(--surface),var(--bg-card));display:flex;align-items:center;justify-content:center;font-size:3rem;border-radius:var(--radius) var(--radius) 0 0;margin-bottom:1.5rem">{{ match.game.icon }}</div>
    {% endif %}

    <div class="flex justify-between" style="margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem">
      <span class="badge badge-green" style="font-size:1rem;padding:0.4rem 1rem">{{ match.game.icon }} {{ match.game.name }}</span>
      <span class="badge {% if match.status=='live' %}badge-red{% else %}badge-amber{% endif %}" style="font-size:1rem;padding:0.4rem 1rem">{{ match.status|title }}</span>
    </div>

    <h1 style="margin-bottom:1rem;font-size:1.6rem;text-shadow:0 0 15px var(--primary-soft)">{{ match.title }}</h1>

    <div style="background:var(--surface);border-radius:var(--radius-sm);padding:1.2rem;margin-bottom:1.5rem">
      <div class="grid grid-2" style="gap:0.8rem">
        <div>
          <div style="color:var(--text-muted);font-size:0.85rem">{{ t('match_mode') }}</div>
          <div style="font-weight:600">{{ match.mode.name if match.mode else '—' }}</div>
        </div>
        <div>
          <div style="color:var(--text-muted);font-size:0.85rem">{{ t('match_start') }}</div>
          <div style="font-weight:600">{{ match.starts_at.strftime('%Y-%m-%d %H:%M') }}</div>
        </div>
        <div>
          <div style="color:var(--text-muted);font-size:0.85rem">{{ t('match_entry_fee') }}</div>
          <div style="font-weight:600;color:var(--primary)">{{ match.entry_fee }} {{ t('entry_fee') }}</div>
        </div>
        <div>
          <div style="color:var(--text-muted);font-size:0.85rem">{{ t('match_prize_pool') }}</div>
          <div style="font-weight:600;color:var(--warning)">{{ match.prize_pool }}</div>
        </div>
        <div>
          <div style="color:var(--text-muted);font-size:0.85rem">{{ t('capacity') }}</div>
          <div style="font-weight:600">{{ match.current_players }} / {{ match.capacity }}</div>
        </div>
        <div>
          <div style="color:var(--text-muted);font-size:0.85rem">{{ t('team_mode') }}</div>
          <div style="font-weight:600">{{ '✅ {{ t("team_mode") }}' if match.team_mode else '❌ {{ t("solo_mode") }}' }}</div>
        </div>
      </div>
    </div>

    {% if already_registered %}
      <div class="alert alert-warning" style="text-align:center">
        ⚠️ {{ t('already_registered') }}
      </div>
    {% else %}
      <div style="text-align:center;margin-bottom:1.5rem">
        <p style="color:var(--text-secondary);font-size:1.05rem;margin-bottom:1rem">
          {{ t('join_now') }}?
        </p>
        <form method="POST" style="display:inline">
          <button type="submit" class="btn btn-primary" style="padding:1rem 3rem;font-size:1.2rem;box-shadow:var(--shadow-glow)">
            ✅ {{ t('confirm') }} — {{ t('join_now') }}
          </button>
        </form>
        <a href="{{ url_for('web.home') }}" class="btn btn-outline" style="padding:1rem 2rem;margin-right:0.5rem">
          ❌ {{ t('cancel') }}
        </a>
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}