{% extends team.id+'/base.html' %}

{% block title %}Fixture{% endblock %}
{% block description %}Full season schedule. Planning for league and pre-season matches.{% endblock %}

{% block content %}<section>
    <div class="row justify-content-center">
        <div class="col-lg-9">
            <div class="text-center mb-5">
                <h1 class="fw-bold text-center">Matches</h1>
                <h2 class="lead text-muted">Full season schedule</h2>
                <hr class="border-warning border-2 w-25 mx-auto">
            </div>
            {% for match in team.calendar_matches %}
            {% set card_bg = "bg-light-subtle opacity-75" if not match.is_match_pending() else "bg-light-subtle" %}
            {% set badge_color = "bg-primary" if match.is_current_week() else ("bg-secondary" if not match.is_match_pending() else "bg-warning") %}
            {% set status_text = "THIS WEEK" if match.is_current_week() else ("PLAYED" if not match.is_match_pending() else "UPCOMING") %}
    <div class="card shadow-sm border-0 mb-3 overflow-hidden {{card_bg}}">
        <div class="card-body p-0">
            <div class="row align-items-center g-0 p-3">
                <div class="col-2">
                    <span class="text-danger fw-bold text-uppercase">Group {{ team.group }}</span>
                    <span class="text-danger">Week {{ match.week }}</span>
                </div>
                <div class="col-10">
                    <div class="row align-items-center">
                        <div class="col-12 row align-items-center">
                            <div class="col-5 text-end">
                                <span class="fw-bold text-uppercase">{{ match.play_match.split(" - ")[0] }}</span>
                            </div>
                            <div class="col-3 text-center" style="font-size: 0.8rem;">
                                <div class="small fw-bold mb-1 {{ 'text-primary' if match.is_current_week() else 'text-muted' }}" style="line-height: 1.1;">
                                {{ match.datetime_match|format_date('%d-%m-%Y') }}<br>{{ match.datetime_match|format_date('%H:%M') }}
                                </div>
                                <div class="{{ badge_color }} rounded text-dark fw-bold px-2 d-inline-block">VS</div>
                                <div class="mt-1">
                                    <span class="badge {{ badge_color }}">{{ status_text }}</span>
                                </div>
                            </div>
                            <div class="col-4 text-start">
                                <span class="fw-bold text-uppercase">{{ match.play_match.split(" - ")[1] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
        </div>
    </div>
</section>{% endblock %}