{% extends 'manager/base.html' %}

{% block title %}The Hattrick Adventure{% endblock %}
{% block description %}Follow the evolution of {{manager["name"]}}: a story of management, strategy, and perseverance in the Hattrick universe. Join and explore!{% endblock %}

{% block content %}<section id="about" class="profile-header pb-5 border-bottom border-4 border-warning">
    <div class="row justify-content-center align-items-center">
        <div class="col-auto">
            <div class="faceCard mx-auto position-relative">
                    {{manager["faceCard"]|safe}}
            </div>
        </div>
        <div class="col-auto text-white text-center text-md-start">
            <h1 class="fw-bold mb-0">{{manager["username"]}}</h1>
            <p class="text-white opacity-75 mb-2">Hattrick Manager Profile | ID:
                <a href="{{ manager['url_manager'] }}" target="_blank" rel="noopener" class="d-inline-flex align-items-start text-white text-decoration-none">
                    <span class="text-decoration-underline">{{manager["manager_id"]}}</span><i class="bi bi-box-arrow-up-right ms-1" style="font-size: 0.7em;"></i>
                </a>
            </p>
            <div class="gap-2">
                <span class="badge stat-badge px-3 py-2 rounded-pill">🏆 {{manager["points_achievements"]}} Points</span>
                <span class="badge stat-badge px-3 py-2 rounded-pill">🟢 {{manager.joined | format_date}}</span>
                <span class="badge stat-badge px-3 py-2 rounded-pill"><i class="bi bi-geo-alt-fill"></i> {{manager["flag"]}}</span>
            </div>
        </div>
        <div class="row justify-content-center pt-2">
            <div class="col-md-9 col-lg-7">
                <div class="bg-dark p-3 rounded-4 shadow-lg border border-secondary text-white fs-6">
                    <i class="bi bi-quote fs-1 text-warning"></i> {{manager["presentation"]|safe}}
                </div>
            </div>
        </div>
    </div>
</section>
<section id="teams" class="container my-3">
    <div class="text-center mb-5">
        <h2 class="fw-bold">Current teams</h2>
        <p class="text-muted">Direct management and active competition</p>
        <div class="mx-auto bg-warning" style="height: 4px; width: 80px; border-radius: 2px;"></div>
    </div>
    <div class="row g-4 justify-content-center">{% for team in teams %}
        <div class="col-md-4 mb-4">
            <div class="card h-100 shadow-sm border border-light-subtle" style="border-radius: 12px;">
                <div class="p-3 text-center position-relative" style="border-radius: 12px 12px 0 0;">
                    <span class="position-absolute top-0 end-0 m-3 badge bg-primary">{{team.country}}</span>
                    <img src="{{team.logo}}" loading="lazy" alt="{{team.name}} logo" height="120" class="my-2">
                </div>
                <div class="card-body p-4 text-center bg-secondary-subtle">
                    <h3 class="fw-bold mb-1">{{team.name}}</h3>
                    <small class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1">Group {{team.group}}</small>
                    <p class="card-text mt-3">{{team.description}}</p>
                    <a href="{{url_for('team.index', team_id=team.id)}}" class="btn btn-warning w-100 fw-bold py-2 mt-2">VISIT THE CLUB</a>
                </div>
            </div>
        </div>{% endfor%}
    </div>{% if manager["previous_teams"]|length > 0 %}
    <div class="text-center mt-3">
        <h3 class="pt-3">Previous teams</h3>
        <p>All the clubs I have defended since {{manager["previous_teams"][-1]["played_range"][0]|format_date}}</p>
    </div>
    <div class="row g-4">{% for previous in manager["previous_teams"] %}
        <div class="col-md-3">
            <div class="card h-100 border-0 shadow-sm bg-light-subtle">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <h4 class="fw-bold mb-0">{{previous["team"] }}</h4>
                        {% if loop.last %}<span class="badge bg-warning text-dark">{{previous["played_range"][0]|format_date +"-" +previous["played_range"][1]|format_date}}</span>
                        {% else %}<span class="badge bg-secondary">{{previous["played_range"][0]|format_date +"-" +previous["played_range"][1]|format_date}}</span>{% endif %}
                    </div>
                    <p class="small text-muted mb-3"><i class="bi bi-trophy me-1"></i> {{previous["league"]}}</p>
                    <p class="card-text small fw-bold text-uppercase mb-2 text-muted" style="letter-spacing: 1px;">Trophies</p>
                {% if previous["trophies_won"] %}<div class="d-flex flex-wrap gap-1">
                        {% for trophy in previous["trophies_won"] %}
                            <span class="badge bg-success text-dark border border-success-subtle" title="Season {{ trophy['season'] }}">
                                <i class="bi bi-trophy-fill me-1"></i> {{ trophy["group"] }}
                            </span>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="small text-muted italic">No official qualifications</p>
                {% endif %}
                </div>
            </div>
        </div>{% endfor %}
    </div>{% endif %}
