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

{% block body %}

<div class = "line_text_brands">
<div class = "display_ok2"><i style = "color:red;"class="fa fa-phone-square" aria-hidden="true"></i>&nbsp; +1 905-282-9699 &nbsp;&nbsp; </div>
<div class = "display_ok"><i style = "color:red;" class="fa fa-map-marker" aria-hidden="true"></i>&nbsp; 5935 Ambler Drive Mississauga, ON, L4W 2K2, Canada &nbsp;&nbsp;</div>
<div class = "display_ok1"><i style = "color:red;" class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp; barteximport@gmail.com</div> 
<div style = "float: right; text-align: right;"><a href = "{{ path('app_logout') }}"><button type = "submit" class = "login_submit_brands"> <i class='fa fa-sign-out' id = "rt_brands" aria-hidden='true'></i>   &nbsp;&nbsp; <span class = "log_in_brands">Log out </span></button></a></div>
</div>

<a href="{{ path('order_list') }}">
    <img src = "{{ asset('build/images/logo.png') }}" class = "logo_size">
</a>

<form method="get">
    <div class = "grid_search1">
        <div class = "search_title">Search</div>
        <div class="input-group">
            <div class="form-outline">
                <input id="search-focus" type="search" id="form1" placeholder="order" class="form-control" name="search" />
            </div>
           <button type="button" class="btn btn-primary"><i class="fa fa-search" id = "qwa" aria-hidden="true"></i></button>
        </div>
   </div>
</form>


<div class = "title">Orders</div>
    <a href = "{{ path('order_new') }}"><div class = "add_order">Add new order</div></a>

<center><div class = "grid_template_legends">
	<div><div style = "background-color: #f3ca3e; width:30px; height:30px;"></div></div>
	<div><div style = "background-color: #2ac940; width:30px; height:30px;"></div></div>
	<div><div style = "background-color: #f0053e; width:30px; height:30px;"></div></div>
    <div style = "font-size: 16px; color: #f3ca3e;">for payment</div>
	<div style = "font-size: 16px; color: #2ac940;">Active</div>
	<div style = "font-size: 16px; color: #f0053e;">Canceled</div>
</div></center>


<div class = "grid_groop_order">
    <div class = "order_number">ORDER NUMBER</div>
    <div class = "order_date">DATE OF ORDER</div>
    <div class = "order_price" style = "margin-left: 14px;">FINAL PRICE</div>
    <div class = "status21" id = "status_order">STATUS</div>
    <div class = "status21" id = "action_order">ACTION</div>
</div>

{% for order in orders %}
    <div class = "grid_groop_content_order">
        <div class = "grp">
            <b>{{ order.number }}</b>
        </div>
        <div class = "grp"><b>{{ order.date }}</b></div>
        <div class = "grp" id = "price_red"><b>$ {{ order.price }}</b></div>
        <div class = "grp order_status_column">

            <div data-id="{{ order.id }}" id="order_status_field_{{ order.id }}" class = "{% if order.status == 1 %}active11_order{% endif %}{% if order.status == 2 %}waiting{% endif %}{% if order.status == 3 %}inactive11_order{% endif %}">
                <span class="order_status_text">
                {% if order.status == 1 %}active{% endif %}
                {% if order.status == 2 %}waiting for payment{% endif %}
                {% if order.status == 3 %}canceled{% endif %}
                </span>
            </div>
        </div>

        <div class = "view">
            <a href = "{{ path('order_edit', {'order': order.id}) }}">{% if order.status == 2 %}View / edit{% else %}View{% endif %}</a>
        </div>
    </div>
{% else %}
    <div class="grid_groop_content_order" style="grid-template-columns: 1fr">
        No orders found
    </div>
{% endfor %}


{{ knp_pagination_render(orders) }}

{% endblock %}