{% extends "base.html" %}

{% block content %}
<div class="max-w-2xl mx-auto bg-white dark:bg-slate-800 shadow rounded-lg p-6">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">新建战队阵容</h2>
    
    <form action="{{ url_for('teams.create') }}" method="POST" class="space-y-6">
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">阵容名称</label>
            <input type="text" name="name" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-yrtv-500 focus:border-yrtv-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white">
        </div>
        
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">描述</label>
            <textarea name="description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-yrtv-500 focus:border-yrtv-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"></textarea>
        </div>
        
        <div class="space-y-4" id="players-container">
            <div class="flex justify-between items-center">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">选择队员 (不限人数)</label>
                <button type="button" onclick="addPlayerSelect()" class="text-sm text-yrtv-600 hover:text-yrtv-800 font-medium">+ 添加队员</button>
            </div>
            
            <!-- Template for JS -->
            <div id="player-select-template" class="hidden">
                <div class="flex gap-2 mb-2 player-row">
                    <select name="player_ids" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-yrtv-500 focus:border-yrtv-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white">
                        <option value="">选择队员</option>
                        {% for p in players %}
                        <option value="{{ p.steam_id_64 }}">{{ p.username }} ({{ (p.rating or 0)|round(2) }})</option>
                        {% endfor %}
                    </select>
                    <button type="button" onclick="this.parentElement.remove()" class="text-red-500 hover:text-red-700 px-2">
                        &times;
                    </button>
                </div>
            </div>

            <!-- Initial Selects -->
            <div id="active-players">
                {% for i in range(1, 6) %}
                <div class="flex gap-2 mb-2 player-row">
                    <select name="player_ids" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-yrtv-500 focus:border-yrtv-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white">
                        <option value="">(空缺) 队员 {{ i }}</option>
                        {% for p in players %}
                        <option value="{{ p.steam_id_64 }}">{{ p.username }} ({{ (p.rating or 0)|round(2) }})</option>
                        {% endfor %}
                    </select>
                    <button type="button" onclick="this.parentElement.remove()" class="text-red-500 hover:text-red-700 px-2">
                        &times;
                    </button>
                </div>
                {% endfor %}
            </div>
        </div>
        
        <script>
        function addPlayerSelect() {
            const template = document.getElementById('player-select-template').firstElementChild.cloneNode(true);
            document.getElementById('active-players').appendChild(template);
        }
        </script>
        
        <div class="pt-4">
            <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-yrtv-600 hover:bg-yrtv-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yrtv-500">
                创建阵容
            </button>
        </div>
    </form>
</div>
{% endblock %}