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

{% block title %}Store{% endblock %}
{% block description %}Gear up at the Muten Roshi FC Store: official shirts, scarves, and magic beans. Buy your tickets for Kame House Stadium and support the team!{% endblock %}

{% block content %}<section class="container my-5">
    <h1 class="text-center mb-5 fw-bold">OFFICIAL STORE</h1>
	<div class="pt-4">
		<h2 class="mb-4 border-bottom pb-2">
			<i class="bi bi-ticket-perforated-fill me-2 text-orange"></i> UPCOMING MATCHES
		</h2>
		<div class="row g-4">
			{% if team.get_play_match_home() is not none %}
			<div class="col-md-6">
				<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
					<div class="d-flex align-items-center">
						<div class="bg-dark text-white p-4 text-center" style="min-width: 120px;">
							<span class="d-block h2 mb-0">{{team.get_play_match_home().get_datetime('%d')}}</span>
							<span class="text-uppercase small">{{team.get_play_match_home().get_datetime('%B')}}</span>
						</div>
						<div class="p-3 flex-grow-1">
							<p class="fs-5 mb-1 text-break">{{team.get_play_match_home().play_match}}</p>
							<p class="small text-muted mb-0"><i class="bi bi-geo-alt"></i> {{team.stadium.name}}</p>
						</div>
						<div class="p-3">
							<a href="{{ url_for('store.buy_tickets',team_id=team.id, match=team.get_play_match_home().play_match ~ '_' ~ team.get_play_match_home().week) }}" class="btn btn-warning fw-bold">
								BUY TICKET
							</a>
						</div>
					</div>
				</div>
			</div>

			<div class="col-md-6">
				<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
					<div class="d-flex align-items-center">
						<div class="bg-secondary text-white p-4 text-center" style="min-width: 120px;">
							<span class="d-block h2 mb-0">{{ friendly_match|format_date("%d") }}</span>
							<span class="text-uppercase small">{{ friendly_match|format_date("%B") }}</span>
						</div>
						<div class="p-3 flex-grow-1">
							<p class=" fs-5 mb-1">Friendly match</p>
							<p class="small text-muted mb-0"><i class="bi bi-geo-alt"></i> Friendly match</p>
						</div>
						<div class="p-3">
                            <a href="{{url_for('store.buy_tickets', team_id=team.id, match='friendly')}}" class="btn btn-outline-dark text-body-secondary fw-bold">
								BUY TICKET
							</a>
						</div>
					</div>
				</div>
			</div>
			{% else %}
			<div class="col-md">
				<div class="d-flex align-items-center justify-content-between p-4 bg-light-subtle">
					<div class="d-flex align-items-center">
						<div class="bg-secondary text-white rounded p-3 me-3">
							<i class="bi bi-ticket-perforated fs-3"></i>
						</div>
						<div>
							<h5 class="fw-bold mb-1 text-uppercase text-muted">Box Office Closed</h5>
							<p class="small text-muted mb-0">No upcoming home matches scheduled for this season.</p>
						</div>
					</div>
					<button class="btn btn-secondary fw-bold" disabled>CLOSED</button>
				</div>
			</div>{% endif %}
		</div>
	</div>

    <div class="mt-5">
        <h2 class="mb-4 border-bottom pb-2"><i class="bi bi-bag-check-fill me-2 text-orange"></i> TEAM KIT AND EQUIPMENT</h2>
        <div class="row g-4">
			{% if products %}{% for p in products: %}
            <div class="col-md-3">
                <div class="card h-100 border-0 shadow-sm text-center p-3">
                    <div class="bg-secondary-subtle rounded p-4 mb-3">
                        <img src="{{url_for('static',filename='img/store/' ~ p['id'] ~ '.png')}}" class="img-fluid" style="max-height: 200px;" alt="Bufanda Hattrick">
                    </div>
                    <p class="fs-4 fw-bold">{{p["name"]}}</p>
                    <p class="text-muted small">{{p["description"]}}</p>
                    <p class="fw-bold text-orange fs-4">{{p["price"]}} €</p>
                    <a href="{{url_for('store.cart', team_id=team.id)}}/{{p['id']}}" class="btn btn-warning w-100 fw-bold">ADD TO CART</a>
                </div>
            </div>{% endfor %}{% else %}<div class="row g-4">No items available right now. Check back soon for new gear!</div>{% endif%}
        </div>
    </div>
</section>{% endblock %}