{% extends 'economy/economy_base.html.twig' %}

{% block title %}{{ category }}{% endblock %}

{% block right %}
    {% if uncategorized is defined and uncategorized is not null %}
        <div class="card border-primary mb-3">
            <div class="card-header">Uncategorized</div>
            <div class="card-body">
                <div class="row">
                    {% for item in uncategorized %}
                        <div class="col">
                            <div class="list-group border-bottom rounded-3 mb-2">
                                <a href="{{ path('app_economy_item', {league: global_twig_service.getCurrentLeague.getName, type: item.type, slug: item.slug}) }}"
                                   class="list-group-item list-group-item-action py-3 lh-tight">
                                    <div class="d-flex w-100 align-items-center">
                                        <img src="{{ item.icon }}">&nbsp{{ item.name }}
                                    </div>
                                </a>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}

    {% if categorized is defined and categorized is not null %}
        {% for subcategoryName, allItems in categorized %}
        <div class="card border-primary mb-3">
            <div class="card-header">{{ subcategoryName }}</div>
            <div class="card-body">
                {% for batch in allItems|batch(4) %}
                    <div class="row">
                        {% for item in batch %}
                            <div class="col-sm-3">
                                <div class="list-group rounded-3 mb-2">
                                    <a href="{{ path('app_economy_item', {league: global_twig_service.getCurrentLeague.getName, type: item.type, slug: item.slug}) }}"
                                       class="list-group-item list-group-item-action py-3">
                                        <div class="d-flex w-100 align-items-center">
                                            <img src="{{ item.icon }}">&nbsp{{ item.name }}
                                        </div>
                                    </a>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    {% endif %}
{% endblock %}