{% extends 'base.html.twig' %}
{% block title %}Suborders List{% endblock %}
{% block body %}
    {% set subName = 'szczegóły'|upper %}
    <div class="element-main-container">
    <div class="top-menu-container">
        {% set name = 'podzlecenia'|upper %}
        {{ include('nav/top_menu/top_menu.html.twig') }}
    </div>
    <div class="suborders-list-wrapper">
{#        <div class="suborder-horizontal-menu-container" data-section="{{ subName }}">#}
{#            <nav class="o_h_menu">#}
{#                <ul class="o_h_menu_url">#}
{#                    <li class="details-active"><a href="{{ path('order_details', {id: order.id}) }}"><p>ZLECENIE</p>#}
{#                        </a></li>#}
{#                    <li class="suborder">#}
{#                        <a href="#"><p>PODZLECENIA</p></a>#}
{#                    </li>#}
{#                    <li class="invoices"><a href="#"><p>FAKTURY I NOTY (0)</p></a></li>#}
{#                    <li class="documents"><a href="#"><p>DOKUMENTY QR</p> </a></li>#}
{#                </ul>#}
{#            </nav>#}
{#        </div>#}
        {# TODO !!! #}
        <div class="suborders-list-content">
            <div id="app">
                <suborder-list></suborder-list>
            </div>
        </div>
    </div>
    <script>
        var horizontalMenu = document.querySelector('.horizontal-menu-container');
        var contactPerson = document.querySelector('.details');
        if (horizontalMenu.dataset.section == 'SZCZEGÓŁY') {
            contactPerson.classList = "details-active";
        }
    </script>
{% endblock %}