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

{% block title %}Tickets, memberships, and all the latest news about our players, all in one place{% endblock %}
{% block description %}Welcome to the digital home of {{team.name|safe}} on Hattrick. Tickets, memberships, and all the latest news about our players, all in one place.{% endblock %}

{% block content %}
<section class="mb-5">
    <div class="p-5 mb-4 bg-dark text-white rounded-3 shadow-lg position-relative overflow-hidden">
        <div style="position: absolute; right: -0.3rem; bottom: -2.5rem; opacity: 0.1; font-size: 12.5rem; font-weight: bold; z-index: 1;">{{team.name[:2]}}</div>
        <div class="container-fluid py-5 position-relative" style="z-index: 2;">
            <span class="badge bg-warning text-dark mb-2 px-3 py-2 fw-bold">Official Web</span>
            <h1 class="display-4 fw-bold">{{ team.name | upper | replace('F.C', '') |replace('FC', '')|replace('F.C.', '') | replace('Football Club', '') }} FOOTBALL CLUB</h1>
            <p class="col-md-10 fs-5 shadow-text">{{team.description}}</p>
            <hr class="my-4 border-warning w-25">
            <div class="d-flex gap-2">
                <a href="https://www.hattrick.org/en/Club/?TeamID={{team['team_id']}}" target="_blank" rel="noopener" class="btn btn-warning btn-lg px-4 fw-bold">Go to Hattrick</a>
                <a href="{{url_for('manager.index')}}" class="btn btn-outline-light btn-lg px-4">Manager profile</a>
            </div>
        </div>
    </div>
    <div class="row mt-4 text-center g-3">
        <div class="col-md-3 col-6">
            <div class="p-3 border-bottom border-warning border-3 bg-light-subtle shadow-sm">
                <span class="fw-bold text-warning h2 mb-0">{{team.group}}</span><br>
                <small class="text-uppercase fw-bold">Group</small>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="p-3 border-bottom border-warning border-3 bg-light-subtle shadow-sm">
                <span class="fw-bold text-warning h2 mb-0">+ {{team.get_nearby_number_members}}</span><br>
                <small class="text-uppercase fw-bold">Fans</small>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="p-3 border-bottom border-warning border-3 bg-light-subtle shadow-sm">
                <span class="fw-bold h2 text-warning mb-0">#{{team["team_id"]}}</span><br>
                <small class="text-uppercase fw-bold">ID Club</small>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="p-3 border-bottom border-warning border-3 bg-light-subtle shadow-sm">
                <span class="fw-bold h2 text-warning mb-0">{{team.allTrophies | length }}</span><br>
                <small class="text-uppercase fw-bold">Trophies</small>
            </div>
        </div>
    </div>
</section>

<section class="mb-5">
    <div class="row g-4">
        <div class="col-lg-6">
            <div class="card border-warning h-100 shadow-sm">
                <h2 class="card-header bg-warning fw-bold text-center text-dark text-uppercase">Next match</h2>
                <div class="card-body text-center d-flex flex-column justify-content-center">
                    {% set play_match_week = team.get_play_match_week() %}
                        {% if play_match_week is not none %}
                    <div class="d-flex justify-content-around align-items-center mb-3">
                            {% if play_match_week.week in [15, 16] %}<div class="fw-bold text-center">PRE-SEASON</div>{% else %}
                        <div class="fw-bold">{{play_match_week.play_match.split(" - ")[0]}}</div>
                        <div class="fs-2 fw-bold text-warning px-3">VS</div>
                        <div class="fw-bold">{{play_match_week.play_match.split(" - ")[1]}}</div>{% endif %}
                    </div>
                    <div class="p-2 bg-light-subtle rounded small text-muted">
                        📅 {{play_match_week.cute_date()}} | 🏟️ {{team.stadium.name}}
                    </div>
                    {% else %}
                        <div class="d-flex justify-content-around align-items-center mb-3">
                            <div class="fw-bold text-center text-uppercase fs-5 text-danger">NO SCHEDULED MATCHES</div>
                        </div>
                        <div class="p-2 bg-light-subtle rounded small text-muted">
                            📅 Waiting for calendar deployment | 🏟️ {{ team.stadium.name }}
                        </div>
                    {% endif %}
                </div>
                <div class="card-footer bg-transparent text-center pb-2">
                    <a href="{{url_for('team.matches', team_id=team.id)}}" class="btn btn-sm btn-outline-warning fw-bold">View All Matches</a>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card h-100 shadow-sm border-0">
                <h2 class="card-header bg-dark text-white py-2 text-center text-warning">SEASON OVERVIEW</h2>
                <div class="card-body d-flex flex-column justify-content-center p-4">
                    {% if team.get_play_match_week() is not none %}{% set week = team.get_play_match_week().week %}
                    <div class="d-flex justify-content-between mb-2 small fw-bold text-uppercase">
                        <span>Season {{team.season}}</span><span class="text-orange">Week {{week}} / 16</span>
                    </div>
                    <div class="progress" style="height: 1.25rem;">
                        {% set per = (week/16*100)|int %}<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated text-dark fw-bold" style="width: {{per}}%;">{{per}}%</div>
                    </div>
                    {% else %}
                        <div class="d-flex justify-content-between mb-2 small fw-bold text-uppercase">
                            <span>Season {{team.season}}</span><span class="text-warning">Concluded</span>
                        </div>
                        <div>
                            <p class="text-muted small mb-3">The current season has fully closed. The league database requires a transition setup to initiate the new tournament.</p>
                        </div>
                    {%endif%}
                </div>
            </div>
        </div>
    </div>
