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

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

{% macro sidebar_content(games) %}
  <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" 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) }}
    </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) }}
      </div>
    </div>

    <!-- Main Content -->
    <div class="col">
      <div class="card">
        <div class="card-body">
          Please select a category from the sidebar to view products.
        </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 %}