{% extends 'base.html.twig' %}
{% block title %}Suborder Details{% endblock %}
{% block body %}
    {% set subName = 'szczegóły'|upper %}
    <div class="element-main-container">
    <div class="top-menu-container">
        {% set name = 'zamówenia'|upper %}
        {{ include('nav/top_menu/top_menu.html.twig') }}
    </div>
    <div class="od_name">
        <div class="od_text">
            <h1>Szczegóły zlecenia: {{ order.orderNumber }}</h1>
        </div>

        <div class="o_rtf_menu">
            <div class="o_rtf_container">
                <div class="order-add-new-suborder">
                    <a href="{{ path('sub_order_new', {id: order.id}) }}">
                        Dodaj nowe podzlecenie
                    </a>
                </div>
            </div>
        </div>
    </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" style="padding: 30px">
            <div id="app">
                <suborder-list-for-one-order order-id="{{ order.id }}"></suborder-list-for-one-order>
            </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 %}