{% load static %}
{% load i18n %}

<div class="title-profile-cont">
    Подписка
</div>

<div>

    <div class="state_subscribe">
        {% translate "У вас" %} <a>{% translate "не оформлена подписка" %}</a>
    </div>

    <div class="state_subscribe">
        Для того, чтобы воспользоваться сервисом - оформите подписку
    </div>

</div>

{% for subscribe in subscribes %}
    <div class="container_subscribe first light">
        <div class="first-decr-subscribe">
            <div>
                {{ subscribe.name }}
            </div>
            <div class="price_subscribe">
                {{ subscribe.price }}
            </div>
            <div class="periud_subscribe">
                Период: {{ subscribe.period_name }}
            </div>
        </div>
        <div class="options_subscribe">
            <div class="options_subscribe_title light">
                Опции:
            </div>
            <div class="list_options_subscribe">
                <ul class="option_list">
                    {% for opt in subscribe.options.all %}
                        <li class="items_subscribe select"><text>{{ opt.name }}</text></li>
                    {% endfor %}


                </ul>
            </div>
        </div>
        <div class="text-align-center">
            <button class="arrange_subscribe">Оформить подписку</button>
        </div>
    </div>
{% endfor %}


<div class="type_of_subscribes">
    <div class="container_subscribe first light">
        <div class="first-decr-subscribe">
            <div>
                Лайт
            </div>
            <div class="price_subscribe">
                2 $
            </div>
            <div class="periud_subscribe">
                Период: 24 часа
            </div>
        </div>
        <div class="options_subscribe">
            <div class="options_subscribe_title light">
                Опции:
            </div>
            <div class="list_options_subscribe">
                <ul class="option_list">
                    <li class="items_subscribe select"><text>Просмотр контактов</text></li>
                    <li class="items_subscribe select"><text>Размещение заявок</text></li>
                    <li class="items_subscribe select"><text>Уведомления на e-mail о появлении перевозчика по заданным критериям</text></li>
                    <li class="items_subscribe unselected"><text>Выделение объявления цветом + 30 поднятий</text></li>
                    <li class="items_subscribe unselected"><text>Push уведомления</text></li>
                    <li class="items_subscribe unselected"><text>СМС уведомления</text></li>
                </ul>
            </div>
        </div>
        <div class="text-align-center">
            <button class="arrange_subscribe">Оформить подписку</button>
        </div>
    </div>

    <div class="container_subscribe second dark">
        <div class="first-decr-subscribe">
            <div>
                Лайт
            </div>
            <div class="price_subscribe">
                2 $
            </div>
            <div class="periud_subscribe">
                Период: 24 часа
            </div>
        </div>
        <div class="options_subscribe">
            <div class="options_subscribe_title dark">
                Опции:
            </div>
            <div class="list_options_subscribe">
                <ul class="option_list">
                    <li class="items_subscribe select"><text>Просмотр контактов</text></li>
                    <li class="items_subscribe select"><text>Размещение заявок</text></li>
                    <li class="items_subscribe select"><text>Уведомления на e-mail о появлении перевозчика по заданным критериям</text></li>
                    <li class="items_subscribe unselected"><text>Выделение объявления цветом + 30 поднятий</text></li>
                    <li class="items_subscribe unselected"><text>Push уведомления</text></li>
                    <li class="items_subscribe unselected"><text>СМС уведомления</text></li>
                </ul>
            </div>
        </div>
        <div class="text-align-center">
            <button class="arrange_subscribe">Оформить подписку</button>
        </div>
    </div>
    <div class="container_subscribe third light">
        <div class="first-decr-subscribe">
            <div>
                Лайт
            </div>
            <div class="price_subscribe">
                2 $
            </div>
            <div class="periud_subscribe">
                Период: 24 часа
            </div>
        </div>
        <div class="options_subscribe">
            <div class="options_subscribe_title light">
                Опции:
            </div>
            <div class="list_options_subscribe">
                <ul class="option_list">
                    <li class="items_subscribe select"><text>Просмотр контактов</text></li>
                    <li class="items_subscribe select"><text>Размещение заявок</text></li>
                    <li class="items_subscribe select"><text>Уведомления на e-mail о появлении перевозчика по заданным критериям</text></li>
                    <li class="items_subscribe unselected"><text>Выделение объявления цветом + 30 поднятий</text></li>
                    <li class="items_subscribe unselected"><text>Push уведомления</text></li>
                    <li class="items_subscribe unselected"><text>СМС уведомления</text></li>
                </ul>
            </div>
        </div>
        <div class="text-align-center">
            <button class="arrange_subscribe">Оформить подписку</button>
        </div>
    </div>
    <div class="clear_both"></div>
</div>