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



    <div class="top_block_static">

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

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

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

            <button id="how_it_work_b">{% translate "Как это работает?" %}</button>
        </div>


        <img src="/static/img/png/Box1.png" alt="">
        <img src="/static/img/png/Box2.png" alt="">
        <img src="/static/img/png/Box3.png" alt="">
        <img src="/static/img/png/Box4.png" alt="">
    </div>

    <div class="mid_block_static">

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

        <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>

        <div class="benefit_img">
            <figure>
                <img src="/static/img/svg/personal_call.svg" alt="">
                <figcaption>{% translate "Прямой контакт с перевозчиком/ отправителем" %}</figcaption>
            </figure>
            <figure>
                <img src="/static/img/svg/cooperation_img.svg" alt="">
                <figcaption>{% translate "Взаимовыгодное сотрудничество" %}</figcaption>
            </figure>
            <figure>
                <img src="/static/img/svg/tariff_plans_img.svg" alt="">
                <figcaption>{% translate "Тарифные планы на любой вкус и кошелёк." %}</figcaption>
            </figure>
            <figure>
                <img src="/static/img/svg/build_logistics.svg" alt="">
                <figcaption>{% translate "Возможность выстраивать логистику самостоятельно" %}</figcaption>
            </figure>
            <figure>
                <img src="/static/img/svg/using_service_img.svg" alt="">
                <figcaption>{% translate "Простота и доступность пользования сервисом" %}</figcaption>
            </figure>
            <figure>
                <img src="/static/img/svg/communication_img.svg" alt="">
                <figcaption>{% translate "Общение и новые знакомства" %}</figcaption>
            </figure>
        </div>

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

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

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

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

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

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

            </div>

            <div class="benefit_title">
                <div class="benefit_title_item">
                    {% 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>

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

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

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

                </div>

                <div class="benefit_title_item">
                    <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 id="more_button">{% translate "Отправить посылку" %}</button>
        {% endif %}
        {% if page.url == 'for_movers' %}
             <button id="more_button">{% translate "Перевезти посылку" %}</button>
        {% endif %}
    </div>
    <div class="subscribes_container">
        <h2 id=title_static>{% translate "Тарифы" %}</h2>

        <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>

    <div class="bottom_block_static">
        <div class="title_static_wrapper">
            <h2 id=title_static>{% translate "Оформи" %}</h2>
            <span class="color_title">{% translate "подписку" %}</span>
            <h2 id=title_static>{% translate "сейчас и получи" %}</h2>
        </div>


        <div class="title_static_wrapper">
                    <span class="color_title">{% translate "1 день" %}</span>
                    <h2 id=title_static>{% translate "пользования сервисом" %}</h2>
                    <span class="color_title">{% translate "в подарок" %}</span>
                    <h2 id=title_static>!</h2>
        </div>




        <div class="button_container">
                <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>