{% extends 'base.html.twig' %}

{% block title %}Standings - Sawnoff League{% endblock %}

{% block body %}
<div class="container">
    <div class="mb-4">
        <h1 class="display-5 fw-bold text-dark mb-2">League Standings</h1>
        <p class="text-muted">Current season rankings and team performance</p>
    </div>

    {# Season Filter #}
    {% if seasons is not empty %}
        <div class="card mb-4 border-0 shadow-sm">
            <div class="card-body">
                <form method="get" class="row g-3 align-items-center">
                    <div class="col-auto">
                        <label for="season" class="col-form-label fw-semibold text-muted">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar3 me-1" viewBox="0 0 16 16">
                                <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
                                <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                            </svg>
                            Season:
                        </label>
                    </div>
                    <div class="col-auto">
                        <select name="season" id="season" class="form-select shadow-sm" onchange="this.form.submit()">
                            {% for season in seasons %}
                                <option value="{{ season.id }}" {% if selectedSeason and selectedSeason.id == season.id %}selected{% endif %}>
                                    {{ season.name }}
                                    {% if season.isActive %}🏆 Active{% endif %}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                </form>
            </div>
        </div>
    {% endif %}

    {# Standings Table #}
    {% if selectedSeason %}
        <div class="card border-0 shadow-sm">
            <div class="card-header py-3">
                <h4 class="mb-0 fw-semibold">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-trophy me-2" viewBox="0 0 16 16">
                        <path d="M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5c0 .538-.012 1.05-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33.076 33.076 0 0 1 2.5.5zm.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935zm10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935zM3.504 1c.007.517.026 1.006.056 1.469.13 2.028.457 3.546.87 4.667C5.294 9.48 6.484 10 7 10a.5.5 0 0 1 .5.5v2.61a1 1 0 0 1-.757.97l-1.426.356a.5.5 0 0 0-.179.085L4.5 15h7l-.638-.479a.501.501 0 0 0-.18-.085l-1.425-.356a1 1 0 0 1-.757-.97V10.5A.5.5 0 0 1 9 10c.516 0 1.706-.52 2.57-2.864.413-1.12.74-2.64.87-4.667.03-.463.049-.952.056-1.469H3.504z"/>
                    </svg>
                    {{ selectedSeason.name }} Standings
                </h4>
            </div>
            <div class="card-body p-0">
                {% if standings is not empty %}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead>
                                <tr>
                                    <th class="text-center py-3" style="width: 60px;">#</th>
                                    <th class="py-3">Team</th>
                                    <th class="text-center py-3" style="width: 80px;">
                                        <div class="d-flex flex-column">
                                            <span>MP</span>
                                            <small class="text-muted" style="font-size: 0.7rem;">Played</small>
                                        </div>
                                    </th>
                                    <th class="text-center py-3" style="width: 80px;">
                                        <div class="d-flex flex-column">
                                            <span>W</span>
                                            <small class="text-muted" style="font-size: 0.7rem;">Wins</small>
                                        </div>
                                    </th>
                                    <th class="text-center py-3" style="width: 80px;">
                                        <div class="d-flex flex-column">
                                            <span>D</span>
                                            <small class="text-muted" style="font-size: 0.7rem;">Draws</small>
                                        </div>
                                    </th>
                                    <th class="text-center py-3" style="width: 80px;">
                                        <div class="d-flex flex-column">
                                            <span>L</span>
                                            <small class="text-muted" style="font-size: 0.7rem;">Losses</small>
                                        </div>
                                    </th>
                                    <th class="text-center py-3" style="width: 100px;">
                                        <div class="d-flex flex-column">
                                            <span class="fw-bold">PTS</span>
                                            <small class="text-muted" style="font-size: 0.7rem;">Points</small>
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for standing in standings %}
                                    <tr>
                                        <td class="text-center">
                                            <span class="badge rounded-pill {% if loop.index == 1 %}bg-warning text-dark{% elseif loop.index <= 3 %}bg-secondary{% else %}bg-light text-dark{% endif %} px-3 py-2">
                                                {{ loop.index }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="rounded-circle bg-secondary bg-opacity-25 d-flex align-items-center justify-content-center me-2" style="width: 36px; height: 36px; font-size: 14px; font-weight: 600; color: #495057;">
                                                    {{ standing.team.name|slice(0, 1)|upper }}
                                                </div>
                                                <span class="fw-semibold">{{ standing.team.name }}</span>
                                            </div>
                                        </td>
                                        <td class="text-center fw-semibold">{{ standing.matchesPlayed }}</td>
                                        <td class="text-center">
                                            <span class="badge bg-success bg-opacity-75">{{ standing.wins }}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-secondary bg-opacity-75">{{ standing.draws }}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-danger bg-opacity-75">{{ standing.losses }}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-dark fs-6 px-3 py-2">{{ standing.points }}</span>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer bg-light border-top py-3">
                        <div class="row text-center text-muted small">
                            <div class="col">
                                <strong>MP</strong>: Matches Played
                            </div>
                            <div class="col">
                                <strong>W</strong>: Wins
                            </div>
                            <div class="col">
                                <strong>D</strong>: Draws
                            </div>
                            <div class="col">
                                <strong>L</strong>: Losses
                            </div>
                            <div class="col">
                                <strong>PTS</strong>: Points
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="alert alert-info m-4 border-0">
                        <div class="d-flex align-items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-info-circle me-3" viewBox="0 0 16 16">
                                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                            </svg>
                            <div>
                                <h5 class="alert-heading mb-1">No standings data available</h5>
                                <p class="mb-0">Standings will be calculated once matches are completed.</p>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    {% else %}
        <div class="alert alert-warning border-0 shadow-sm">
            <div class="d-flex align-items-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle me-3" viewBox="0 0 16 16">
                    <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
                    <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
                </svg>
                <div>
                    <h4 class="alert-heading mb-1">No season selected</h4>
                    <p class="mb-0">Please select a season to view standings.</p>
                </div>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}