</section>
<section id="timeline" class="container my-3">
    <div class="text-center mb-5">
        <h2 class="fw-bold">Timeline</h2>
        <div class="mx-auto bg-warning" style="height: 4px; width: 80px; border-radius: 2px;"></div>
    </div>
    <div class="timeline-box">{% for event in manager["timeline"]%}
        <div class="timeline-event">
            {% if event["type"] == "pre" %}
                {% set style1 = "fw-bold text-secondary small" %}
                {% set style2 = "fw-bold text-muted" %}
                {% set style3 = "mb-0 italic" %}
            {% elif event["type"] == "foundation" %}
                {% set style1 = "fw-bold color-orange small" %}
                {% set style2 = "fw-bold text-muted" %}
                {% set style3 = "mb-0 italic" %}
            {% elif event["type"] == "milestone" %}
                {% set style1 = "fw-bold color-orange small" %}
                {% set style2 = "fw-bold text-success" %}
                {% set style3 = "mb-0" %}
            {% elif event["type"] == "previous" %}
                {% set style1 = "fw-bold text-secondary small" %}
                {% set style2 = "fw-bold text-muted" %}
                {% set style3 = "mb-1" %}
            {% elif event["type"] == "current" %}
                {% set style1 = "fw-bold color-orange small" %}
                {% set style2 = "fw-bold" %}
                {% set style3 = "mb-1" %}
                {% set active = 1 %}
            {% else %}
                {% set style1 = "fw-bold text-secondary opacity-75" %}
                {% set style2 = "fw-bold text-secondary opacity-75" %}
                {% set style3 = "fw-bold text-secondary opacity-75" %}
            {% endif %}
            <span class="{{style1}}">{{event["range_date"][0]|format_date('%d-%m-%Y')}}{%if event["range_date"]|length >= 2%} to {{event["range_date"][1]|format_date('%d-%m-%Y')}}{%elif active%} to current{%endif%}</span>
            <h3 class="{{style2}}">{{event["title"]}} {%if active %}<span class="badge bg-success ms-2 fs-6">Active</span>{% endif%}</h3>
            <p class="{{style3}}">{{event["description"]}}</p>
        </div>{% endfor %}
    </div>
</section>
<section id="cabinet" class="container my-3">
    <div class="text-center mb-5">
        <h2 class="fw-bold">Trophy Cabinet</h2>
        <div class="mx-auto bg-warning" style="height: 4px; width: 80px; border-radius: 2px;"></div>
    </div>
    <div class="mb-5">
        {% for team in teams%}
        <h3 class="mb-3 border-bottom"><i class="bi bi-trophy-fill me-2"></i> {{team["name"]}}</h3>
        <div class="pb-4 row g-3 justify-content-center">{% if team["allTrophies"]|length == 0 %}
            <div class="col-12 text-center py-4">           
                <h4 class="fw-bold text-dark mb-1">A clean cabinet... for now!</h4>
                <p class="text-muted small mb-0">The team is training hard to secure their first official title.</p>
            </div>{%else%}{%for allTrophies in team["allTrophies"]%}
            <div class="col-3 col-md-3 col-lg-2 text-center">
                <div class="p-3 bg-body rounded-4 shadow-sm border-top border-4 border-warning">
                    <img src="https://www.hattrick.org/v2605510/App_Themes/Standard/images/trophies/{{allTrophies['group'].split('.')|first|lower}}.png" loading="lazy" alt="{{allTrophies['group']}}">
                    <h4 class="fw-bold mt-2 mb-0">Group {{allTrophies["group"]}}</h4>
                    <p class="small text-muted">Season {{allTrophies["season"]}}</p>
                </div>
            </div>{% endfor %}{%endif%}
        </div>{%endfor%}
        {% for previous in manager["previous_teams"] %}
        <h3 class="text-body-tertiary mt-4 border-bottom pb-2"><i class="bi bi-trophy-fill me-2"> {{ previous["team"] }}</i></h3>
        {% if not previous["trophies_won"] %}
        <div class="col-12 text-center py-4">
            <h4 class="fw-bold text-dark mb-1">A hard-fought era</h4>
            <p class="text-muted small mb-0">No trophies were won during this period, but valuable experience was gained.</p>
        </div>
    {% else %}
    <div class="row mt-3 g-3 justify-content-center">{% for trophy in previous["trophies_won"] %}
        <div class="col-3 col-md-3 col-lg-2 text-center">
            <div class="p-3 bg-body rounded-4 shadow-sm border-top border-4 border-secondary-subtle">
                <img src="https://www.hattrick.org/v2605510/App_Themes/Standard/images/trophies/{{trophy['group'].split('.') | first|lower}}.png" loading="lazy" alt="{{trophy['group']}}">
                <h4 class="fw-bold mt-2 mb-0">Group {{trophy["group"]}}</h4>
                <p class="small text-muted">Season {{trophy["season"]}}</p>
            </div>
        </div>{% endfor %}
    </div>{% endif %}{% endfor %}
    </div>
</section>
{% endblock %}