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

{% block body %}


    <div class="container ">
        <div class="main-container">
            {# user notice #}
            {% set flashbagValidMessage = app.session.flashbag.get('user-notice') %}
            {% if flashbagValidMessage is not empty %}
                <div class="errorContainer">
                    {% for flashMessage in flashbagValidMessage %}
                        <div class="user-message user-notice">{{ flashMessage }}</div>
                    {% endfor %}
                </div>
            {% endif %}

            {# warning #}
            {% for flashMessage in app.session.flashbag.get('warning') %}
                <div class="user-message user-warning">{{ flashMessage }}</div>
            {% endfor %}

            {# error #}
            {% set flashbagError = app.session.flashbag.get('error') %}
            {% if flashbagError is not empty %}
                <div class="errorContainer">
                    <h3 class="title-error">{% trans %}The following errors have been found:{% endtrans %}</h3>
                    {% for flashMessage in flashbagError %}
                        <div class="user-message user-error">{{ flashMessage }}</div>
                    {% endfor %}
                </div>
            {% endif %}

            <header>
                <h1>Orders</h1>
                {% if book %}
                    <p>For book: {{ book.title}} - {{ book.reference}} - {{ book.subject}} (ID = {{ book.id }})</p>
                {% endif %}
                <h2></h2>
            </header>

            <section class="order-actions">
                <a  href="{{ path('CustomersToContactExport') }}" class="btn btn-primary printOrder">Contact and Print</a>
                <div class="clear"></div>
            </section>

            <section class="orderlist">
                <table id="ordersTable"
                       class="linoTable table-striped table-pointer"
                       data-toggle="table"
                       data-url="{{ path('AjaxOrders') }}"
                       data-query-params="orderQueryParams"
                       data-pagination="true"
                       data-side-pagination="server"
                       data-page-list="[20, 50, 100, 200]"
                       data-search="true"
                       data-show-refresh="true"
                       data-show-pagination-switch="true"
                       data-show-columns="true">
                    <thead>
                    <tr>
                        <th data-field="identifier" data-sortable="true">Identifier</th>
                        <th data-field="state" data-align="left" data-sortable="true" >State</th>
                        <th data-field="creationDate" data-align="left" data-sortable="true">Creation<br>date</th>
                        <th data-field="updateDate" data-align="left" data-sortable="true">Update<br>date</th>
                        <th data-field="contacted" data-sortable="true">Contacted</th>
                        <th data-field="courseName" data-sortable="true">CourseName</th>
                        <th data-field="phone" data-sortable="false">Phone</th>
                        <th data-field="customername" data-sortable="true">Customer</th>
                        <th data-field="total" data-sortable="false">Total</th>
                    </tr>
                    </thead>
                </table>
            </section>

        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" media="all" href="{{ asset('bootstraptable/bootstrap-table.min.css') }}" />
{% endblock %}

{% block javascripts %}
    <script>
      var TWIG_ORDER = {};
      TWIG_ORDER.currentIdBook = "{{ idBook }}";
    </script>
    <script src="{{ asset('bootstraptable/bootstrap-table.min.js') }}"></script>
  {{ parent() }}
    <script src="{{ asset('js/orderList.js') }}"></script>
{% endblock %}

{% block title %}{% trans %}TioApp order detail{% endtrans %}{% endblock %}