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

{% set breadcrumb = buildBreadcrumb([
    {'route': 'app_tools_index', 'trans': 'menu.tools'},
    {'route': 'app_tools_index', 'trans': 'menu.inventories'}
], inventory) %}

{% block title %}
    {{ renderTitle(breadcrumb)  }}
{% endblock %}

{% block breadcrumb %}
    {{ renderBreadcrumb(breadcrumb)  }}
{% endblock %}

{% macro recursiveCollection(collection) %}
    {% import _self as self %}
    <li class="inventory-collection-show">
        <div class="card-panel {{ collection.totalCheckedItems == collection.totalItems ? 'green lighten-4' : 'red lighten-4' }}">
            {{ collection.title }} -
            <span class="js-checked-counter">{{ collection.totalCheckedItems }}</span> / <span class="js-total-counter">{{ collection.totalItems }}</span>
            (<span class="js-rate">{{ ((collection.totalCheckedItems*100)/collection.totalItems)|round(2) }}</span>%)
        </div>

        {% if collection.children|length %}
            <ul>
                {% for child in collection.children %}
                    {{ self.recursiveCollection(child) }}
                {% endfor %}
            </ul>
        {% endif %}

        {% if collection.items|length %}
            <ul>
                {% for item in collection.items %}
                    <li>
                        <p>
                            <label>
                                <input type="checkbox" data-id="{{ item.id }}" {{ item.checked ? 'checked' }}>
                                <span>{{ item.name }}</span>
                            </label>
                        </p>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    </li>
{% endmacro %}

{% from _self import recursiveCollection %}

{% block content %}
    <div class="title-block">
        <h1>
            {{ inventory.name }}
        </h1>
        {{ include('App/Inventory/_nav_pills.html.twig', {'inventory': inventory}) }}

        <div></div>

        <div class="btn-holder">
            <div class="left">
                <a href="#delete" class="modal-trigger button" title="{{ 'tooltip.delete'|trans }}">
                    <i class="fa fa-trash fa-fw"></i>
                </a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

    <div class="content-block">
        <div class="block-element">
            <div class="row">
                <h2 class="header">{{ 'title.collections'|trans }}</h2>
                <div class="col s12 m10 offset-m1">
                    <ul id="inventory-root" data-inventory-id="{{ inventory.id }}">
                        <li>
                            {% for collection in inventory.contentAsArray %}
                                <ul>
                                    {{ recursiveCollection(collection) }}
                                </ul>
                            {% endfor %}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block modals %}
    {% if context == 'default' %}
        {{ include('App/_partials/_modal/_delete.html.twig', {'id': 'delete', 'route': url('app_inventory_delete', {id: inventory.id}), transKey: 'message.delete.inventory'}) }}
    {% endif %}
{% endblock %}