{% extends "admin/base.html" %}
{% block page_title %}{{ game.name }} — {{ t('modes') | default('Modes') }}{% endblock %}
{% block content %}
<div class="action-bar">
  <div style="display:flex;align-items:center;gap:0.75rem">
    <a href="{{ url_for('admin.games_list') }}" class="btn btn-ghost btn-sm">← {{ t('back') | default('Back') }}</a>
    <h2 style="font-size:1rem;margin:0">{{ game.icon }} {{ game.name }} — {{ t('modes') | default('Modes') }}</h2>
  </div>
  <a href="{{ url_for('admin.mode_create', gid=game.id) }}" class="btn btn-primary" style="box-shadow:var(--shadow-glow)">➕ {{ t('add_mode') | default('Add Mode') }}</a>
</div>

<div class="table-wrap">
  <table>
    <thead>
      <tr>
        <th>{{ t('name') | default('Name') }}</th>
        <th>Slug</th>
        <th>{{ t('squad_size') | default('Squad Size') }}</th>
        <th>{{ t('max_squad_size') | default('Max') }}</th>
        <th>{{ t('status') | default('Status') }}</th>
        <th>{{ t('actions') | default('Actions') }}</th>
      </tr>
    </thead>
    <tbody>
      {% for m in modes %}
      <tr>
        <td style="font-weight:700">{{ m.icon }} {{ m.name }}</td>
        <td style="font-family:monospace;font-size:0.8rem;color:var(--text-muted)">{{ m.slug }}</td>
        <td style="font-weight:700;color:var(--neon)">{{ m.squad_size }}v{{ m.squad_size }}{% if m.squad_size == 1 %} (Solo){% endif %}</td>
        <td>{{ m.max_squad_size or '—' }}</td>
        <td>
          <span class="badge {% if m.is_active %}badge-green{% else %}badge-red{% endif %}">
            {{ 'فعال' if m.is_active else 'غیرفعال' }}
          </span>
        </td>
        <td>
          <div style="display:flex;gap:0.4rem;flex-wrap:wrap">
            <a href="{{ url_for('admin.mode_edit', gid=game.id, mid=m.id) }}" class="btn btn-outline btn-xs">✏️</a>
            <a href="{{ url_for('admin.mode_delete', gid=game.id, mid=m.id) }}" class="btn btn-danger btn-xs" onclick="return confirm('{{ t('confirm_delete') | default('Delete this mode?') }}')">🗑️</a>
          </div>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="6" style="text-align:center;color:var(--text-muted);padding:2rem">{{ t('no_modes') | default('No modes yet. Add one!') }}</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}