{% extends "admin/base.html" %}
{% block page_title %}🎮 مدیریت بازی‌ها{% endblock %}
{% block content %}
<div class="action-bar">
  <a href="{{ url_for('admin.game_create') }}" class="btn btn-primary" style="box-shadow:var(--shadow-glow)">➕ افزودن بازی جدید</a>
</div>
<div class="grid grid-3">
  {% for g in games %}
  <div class="card game-3d-card animate-in" style="overflow:hidden">
    <div class="card-inner">
      <div style="position:relative;overflow:hidden;height:180px">
        {% if g.image %}
        <img src="{{ g.image }}" style="width:100%;height:100%;object-fit:cover;transition:transform 0.5s" loading="lazy"
             onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
        {% endif %}
        <div style="display:none;width:100%;height:100%;background:linear-gradient(135deg,var(--surface),var(--bg-card));align-items:center;justify-content:center;font-size:4rem">{{ g.icon }}</div>
        <div style="position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,0.85))"></div>
        <div style="position:absolute;bottom:1rem;left:1rem">
          <div style="font-family:'Orbitron';font-weight:800;font-size:1.3rem;text-shadow:0 0 20px var(--primary-glow)">{{ g.name }}</div>
          <div style="font-size:0.8rem;color:var(--text-muted);margin-top:0.2rem">{{ g.modes.filter_by(is_active=True).count() }} مود فعال</div>
        </div>
      </div>
      <div style="padding:1.2rem">
        <div class="flex" style="gap:0.4rem;flex-wrap:wrap">
          <a href="{{ url_for('admin.mode_create', gid=g.id) }}" class="btn btn-outline btn-xs">🎮 {{ t('modes') | default('Modes') }}</a>
          <a href="{{ url_for('admin.game_edit', gid=g.id) }}" class="btn btn-outline btn-xs">✏️</a>
          <a href="{{ url_for('admin.game_delete', gid=g.id) }}" class="btn btn-danger btn-xs" onclick="return confirm('{{ t('confirm_delete') }}')">🗑️</a>
          <label style="display:flex;align-items:center;gap:0.4rem;font-size:0.9rem;color:var(--text-muted);cursor:pointer;margin-right:auto">
            <input type="checkbox" {% if g.is_active %}checked{% endif %} onchange="location.href='{{ url_for('admin.game_toggle', gid=g.id) }}'" style="width:auto">
            {{ 'فعال' if g.is_active else 'غیرفعال' }}
          </label>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}