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


    <div class="top_block_static_wrapper">
        <div class="top_block_static">

            {% if page.url == 'for_customers' %}
                <div id=title_static>{% blocktrans %}Отправляй <span class="color_title">посылку</span> в любую точку мира!{% endblocktrans %}</div>
            {% endif %}
            {% if page.url == 'for_movers' %}
                <div id=title_static>{% blocktrans %}Путешествуй по миру и <span class="color_title">перевози</span> посылки!{% endblocktrans %}</div>
            {% endif %}

            <span id="sub_title_static">{{ page.description }}</span>
            <div class="button_container">

                {% if page.url == 'for_customers' %}
                    <button
                            onclick="document.location='{% url 'profile_page' 'create_route_for_customer' %}'"
                            id="more_button">{% translate "Отправить посылку" %}</button>
                {% endif %}
                {% if page.url == 'for_movers' %}
                    <button
                            onclick="document.location='{% url 'profile_page' 'create_route_for_mover' %}'"
                            id="more_button">{% translate "Перевезти посылку" %}</button>
                {% endif %}

                <button
                        onclick= "document.location='#anchor_how_it_work'"
                        id="how_it_work_b">{% translate "Как это работает?" %}
                </button>
            </div>
        </div>
    </div>


    <div class="mid_block_static">

        <div id="title_static">{% translate "О сервисе Trip With Bonus" %}</div>

        <div class="text_wrapper">

            <span>{% translate "Trip With Bonus- это сервис, который соединяет отправителя посылки и перевозчика." %}</span>

            <span>{% translate "Вы можете разместить объявление о перевозке посылки и перевозчики со всего мира откликнуться на ваше объявление или воспользовавшись поиском на сайте найти перевозчика, который будет готов взять Вашу посылку и доставить в указанное место авто- или авива транспортом." %}</span>

            <span>{% translate "Если же Вы часто путешествуете или в разъездах, Вы можете самостоятельно перевозить посылки и при этом получать бонусы и благодарности." %}</span>

        </div>
        <div class="map_wrapper" >
            <img src="/static/img/svg/Map.svg" alt="">
        </div>
        <div class="clear_both" ></div>

        {% include "blocks/static_pages_blocks/b_benefit_img_about_service.html" %}

        <div id="anchor_how_it_work"></div>

        <div id="title_static"

             class="how_it_work" >{% translate "Как это работает?" %}
        </div>
            <div class="benefit_img" >

                <div class="benefit_img_item" >
                    <img src="/static/img/svg/Find_carrier.svg" alt="">
                        {% if page.url == 'for_customers' %}
                            <h3 >{% translate "Найдите перевозчика" %}</h3>
                        {% endif %}
                        {% if page.url == 'for_movers' %}
                            <h3>{% translate "Разместите объявление" %}</h3>
                        {% endif %}

                        {% if page.url == 'for_customers' %}
                            <span>{% translate "Зайдите на сайт Trip With Bonus и в форме вверху страницы, заполните данные для поиска перевозчика." %}</span>
                        {% endif %}

                        {% if page.url == 'for_movers' %}
                            <span>{% translate "Укажите откуда, куда хотите перевезти посылку, а также Вашу дату отправки и прибытия. При желании Вы можете указать дополнительные параметры: тип, вес, вид перевозки и т.д" %}</span>
                        {% endif %}
                </div>

                <img src="/static/img/svg/Arrow_direction.svg" alt="">

                <div class="benefit_img_item">
                    <img src="/static/img/svg/Contact_carrier.svg" alt="">

                    <h3>{% translate "Свяжитесь с перевозчиком" %}</h3>

                    {% if page.url == 'for_customers' %}
                        <span>{% translate "Откройте контакты на сайте и договоритесь о месте встречи и условиях перевозки" %}</span>
                    {% endif %}

                    {% if page.url == 'for_movers' %}
                        <span>{% translate "В отобразившемся списке выберите подходящего отправителя и посылку, откройте контакты и свяжитесь удобным способом.  Если не нашли подходящего отправителя с посылкой, разместите объявление о возможности перевезти посылку и отправители Вас сами найдут" %}</span>
                    {% endif %}

                </div>

                <img src="/static/img/svg/Arrow_direction.svg" alt="">

                <div class="benefit_img_item">
                    <img src="/static/img/svg/Pass_package.svg" alt="">
                     <h3>{% translate "Передайте посылку" %}</h3>
                    {% if page.url == 'for_customers' %}
                        <span>{% translate "Встречайтесь, знакомьтесь и передавайте посылку" %}</span>
                    {% endif %}

                    {% if page.url == 'for_movers' %}
                        <span>{% translate "Обсудите с отправителем все условия: время, место и прочие детали. Готово! Доставьте посылку из пункта А в пункт Б и получите благодарность отправителя!" %}</span>
                    {% endif %}
                </div>
            </div>
    </div>



    <div class="button_container">
        {% if page.url == 'for_customers' %}
             <button
                     onclick="document.location='{% url 'profile_page' 'create_route_for_customer' %}'"
                     id="more_button">{% translate "Отправить посылку" %}</button>
        {% endif %}
        {% if page.url == 'for_movers' %}
             <button
                     onclick="document.location='{% url 'profile_page' 'create_route_for_mover' %}'"
                     id="more_button">{% translate "Перевезти посылку" %}</button>
        {% endif %}
    </div>
    <div class="subscribes_container">
        <div id=title_static>{% translate "Тарифы" %}</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 }}">
                        Опции:
                    </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">{% translate "Оформить подписку" %}</button>
                </div>
            </div>
        {% endfor %}
    </div>

    </div>

    <div class="bottom_block_static">
        <div id=title_static_customer>{% blocktrans %}Оформи <span class="color_title">подписку</span> сейчас и получи{% endblocktrans %}</div>
        <div id=title_static_customer2>{% blocktrans %}<span class="color_title">1 день </span>пользования сервисом <span class="color_title">в подарок!</span>{% endblocktrans %}</div>
        <div class="button_container"
        onclick="document.location='{% url 'profile_page' 'my_subscribe' %}'"
        >

                <button id="more_button">{% translate "Получить" %}</button>
        </div>

        <img src="/static/img/png/Box5.png" alt="">
        <img src="/static/img/png/Box4.png" alt="">
        <img src="/static/img/png/Box4.png" alt="">
        <img src="/static/img/png/Box6.png" alt="">
    </div>