{% extends "base.html" %}

{% block title %}Voley — админка{% endblock %}
{% block header %}Админка{% endblock %}

{% block nav %}
  <div class="flex items-center gap-4">
    <a class="text-slate-300 hover:text-white" href="/">На главную</a>
    <a class="text-slate-300 hover:text-white" href="/admin/logout">Выйти</a>
  </div>
{% endblock %}

{% block content %}
  <section class="glass rounded-2xl p-4 sm:p-5">
    <h2 class="text-lg font-semibold">Добавить игрока</h2>
    <form class="mt-3 flex flex-col sm:flex-row gap-3" method="post" action="/admin/players/add">
      <input
        name="name"
        class="flex-1 rounded-xl bg-slate-950/60 border border-slate-800 px-3 py-2 text-slate-100 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
        placeholder="Имя игрока"
        required
      />
      <button class="px-4 py-2 rounded-xl text-sm font-semibold bg-indigo-600 border border-indigo-500" type="submit">
        Добавить
      </button>
    </form>
  </section>

  <section class="mt-5">
    <div class="flex items-center justify-between">
      <h2 class="text-lg font-semibold">Игроки</h2>
      <div class="text-xs text-slate-400">{{ players|length }} всего</div>
    </div>

    <div class="mt-3 grid gap-3">
      {% for p in players %}
        <div class="glass rounded-2xl p-4">
          <div class="flex items-start justify-between gap-3">
            <div class="min-w-0">
              <div class="text-base font-semibold truncate">
                {{ p.name }}
                {% if not p.active %}
                  <span class="ml-2 text-xs font-semibold px-2 py-1 rounded-lg bg-slate-800 text-slate-200">неактивен</span>
                {% endif %}
              </div>
              <div class="text-xs text-slate-400">ID: {{ p.id }}</div>
            </div>

            <form method="post" action="/admin/players/{{ p.id }}/toggle-active">
              <button
                class="px-3 py-2 rounded-xl text-sm font-semibold border
                       {% if p.active %}
                         bg-slate-950/40 border-slate-800 text-slate-200 hover:border-slate-600
                       {% else %}
                         bg-emerald-600 border-emerald-500 text-white
                       {% endif %}"
                type="submit"
              >
                {% if p.active %}Деактивировать{% else %}Активировать{% endif %}
              </button>
            </form>
          </div>

          <form class="mt-3 flex flex-col sm:flex-row gap-3" method="post" action="/admin/players/{{ p.id }}/rename">
            <input
              name="name"
              value="{{ p.name }}"
              class="flex-1 rounded-xl bg-slate-950/60 border border-slate-800 px-3 py-2 text-slate-100 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
              required
            />
            <button class="px-3 py-2 rounded-xl text-sm font-semibold bg-indigo-600 border border-indigo-500" type="submit">
              Переименовать
            </button>
          </form>
        </div>
      {% endfor %}
    </div>
  </section>
{% endblock %}