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

                <a class="btn_a_anchor" href="#anchor_how_it_work" id="how_it_work_b">
                    <div class="text_in_btn_a_anchor">{% translate "Как это работает?" %}</div>
                </a>
            </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" class="anchor"></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 "Зайдите на сайт Trip With Bonus и в форме вверху страницы, заполните данные для поиска отправителя посылки." %}</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="">

                    {% 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 "Откройте контакты на сайте и договоритесь о месте встречи и условиях перевозки. В случае, если Вы не нашли объявления о перевозчиках по Вашему запросу, Вы можете разместить свое объявление воспользовавшись формой в личном кабинете." %}</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="">

                    {% 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 "Встречайтесь, знакомьтесь и передавайте посылку" %}</span>
                    {% endif %}

                    {% if page.url == 'for_movers' %}
                        <span>{% translate "Встречайтесь, знакомьтесь и принимайте посылку" %}</span>
                    {% endif %}
                </div>
            </div>
    </div>



    <div class="button_container">
        {% if page.url == 'for_customers' %}

                 <div class="button_container">
                        <a class="a_btn_standart"
                           href="{% url 'profile_page' 'create_route_for_customer' %}"
                           id="more_button">{% translate "Отправить посылку" %}
                        </a>
                 </div>
        {% endif %}
        {% if page.url == 'for_movers' %}
                 <div class="button_container">
                        <a class="a_btn_standart"
                           href="{% url 'profile_page' 'create_route_for_mover' %}"
                           id="more_button">{% translate "Перевезти посылку" %}
                        </a>
                 </div>
        {% 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 }}">
                        {% trans "Опции" %}:
                    </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=send_parcel_button>{% translate "Получить" %}</button>
        </div>

        <img id="box1" src="/static/img/png/Box5.png" alt="">
        <img id="box2" src="/static/img/png/Box4.png" alt="">
        <img id="box3" src="/static/img/png/Box4.png" alt="">
        <img id="box4" src="/static/img/png/Box6.png" alt="">
    </div>