{% extends "base.html" %}
<!-- Load internationalisation utils-->
{% load i18n %}
{% load static %}
{% load rules %}

{% block title %} {% trans 'Orders' %} {% endblock %}

{% block content %}
{% has_perm 'sous_chef.edit' request.user as can_edit_data %}

{% if delivery_date %}
    {% include 'kitchen_count_steps.html' with step='orders' %}
{% endif %}

<div class="ui secondary pointing fluid menu">
    <h1 class="ui header">
        {% if delivery_date %}
            {% trans "Review orders" %}
        {% else %}
            {% trans "Kitchen Count" %}
        {% endif %}
        </h1>
</div>

<div class="ui stackable relaxed grid container">

    {% if delivery_date %}
        <div class="sixteen wide column">

            <div class="ui list">
                <a class="item">
                    <i class="right triangle icon"></i>
                    <div class="content">
                        <div class="header">{% trans 'Orders' %}</div>
                        <div class="description">
                            {% trans 'Orders include ongoing and episodic clients. Only Ordered orders from Active clients are included.' %}
                        </div>
                    </div>
                </a>
                <a class="item">
                    <i class="marker icon"></i>
                    <div class="content">
                        <div class="header">{% trans 'Geolocation' %}</div>
                        <div class="description">{% trans 'Highlighted orders are not properly geolocated. Edit the client information to fix it.' %}</div>
                    </div>
                </a>
            </div>
        {% endif %}

    </div>

    {% if can_edit_data %}
        <div class="sixteen wide column">
            Select a date to view orders for that day.
        </div>
        <div class="four wide column">
            <div class="field">
                <label style="font-weight: 700;">{% trans 'Date:' %}</label>
                <div class="ui calendar" id="generate_order_date_calendar">
                    <div class="ui input left icon">
                        <i class="calendar icon"></i>
                        <input type="text" name="generate_order_date" value="{{ delivery_date_iso }}" class="ui calendar" placeholder="YYYY-MM-DD" maxlength="10">
                    </div>
                </div>
            </div>
        </div>

        {% if delivery_date %}
            <div class="twelve wide bottom aligned column">
                <div class="ui labeled button" tabindex="0">
                    {% csrf_token %}
                    <div class="ui pink big button orders" data-url="{% url 'delivery:refresh_orders'%}">
                        <i class="refresh icon"></i> {% trans 'Generate orders' %}
                    </div>
                    {% with count=nb_of_ordered_orders %}
                    <a class="ui basic left pointing pink label orders-count" data-order-count={{count}}>
                    {# Translators: This text is displayed in the kitchen count -> step 1: order review -> pink button #}
                    {% blocktrans trimmed %}
                        <span>{{ count }}</span>&nbsp;orders
                    {% endblocktrans %}
                    </a>
                    {% endwith %}
                </div>
            </div>
            <div class="sixteen wide bottom aligned column" id="generate-orders-error-message" style="display: none;">
                <div class="ui negative message">
                    <p id="generate-orders-error-message-content"></p>
                </div>
            </div>
        {% endif %}
    {% endif %}

    {% if delivery_date %}
        <h4 class="ui horizontal divider header">
            <i class="unhide icon"></i>
            {% blocktrans trimmed %}
                Review orders for {{ delivery_date }}
            {% endblocktrans %}
        </h4>

        <div class="sixteen wide column">
            <form action="" method="get" class="ui form review-orders-client-search">
                <input type="hidden" name="delivery_date" value="{{ delivery_date.isoformat }}"/>
                <div class="inline fields">
                    <div class="field">
                        <label for="{{ filter.form.client_name.auto_id }}">{% trans 'Client name' %}</label>
                        <div class="field">
                            <div class="ui large left icon input">
                                <i class="users icon"></i>
                                {{ filter.form.client_name }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="field padded">
                    <a href="{% url 'delivery:order' %}?delivery_date={{ delivery_date.isoformat }}" class="ui basic button">{% trans 'Reset' %}</a>
                    <button class="ui yellow button" type="submit">{% trans 'Search' %}</button>
                </div>
            </form>
            {% include 'partials/generated_orders.html' %}
        </div>

        {% if can_edit_data %}
        <div class="sixteen wide column">
            <a class="ui labeled icon right yellow big button" href="{% url 'delivery:meal' %}?delivery_date={{ delivery_date.isoformat }}">
                <i class="chevron right icon"></i>{% trans "OK, I'm ready" %}
            </a>
        </div>
        {% endif %}
    {% endif %}

</div>

{% endblock %}
