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

    <div class="page-header">
        <h3>Управление услугами</h3>
        {% if current_service %}
            <p>Ваша текущая услуга <a href="#dv">{{ current_service.tariff.title }}</a>
                за <b>{{ current_service.tariff.amount }}</b> руб.</p>
        {% else %}
            <p>У вас нет активной услуги, для использования ресурсов приобретите нужную услугу из представленных
                ниже.<br>
                А если уже заказали то просто активируйте услугу из списка заказанных.</p>
        {% endif %}
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <h4>Ваши заказанные услуги</h4>
                <ul class="list-group">
                    {% for abon_tariff in own_abon_tariffs %}
                        <li class="list-group-item">
                            <div class="btn-group">
                                {% if abon_tariff == current_service %}
                                    <a href="{% url 'client_side:complete_service' abon_tariff.pk %}"
                                       class="btn btn-xs btn-danger btn-modal" title="Завершить услугу досрочно">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </a>
                                {% else %}
                                    {% if not current_service %}
                                        <a href="{% url 'client_side:activate_service' abon_tariff.pk %}"
                                           class="btn btn-xs btn-success btn-modal" title="Активировать">
                                            <span class="glyphicon glyphicon-fire"></span>
                                        </a>
                                    {% endif %}
                                    <a href="{% url 'client_side:unsubscribe_service' abon_tariff.pk %}"
                                       class="btn btn-xs btn-danger btn-modal" title="Удалить услугу из списка">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </a>
                                {% endif %}
                            </div>
                            <span class="badge">{{ abon_tariff.tariff.amount }}</span>
                            <a href="#sdv">
                                {% if abon_tariff.is_started %}
                                    <b>{{ abon_tariff.tariff.title }}</b>
                                {% else %}
                                    {{ abon_tariff.tariff.title }}
                                {% endif %}
                            </a>
                        </li>
                    {% empty %}
                        <li class="list-group-item">У вас нет заказанных услуг</li>
                    {% endfor %}
                </ul>
            </div>
            <div class="col-lg-8">
                <h4>Выберите ещё услугу</h4>

                <div class="container-fluid">
                    <div class="row">
                        {% for tarif in tarifs %}
                            <div class="col-lg-4">
                                <h3>{{ tarif.title }}</h3>

                                <p>{{ tarif.descr }}</p>

                                <p>Входящая скорость: {{ tarif.speedIn }} MBit/s<br>
                                    Исходящая скорость: {{ tarif.speedOut }} MBit/s<br>
                                    Стоимость: {{ tarif.amount }} руб.</p>

                                {% if request.user.is_staff %}
                                    <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> Заказать
                                </a>
                            </div>
                        {% empty %}
                            <div class="col-lg-4">
                                <h3 class="panel-title">Нет доступных услуг для заказа</h3>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}