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

{% block title %}First team{% endblock %}
{% block description %}The Muten Roshi FC squad: warriors of Kame Island led by captain Femenias. Academy discipline and midfield dominance on the path to glory.{% endblock %}
{%block head_meta%} <style>
.bg_standard_hattrick {background-image: url('https://www.hattrick.org/v2605510/App_Themes/Standard/bg.png');}
[data-bs-theme="dark"] .bg_standard_hattrick {background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://www.hattrick.org/v2605510/App_Themes/Standard/bg.png');}
</style>{%endblock%}
{% block content %}
<section class="container my-5">
    <div class="text-center mb-5">
        <h1 class="fw-bold">First team</h1>
        <p class="lead">The First Team represents the highest level of the club, bringing together our most competitive and dedicated players. With a strong focus on teamwork and discipline, the squad reflects the club's identity and style of play.</p>
    </div>

    <div class="row justify-content-center mb-5">
        <div class="col-lg-8">
            <div class="bg-dark p-2 rounded-4 shadow-lg border border-warning border-2">
                <p class="fs-3 text-warning text-center"><i class="bi bi-strategy me-2"></i> Team photo 2026</p>
                <img src="{{url_for('static', filename='img/squad_photo.jpg')}}" alt="Squad photo" class="w-100" />
            </div>
        </div>
    </div>
    <h2 class="mb-3 border-bottom pb-2 text-uppercase">Squad</h2>
    <div class="row mb-5">{% for player in team.players %}
        <div class="col-md-3 mt-3">
            <div class="card border-0 shadow-lg rounded-4 overflow-hidden text-white bg_standard_hattrick">
                <div class="p-2 text-center" style="background: rgba(0,0,0,0.3);">
                    <div class="faceCard mx-auto position-relative">{{player.faceCard|safe}}</div>
                    <h3 class="fs-5 fw-bold mt-0 mb-0 text-uppercase">{{player.name_player}}</h3>
                    <small class="text-warning fw-bold ">{{player.position}}</small>
                    {% if loop.index == 4%}
                        <span class="badge bg-warning text-dark position-absolute top-0 end-0 m-2">CAPTAIN</span>
                    {%endif%}
                </div>
                <div class="card-body">
                    <div class="p-2 rounded-3 mb-1 border border-secondary" style="background: rgba(0,0,0,0.3);">
                        <div class="row g-2">
                            <div class="col-8">
                                <span class="text-uppercase fw-bold" style="font-size: 0.7rem;">Shirt Number: #{{ loop.index }}</span>
                            </div>
                            <div class="col-4">
                                <span class="text-uppercase fw-bold" style="font-size: 0.7rem;">{% if player.mother_club%}<span class="fw-bold text-danger fs-6"><i class="bi bi-house-heart"></i></span>{% else%} <span class="fw-bold fs-6">-</span>{% endif %}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-black bg-opacity-25 border-0 text-center py-2">
                    <small style="font-size: 0.7rem; color: #ffd700;">
                        <i class="bi bi-shield-check"></i> {{player.speciality}}
                    </small>
                </div>
            </div>
        </div>{% endfor %}
    </div>
	<h2 class="mb-3 border-bottom pb-2 text-uppercase">Technical Staff and Secretariat</h2>
	<div class="row mb-5 g-3">
		<div class="col-md-6">
			<div class="d-flex align-items-center p-3 bg-light-subtle rounded-4 shadow-sm h-100 border-start border-warning border-4">
                <div class="faceCard position-relative">
                    {{team.staff[0]["faceCard"]|safe}}
                </div>
                <div>
                    <h3 class="fs-4 mb-0 fw-bold">{{team.staff[0]["name"]}}</h3>
                    <small class="text-muted">Coach</small>
                </div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="d-flex align-items-center p-3 bg-light-subtle rounded-4 shadow-sm h-100 border-start border-info border-4">
				<div class="faceCard position-relative">
                    <img src="https://www.hattrick.org/Img/Avatar/backgrounds/bg_blue.png" style="box-shadow:grey 0px 0px 6px;left:5px;top:5px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/bodies/f7man3b.png" style="left:5px;top:5px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/faces/f7b.png" style="left:5px;top:5px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/eyes/e12c.png" style="left:19px;top:2px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/mouths/m30c.png" style="left:27px;top:36px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/noses/n28.png" style="left:14px;top:3px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/hair/f7h6d.png" style="left:5px;top:5px;" alt="">
		        </div>
				<div>
					<h3 class="fs-4 mb-0 fw-bold">Melchor Arbos Marin</h3>
					<small class="text-muted">Secretary</small>
				</div>
			</div>
		</div>
        {% set colors = {'Medic': 'danger', 'Sports Psychologist': 'info','Assistant Coach': 'primary', 'Form Coach': 'warning','Financial Director': 'light', 'Tactical Assistant': 'secondary'} %}
        {% for staff in team.staff[1] %}
		<div class="col-6 col-md-4">
			<div class="p-3 text-center bg-light-subtle border rounded-4 shadow-sm">
				<div class="faceCard mx-auto position-relative">
                    {{staff["faceCard"]|safe}}
                </div>
				<h3 class="fs-4 mb-0 fw-bold">{{staff["name"]|safe}}</h3>
                {% set css_colors = colors.get(staff["specialist"], 'dark') %}
                <span class="badge text-bg-{{ css_colors }}" style="font-size: 0.7rem;">{{staff["specialist"]}}</span>
			</div>
		</div>
        {%endfor%}
	</div>
    <h2 class="mb-4 border-bottom pb-2 text-uppercase">Sporting Director</h2>
    <div class="card border-0 shadow-lg overflow-hidden rounded-4 bg-dark text-white">
        <div class="row g-0">
            <div class="col-md-3 text-center bg-warning d-flex align-items-center justify-content-center p-4">
                <div class="">
					<div class="faceCard mx-auto position-relative">
                        {{manager.clean_faceCard()|safe}}
					</div>
                    <div class="mt-1">
                        <h3 class="text-dark fs-4 mb-0 fw-bold">{{manager.name}}</h3>
                        <span class="badge bg-dark">Manager</span>
                    </div>
			    </div>
		    </div>
            <div class="col-md-9 p-2 p-lg-3">
                <div class="d-flex justify-content-between align-items-end mb-4">
                    <div>
                        <h4 class="fw-bold mb-1">Manager Profile</h4>
                        <div class="bg-warning" style="height: 3px; width: 40px; border-radius: 2px;"></div>
                    </div>
                    <i class="bi bi-shield-check fs-1 text-warning opacity-50"></i>
                </div>
                <div class="row g-4">
                    <div class="col-6 col-sm-4">
                        <div class="d-flex flex-column">
                            <span class="text-warning text-uppercase fw-bold mb-1" style="font-size: 0.65rem; letter-spacing: 1px;">Experience</span>
                            <span class="h6 mb-0 text-white-50">Since</span>
                            <span class="fw-bold">{{manager.joined|format_date}}</span>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4">
                        <div class="d-flex flex-column">
                            <span class="text-warning text-uppercase fw-bold mb-1" style="font-size: 0.65rem; letter-spacing: 1px;">Specialist</span>
                            <span class="h6 mb-0 text-white-50">Tactics</span>
                            <span class="fw-bold">Playmaking</span>
                        </div>
                    </div>
                    <div class="col-12 col-sm-4">
                        <div class="d-flex flex-column">
                            <span class="text-warning text-uppercase fw-bold mb-1" style="font-size: 0.65rem; letter-spacing: 1px;">Nationality</span>
                            <span class="h6 mb-0 text-white-50">Contry</span>
                            <span class="fw-bold">{{manager.flag}}</span>
                        </div>
                    </div>
                </div>
                <div class="mt-5 pt-3 border-top border-secondary">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="small text-white-50 text-uppercase fw-bold">Tactical Strategy</span>
                        <span class="badge bg-warning text-dark fw-bold">95%</span>
                    </div>
                    <div class="progress bg-secondary-subtle" style="height: 8px; border-radius: 4px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" 
                            role="progressbar" 
                            style="width: 95%">
                        </div>
                    </div>
                    <div class="mt-4 d-flex justify-content-center">
                        <a href="{{url_for('manager.index')}}" target="_blank" class="btn btn-outline-warning btn-sm rounded-pill px-4" style="font-size: 0.75rem; letter-spacing: 0.5px;">VIEW PROFILE <i class="bi bi-box-arrow-up-right ms-2"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-5">
        <div class="col-md-5">
            <div class="d-flex align-items-center p-3 bg-light-subtle rounded-4 shadow-sm h-100 border-start border-dark border-4">
                <div class="faceCard position-relative me-3">
                    <img src="https://www.hattrick.org/Img/Avatar/backgrounds/bg_blue.png" style="box-shadow:grey 0px 0px 6px;left:5px;top:5px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/bodies/f2man3b.png" style="left:5px;top:5px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/faces/f2a.png" style="left:5px;top:5px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/eyes/e6c.png" style="left:24px;top:19px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/mouths/m9c.png" style="left:27px;top:59px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/noses/n10.png" style="left:16px;top:27px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/hair/f2h3d.png" style="left:5px;top:5px;" alt="">
                </div>
                <div>
                    <h3 class="fs-4 mb-0 fw-bold">Joaquín Henríquez</h3>
                    <small class="text-muted">Chairman of the Board</small>
                </div>
            </div>
        </div>
    </div>

    <h2 class="mb-4 border-bottom pt-4">Hattrick Football Association</h2>
    <div class="row">
        <div class="col-md-5">
			<div class="d-flex align-items-center p-3 bg-light-subtle rounded-4 shadow-sm h-100 border-start border-dark border-4">
				<div class="faceCard position-relative">
                    <img src="https://www.hattrick.org/Img/Avatar/backgrounds/bg_blue.png" style="box-shadow:grey 0px 0px 6px;left:5px;top:5px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/bodies/f9man2a.png" style="left:5px;top:5px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/faces/f9m.png" style="left:5px;top:5px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/eyes/e10a.png" style="left:17px;top:12px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/mouths/m16c.png" style="left:24px;top:52px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/noses/n11.png" style="left:15px;top:22px;" alt=""><img src="https://www.hattrick.org/Img/Avatar/hair/f9h14b.png" style="left:5px;top:5px;" alt="">
		        </div>
				<div>
					<h3 class="fs-4 mb-0 fw-bold">Gustav Jonasson</h3>
					<small class="text-muted">Hattrick Football Association</small>
				</div>
			</div>
		</div>
    </div>
</section>{% endblock %}