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

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

{% macro sidebar_content(games, _category) %}
  <div class="card mb-2 overflow-hidden">
    <div class="card-body p-0">
      <div class="list-group list-group-flush">
        {% for game in games %}
          <a class="list-group-item list-group-item-action bg-gradient text-white disabled">
            {{ game.name }}
          </a>
          {% for category in game.categories %}
            <a class="list-group-item list-group-item-action text-white px-4 {% if category.id == _category.id %}active{% endif %}" href="{{ path('catalog.category', {'id': category.id}) }}">
              {{ category.name }}
            </a>
          {% endfor %}
        {% endfor %}
      </div>
    </div>
  </div>
{% endmacro %}

{% block content %}
  <!-- Mobile Sidebar Toggle Button (visible only on small screens) -->
  <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> Categories
    </button>
  </div>

  <div class="row g-2">
    <!-- Desktop Sidebar (hidden on medium screens but shown on large screens) -->
    <div class="col-sm-3 d-none d-md-none d-lg-block">
      {{ _self.sidebar_content(games, _category) }}
    </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">Categories</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        {{ _self.sidebar_content(games, _category) }}
      </div>
    </div>

    <div class="col">
      <div class="card">
        <div class="card-header d-flex flex-column justify-content-center">
          <div>{{ _category.name }}</div>
          <small class="text-muted">{{ _category.description }}</small>
        </div>
        <div class="card-body">
          <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-2">
            {% for product in products %}
              <div class="col">
                <div class="card">
                  <img src="{{ product.image }}" class="card-img-top" alt="{{ product.name }}" width="256">
                  <div class="card-body">
                    <h5 class="card-title text-center">{{ product.name }}</h5>
                    <button product-fetch="{{ product.id }}" class="btn btn-primary w-100">{{ (product.price / 100)|format_currency("USD") }}</button>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block modals %}
{{ parent() }}

{# Product View Modal #}
<div class="modal bg-blur fade" tabindex="-1" id="productModal">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="productTitle"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="productDetailsContent"></div>
      </div>
      <div class="modal-footer d-flex justify-content-between">
        <div class="modal-footer-text" id="productPrice">
        </div>
        <div class="modal-buttons">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="addToCartButton">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

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

  </script>
{% endblock %}