{% extends "base.html.twig" %}

{% block title %}
	{{ parent() }}
	- Home
{% endblock %}

{% set transactions = transactions().findAllLatest(8) %}
{% set users = users|default([]) %}

{% macro sidebar_content(player, transactions, users) %}
  {% if player and player.creditBalance > 0 %}
      <div class="alert alert-warning text-center mb-3 d-flex flex-column">
          <div>You have ${{ player.creditBalance|number_format(2) }} of account credit.</div>
          <a href="/purchase" class="btn btn-outline-warning rounded-pill mt-2">Browse Store</a>
      </div>
  {% endif %}

  <div class="card mb-3">
      <div class="card-header fw-semibold text-white">
          Recent Buyers
      </div>
      <div class="card-body">
          {# {% if transactions|length > 0 %}
              <!-- First transaction shown prominently at the top -->
              <div class="first-buyer mb-3 d-flex align-items-center">
                  <a href="https://steamcommunity.com/profiles/{{ transactions[0].usersteamid }}" target="_blank" class="me-3">
                      <img src="{{ users[0].avatar }}" alt="{{ users[0].username }}" class="border shadow rounded" style="width: 64px; height: 64px;">
                  </a>
                  <div>
                      <h5 class="mb-1">{{ users[0].username }}</h5>
                      <small class="text-muted">Latest Purchase</small>
                  </div>
              </div>
              
              <!-- Remaining transactions in a grid -->
              {% if transactions|length > 1 %}
                  <h6 class="mb-2">Previous Buyers</h6>
                  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 g-2">
                      {% for i in 0..(transactions|length-1) %}
                          <div class="col text-center">
                              <a href="https://steamcommunity.com/profiles/{{ transactions[i].usersteamid }}" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ users[i].username }}">
                                  <img src="{{ users[i].avatar }}" alt="{{ users[i].username }}" class="border shadow rounded mb-1" style="width: 40px; height: 40px;">
                              </a>
                          </div>
                      {% endfor %}
                  </div>
              {% endif %}
          {% else %}
              <p class="text-center text-muted my-3">No purchases yet</p>
          {% endif %} #}
      </div>
  </div>

  <div class="card">
      <div class="card-header fw-semibold text-white">
          Disclaimer
      </div>
      <div class="card-body">
          <small class="text-muted mb-0">Before purchasing, please read the <a href="/tos" class="text-decoration-underline">Terms of Service</a>. Not affiliated with Valve Corporation. Steam and the Steam logo are trademarks and/or registered trademarks of Valve Corporation in the U.S. and/or other countries. Please do not contact Steam Support for issues related to this service.</small>
      </div>
  </div>
{% endmacro %}

{% block content %}
	<!-- Mobile Sidebar Toggle Button (visible only on mobile) -->
	<div class="d-lg-none mb-3">
		<button class="btn btn-outline-info w-100" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="sidebar">
			<i class="fas fa-list me-2"></i> Sidebar
		</button>
	</div>

	<div class="row g-3">
		<!-- Sidebar - Hidden on mobile and shown as offcanvas -->
		<div class="col-lg-3 d-none d-lg-block">
			<!-- Desktop sidebar content -->
            {{ _self.sidebar_content(player, transactions, users) }}
		</div>

		<!-- Mobile Offcanvas Sidebar -->
		<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar" aria-labelledby="sidebarLabel">
			<div class="offcanvas-header">
				<h5 class="offcanvas-title" id="sidebarLabel">Server Store</h5>
				<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
			</div>
			<div class="offcanvas-body">
				<!-- Mobile sidebar content (same as desktop) -->
				{{ _self.sidebar_content(player, transactions, users) }}
			</div>
		</div>

		<!-- Main Content -->
		<div class="col-lg-9">
			<!-- Hero Card -->
			<div class="card text-white mb-4 shadow" style="background: linear-gradient(135deg, #11111182 0%, #1a1a1a 100%), url({{ asset("/web/images/etc/homepage-hero.png") }}) no-repeat center center; background-size: cover;">
				<div class="card-body text-center p-5">
					<h1 class="display-4 fw-bold">Server Store</h1>
					<p class="lead">Aid the cause and unlock elite ranks, supply caches, force boosts, XP holocrons, legendary hilts, and other rare galactic treasures.</p>
					<a href="/purchase" class="btn btn-outline-light rounded-pill px-5 mt-3">Browse the Outpost Bazaar</a>
				</div>
			</div>

			<div class="row g-3">
				<div class="col-md-4">
					<div class="card h-100 shadow-sm">
						<div class="card-body text-center">
							<h5 class="card-title fw-semibold">Ranks</h5>
							<p class="card-text text-muted">Ascend through the galactic hierarchy and unlock unique powers and privileges.</p>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="card h-100 shadow-sm">
						<div class="card-body text-center">
							<h5 class="card-title fw-semibold">Crate Keys</h5>
							<p class="card-text text-muted">Open encrypted supply crates to reveal rare tech, gear, and artifacts.</p>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="card h-100 shadow-sm">
						<div class="card-body text-center">
							<h5 class="card-title fw-semibold">Bundles</h5>
							<p class="card-text text-muted">Strategic supply packs filled with boosters, gear, and galactic-grade value.</p>
						</div>
					</div>
				</div>
			</div>

			<!-- Call to Action Card -->
			<div class="card text-white mt-4 shadow">
				<div class="card-body text-center p-4">
					<h3 class="fw-bold">Ready to Join the Fight?</h3>
					<p class="text-muted">Your support strengthens the forces across the galaxy.</p>
					<a href="/store" class="text-white fart btn btn-warning border border-3 balls px-5 btn-lg rounded-pill mt-2"><b>Begin Your Saga!</b></a>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block scripts %}
  <script>
		document.addEventListener('DOMContentLoaded', function() {
			var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
			tooltipTriggerList.forEach(function(tooltipTriggerEl) {
				new bootstrap.Tooltip(tooltipTriggerEl)
			})
		})
	</script>
{% endblock %}