</section>
<section class="mb-5">
    <h2 class="mb-3 text-center text-lg-start">Club News</h2>
    <div class="list-group shadow-sm">{% for n in team.get_news(reverse=True) %}{% if n.shows()%}
        {% set color = ['bg-warning', 'bg-black', 'bg-primary', 'bg-success'][loop.index0 % 4] %}
        <div class="list-group-item d-flex gap-3 py-3">
            <div class="{{ color }} rounded-circle p-2 text-white d-flex align-items-center justify-content-center" style="width: 45px; height: 45px;">
                {{n.icon|safe}}
            </div>
            <div class="d-flex gap-2 w-100 justify-content-between">
                <div>
                    <p class="mb-0 fw-bold fs-4">{{n.title}}</p>
                    <p class="mb-0 opacity-75">{{n.text|safe}}</p>
                </div>
                <small class="opacity-50 text-nowrap">{{n.date|format_date("%d-%m-%Y")}}</small>
            </div>
        </div>{% endif %}{% endfor %}
    </div>
</section>

<section class="mb-5">
    <div class="card shadow-lg border-0 overflow-hidden bg-light-subtle mx-auto">
        <div class="row g-0 align-items-center">
            <div class="col-lg-5"> <img src="{{team.stadium.img_stadium}}" class="img-fluid w-100 object-fit-cover" style="max-height: 350px;" alt="Kame House Stadium">
            </div>
            <div class="col-lg-7">
                <div class="card-body p-4">
                    <span class="badge bg-warning text-dark mb-2 px-3">OFFICIAL STADIUM</span>
                    <h2 class="fw-bold mb-1">{{team.stadium.name}}</h2>
                    <p class="text-muted small mb-2"><i class="bi bi-geo-alt-fill"></i> {{team.stadium.geo[1]+", "+team.stadium.geo[0]}}</p>
                    <p class="card-text small roboto">Where history is written and legends are born.</p>
                    <div class="d-flex gap-2 mt-2">
                        <span class="badge bg-dark p-2">Capacity: {{ "{:,}".format(team.stadium.total_capacity).replace(",",".") }}</span>
                        <span class="badge bg-secondary p-2">ID: {{team.stadium.stadium_id}}</span>
                    </div>
                    <div class="mt-4">
                        <a href="{{url_for('team.stadium', team_id=team.id)}}" class="btn btn-outline-primary btn-sm rounded-pill px-4">View stadium details <i class="bi bi-arrow-right ms-1"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section>
    <h2 class="text-center mb-4">Sponsors</h2>
    <div class="row  g-2 align-items-center text-center sponsor-section shadow-sm mx-0">
        <div class="col">
            <img src="{{url_for('static', filename='img/emete10_manager.jpg')}}" class="img-fluid sponsor-logo" style="max-height: 90px;" alt="Emete">
        </div>
        <div class="col">
            <img src="{{team.sponsor['img']}}" class="img-fluid sponsor-logo" style="max-height: 110px;" alt="{{team.sponsor['name']}}">
        </div>
    </div>
</section>
{% endblock %}