{% 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>
<div class="type_of_subscribes">
    {% for subscribe in subscribes %}
        <div class="container_subscribe light" style="background: {{ subscribe.bg_color }}">
            <div class="first-decr-subscribe">
                <div style="color: {{ subscribe.text_color }}">
                    {{ subscribe.name }}
                </div>
                <div class="price_subscribe">
                    {% if subscribe.price %}
                        {{ subscribe.price|floatformat }}$
                    {% else %}
                        Бесплатно
                    {% endif %}
                </div>
                <div class="periud_subscribe" style="color: {{ subscribe.text_color }}">
                    Период: {{ subscribe.period_name }}
                </div>
            </div>
            <div class="options_subscribe">
                <div class="options_subscribe_title light" style="color: {{ subscribe.text_color }}">
                    Опции:
                </div>
                <div class="list_options_subscribe">
                    <ul class="option_list">
                        {% for opt in subscribe.options.all %}
                            <li class="items_subscribe select" style="color: {{ subscribe.text_color }}"><text>{{ opt.name }}</text></li>
                        {% endfor %}
                        {% for opt_dis in subscribe.disabled_options %}
                            <li class="items_subscribe unselect"><text>{{ opt_dis.name }}</text></li>
                        {% endfor %}

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

{#<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>#}