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

{#<div class="title-profile-cont">#}
{#    {% translate "Подписка" %}#}
{#</div>#}

<div>

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

    <div class="state_subscribe">
        {% translate "Для того, чтобы воспользоваться сервисом - оформите подписку" %}
    </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 %}
                        {% translate "Бесплатно" %}
                    {% endif %}
                </div>
                <div class="periud_subscribe" style="color: {{ subscribe.text_color }}">
                    {% translate "Период:" %} {{ subscribe.period_name }}
                </div>
            </div>
            <div class="options_subscribe">
                <div class="options_subscribe_title light" style="color: {{ subscribe.text_color }}">
                    {% translate "Опции:" %}
                </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(this, {{ subscribe.id }},'{% if page.url == 'for_movers' or page.url == 'for_customers' %}a{% endif %}','{% url "profile_page" "my_subscribe" %}')" class="arrange_subscribe">{% translate "Оформить подписку" %}</button>
                <div class="unsubscribe_info">*{% translate "для отмены подписки создайте запрос в техподдержке" %}</div>

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