{% extends 'clientsideapp/ext.html' %}
{% load i18n %}
{% block client_main %}

    <div class="page-header">

        <div class="container">
            <div class="row">
                <div class="col-lg-7">
                    {% if current_service %}

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            {% trans 'Your current service' %}
                        </div>
                        <div class="panel-body">
                            <h3 class="panel-title">{{ current_service.tariff.title }}</h3><br>
                            <dl class="dl-horizontal">
                                <dt>{% trans 'The date of connection' %}</dt>
                                <dd>{{ current_service.time_start|date:"d E Y, l" }}</dd>

                                <dt>{% trans 'The date of finish service' %}</dt>
                                <dd>{{ current_service.deadline|date:"d E Y, l" }}</dd>

                                <dt>{% trans 'Cost' %}</dt>
                                <dd>{{ current_service.tariff.amount }} {% trans 'currency' %}</dd>

                                <dt>{% trans 'Auto continue service.' %}</dt>
                                <dd><input type="checkbox" data-url="{% url 'clientsideapp:set_auto_continue_service' %}" class="autosave" {{ request.user.autoconnect_service|yesno:'checked,' }}></dd>

                            </dl>
                            <p>{{ current_service.tariff.descr }}</p>
                            {% blocktrans trimmed %}
                                The check box <b>Auto continue service</b> for auto-renewal service
                                is designed so that the following <u>automatically</u> connected to the service
                                that you had last month. Connection will occur if the account has enough funds.</p>
                                <p>If you do not have time to make a Deposit before the service ended,
                                replenish your account and log back into your personal account to connect it.</p>
                            {% endblocktrans %}
                        </div>
                    </div>

                    {% else %}
                    <div class="alert alert-warning" role="alert">
                        <span class="glyphicon glyphicon-exclamation-sign"></span>
                        {% blocktrans trimmed %}
                            <strong>Attantion!</strong>
                            You have not yet a service, for use the services please purchase service you want.
                        {% endblocktrans %}
                        </div>
                    {% endif %}

                </div>
                <div class="col-lg-5">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            {% trans 'Services available for ordering' %}
                        </div>
                        <div class="panel-body">
                            <div class="container-fluid">
                                <div class="row">
                                    {% for tarif in tarifs %}
                                        <div class="col-lg-12">
                                            <h3>{{ tarif.title }}</h3>

                                            <i>{{ tarif.amount }} {% trans 'currency' %}</i>
                                            <p>{{ tarif.descr }}</p>

                                            {% if request.user.is_staff or current_service %}
                                                <a href="#" class="btn btn-primary disabled">
                                            {% else %}
                                                <a href="{% url 'client_side:buy_service' tarif.id %}" class="btn btn-primary btn-modal">
                                            {% endif %}
                                                    <span class="glyphicon glyphicon-shopping-cart"></span> {% trans 'Pick' %}
                                                </a>
                                        </div>
                                    {% empty %}
                                        <div class="col-lg-4">
                                            <h3 class="panel-title">{% trans 'No services available for ordering' %}</h3>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% if current_service %}
                {% include 'custom_pages/service.htm' with active_service=current_service %}
            {% endif %}
        </div>
    </div>

    {% include 'custom_pages/service_bottom.htm' %}

{% endblock %}