{% extends "base.html" %}

{% block content %}
<div class="card">
    <div class="card-header bg-primary text-white">
        <h3>Team Pooling and Scheduling</h3>
    </div>
    <div class="card-body">
        <form method="POST" enctype="multipart/form-data">
            <div class="mb-3">
                <label class="form-label">Import Teams (CSV/Excel):</label>
                <input class="form-control" type="file" name="file" accept=".csv,.xlsx" required>
                <div class="form-text">File should contain team names in the first column</div>
            </div>
            <button type="submit" class="btn btn-primary">Upload Teams</button>
        </form>
        
        {% if teams %}
        <hr>
        <form method="POST" action="{{ url_for('main.generate') }}">
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Number of Teams:</label>
                    <input type="text" class="form-control" value="{{ teams|length }}" readonly>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Number of Pools:</label>
                    <input type="number" class="form-control" name="num_pools" min="1" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Teams per Pool:</label>
                    <input type="number" class="form-control" name="teams_per_pool" min="1" required>
                </div>
            </div>
            
            <div class="mb-3">
                <label class="form-label">Teams:</label>
                <div class="border p-2" style="max-height: 200px; overflow-y: auto;">
                    {% for team in teams %}
                    <input type="hidden" name="teams[]" value="{{ team }}">
                    <span class="badge bg-secondary me-1 mb-1">{{ team }}</span>
                    {% endfor %}
                </div>
            </div>
            
            <button type="submit" class="btn btn-success">Generate Pools and Schedule</button>
        </form>
        {% endif %}
    </div>
</div>
{% endblock %}