{% extends 'dashboard/layout.html' %}
{% load currency_filters %}
{% load i18n %}

{% block body_class %}{{ block.super }} orders home{% endblock %}

{% block extrahead %}
    {{ block.super }}
{% endblock %}

{% block extrascripts %}
  {{ block.super }}

  {# Translation support for JavaScript strings. #}
  <script type="text/javascript" src="{% url 'django.views.i18n.javascript_catalog' %}"></script>
{% endblock extrascripts %}

{% block breadcrumbs %}
{% endblock %}

{% block headertext %}
{% trans "Dashboard" %}
{% endblock %}

{% block dashboard_content %}
<div class="table-header">
    <i class="icon-signal icon-large"></i>{% trans "Store Statistics (Last 24 Hours)" %}
</div>

<div class="content-block">
    <div class="row">
        <aside class="col-md-3 order-graph-details">
            <label><span><i class="icon-shopping-cart"></i>{{ total_orders_last_day }}</span>{% trans "Orders" %}</label>
            <label><span><i class="icon-hand-right"></i>{{ total_customers_last_day }}</span>{% trans "New Customers" %}</label>
            <label><span><i class="icon-money"></i>{{ total_revenue_last_day|currency }}</span>{% trans "Revenue" %}</label>
            <label><span><i class="icon-credit-card"></i>{{ average_order_costs|currency }}</span>{% trans "Average order cost" %}</label>
            <label><span><i class="icon-credit-card"></i>{{ average_paid_order_costs|currency }}</span>{% trans "Average (paid) order cost" %}</label>
        </aside>
        <div class="col-md-9">
            <div id="order_graph">
                <div class="bar-caption"><h1>{% trans "Revenue" %}</h1></div>
                <div class="bar-y-axis">
                    <ul>
                    {% for y_value in hourly_report_dict.y_range %}
                        <li><span>{{ y_value|currency }}</span></li>
                    {% endfor %}
                    </ul>
                </div>
                <dl class="bar-chart">
                    {% for item in hourly_report_dict.order_total_hourly %}
                        <dd class="bar-layer">
                            <em>{{ item.end_time|time }}</em>
                            <span style="height: {{ item.percentage }}%;" >
                                <p{% if item.percentage == 0 %} style="display: none;"{% endif %}>{{ item.total_incl_tax|currency }}</p>
                            </span>
                        </dd>
                    {% endfor %}
                </dl>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <table class="table table-striped table-bordered table-hover">
            <caption><i class="icon-gift icon-large"></i>{% trans "Products and vouchers" %}</caption>
            <tr>
                <th class="col-md-10">{% trans "Total products" %}</th>
                    <td class="col-md-2" >{{ total_products }}</td>
            </tr>
            <tr>
                <th class="col-md-10">{% trans "Active Vouchers" %}</th>
                <td class="col-md-2" >{{ total_vouchers }}</td>
            </tr>
        </table>
    </div>
</div>
{% endblock %}