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

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

{% block body %}
<div class="container">
    {# Hero Section #}
    <div class="jumbotron p-5 rounded-3 mb-4 shadow-sm">
        <h1 class="display-4 fw-bold">Welcome to Sawnoff League</h1>
        <p class="lead text-muted">Your premier competitive gaming league platform</p>
        <hr class="my-4">
        {% if activeSeason %}
            <p class="mb-2">Current Season: <strong class="text-dark">{{ activeSeason.name }}</strong></p>
            <p class="mb-0">
                <small class="text-muted">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-calendar-event me-1" viewBox="0 0 16 16">
                        <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
                        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                    </svg>
                    {{ activeSeason.startDate|date('M d, Y') }} - {{ activeSeason.endDate|date('M d, Y') }}
                </small>
            </p>
        {% else %}
            <p class="text-muted">No active season at the moment. Check back soon!</p>
        {% endif %}
    </div>

    {# Recent Matches Section #}
    <div class="row">
        <div class="col-12">
            <h2 class="mb-4 fw-bold text-dark">Recent Matches</h2>
            {% if recentMatches is not empty %}
                <div class="list-group shadow-sm">
                    {% for match in recentMatches %}
                        <div class="list-group-item list-group-item-action border">
                            <div class="d-flex w-100 justify-content-between align-items-center">
                                <div class="flex-grow-1">
                                    <h5 class="mb-1">
                                        {{ match.homeTeam.name }} 
                                        {% if match.status == 'completed' %}
                                            <span class="badge bg-success">{{ match.homeScore }}</span>
                                            vs
                                            <span class="badge bg-success">{{ match.awayScore }}</span>
                                        {% else %}
                                            vs
                                        {% endif %}
                                        {{ match.awayTeam.name }}
                                    </h5>
                                    <p class="mb-1">
                                        <small class="text-muted">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-clock me-1" viewBox="0 0 16 16">
                                                <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                                            </svg>
                                            {{ match.matchDate|date('M d, Y H:i') }}
                                        </small>
                                    </p>
                                </div>
                                <div>
                                    {% if match.status == 'scheduled' %}
                                        <span class="badge bg-primary">Scheduled</span>
                                    {% elseif match.status == 'in_progress' %}
                                        <span class="badge bg-warning text-dark">In Progress</span>
                                    {% elseif match.status == 'completed' %}
                                        <span class="badge bg-success">Completed</span>
                                    {% elseif match.status == 'cancelled' %}
                                        <span class="badge bg-danger">Cancelled</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <div class="mt-3">
                    <a href="{{ path('matches') }}" class="btn btn-primary">View All Matches</a>
                </div>
            {% else %}
                <div class="alert alert-info border-0 shadow-sm">
                    No matches have been scheduled yet.
                </div>
            {% endif %}
        </div>
    </div>

    {# Quick Links #}
    <div class="row mt-5">
        <div class="col-md-4 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-people text-secondary" viewBox="0 0 16 16">
                            <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
                        </svg>
                    </div>
                    <h5 class="card-title fw-semibold">Teams</h5>
                    <p class="card-text text-muted">View all participating teams</p>
                    <a href="{{ path('teams') }}" class="btn btn-outline-primary">Browse Teams</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-calendar-event text-secondary" viewBox="0 0 16 16">
                            <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
                            <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                        </svg>
                    </div>
                    <h5 class="card-title fw-semibold">Matches</h5>
                    <p class="card-text text-muted">Check out match schedules and results</p>
                    <a href="{{ path('matches') }}" class="btn btn-outline-primary">View Matches</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-trophy text-secondary" 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>
                    </div>
                    <h5 class="card-title fw-semibold">Standings</h5>
                    <p class="card-text text-muted">See current season rankings</p>
                    <a href="{{ path('standings') }}" class="btn btn-outline-primary">View Standings</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}