{% extends 'tb_base.html' %}
{% load static %}
{% load i18n %}

{% block meta %}
    <script src='{% static "js/find_route.js" %}'></script>
    <script src="{% static "js/filters_functions_find_route.js" %}"></script>
    <script src="{% static "js/dynamic_loading_routes.js" %}"></script>
{% endblock %}

{% block content %}
    <div class="top_block_static_wrapper_main">
        <div class="top_block_static">

        <div class="title_static_wrapper">
                <div id=title_static>{% blocktrans %}Отправляй <span class="color_title">посылку</span> в любую точку мира!{% endblocktrans %}</div>
        </div>
        <span id="sub_title_static">
            <p>
                {% translate "Сервис, который позволяет передавать посылки с путешественниками" %}
                {% translate "без посредников. Знакомьтесь, встречайтесь и передавайте посылки." %}
            </p>
        </span>

        </div>
    </div>

    <div class="search_form_main">
        <div class="cut-width">
            {% include "blocks/b_find_route_form.html" %}
        </div>
    </div>

    <div class="mid_block_static">

        <h2 id="title_static">{% translate "О сервисе Trip With Bonus" %}</h2>
            <span id="sub_title_static">
                <p>
                    {% translate "TWB  - это сервис, созданный для того, чтобы отправитель и перевозчик нашли друг-друга!" %}
                    {% translate "Наш сервис предлагает вам прямые контакты, а не является посредником !" %}
                </p>
            </span>


        <div class="tabs">

            <div class="wrapper_tab_button">
                <div
                        class="tab-btn-1 tab-btn-active"
                        onclick="showTabBtn(this)"
                >
                    {% translate "Как отправить?" %}
                </div>

                <div
                        class="tab-btn-2"
                        onclick="showTabBtn(this)"
                >
                    {% translate "Как перевезти?" %}
                </div>

            </div>

            <div id="content-1" class="show ">
                   <h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2>
                   <div class="benefit_img">

                        <div class="benefit_img_item">
                             <img src="/static/img/svg/Find_carrier.svg" alt="">
                             <h3>{% translate "Найдите перевозчика" %}</h3>
                             <span>{% translate "Зайдите на сайт Trip With Bonus и в форме вверху страницы, заполните данные для поиска перевозчика." %}</span>
                        </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>
                            <span>{% translate "Откройте контакты на сайте и договоритесь о месте встречи и условиях перевозки" %}</span>
                        </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>
                            <span>{% translate "Встречайтесь, знакомьтесь и передавайте посылку" %}</span>
                        </div>

                   </div>

                <div class="button_container">
                        <a class="a_btn_standart" href="{% url 'profile_page' 'create_route_for_customer' %}" id="more_button">{% translate "Отправить посылку" %}</a>
                </div>
            </div>
            <div id="content-2">
                <h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2>
                <div class="benefit_img">

                    <div class="benefit_img_item">
                        <img src="/static/img/svg/Find_carrier.svg" alt="">
                        <h3>{% translate "Разместите объявление" %}</h3>
                        <span>{% translate "Укажите откуда, куда хотите перевезти посылку, а также Вашу дату отправки и прибытия. При желании Вы можете указать дополнительные параметры: тип, вес, вид перевозки и т.д" %}</span>

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

                    </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>
                        <span>{% translate "Обсудите с отправителем все условия: время, место и прочие детали. Готово! Доставьте посылку из пункта А в пункт Б и получите благодарность отправителя!" %}</span>

                    </div>

                </div>


                <div class="button_container">
                        <button id="more_button">{% translate "Перевезти посылку" %}</button>
                </div>
            </div>

        </div>







    </div>

    <div class="pre_bottom_block_static">
        <h2 id=title_static>{% translate "Trip With Bonus это комфорт и эффективность!" %}</h2>

        <div class="cards_wrapper">
            <div class="cards_item_1">
                    <div class="card_title_1">{% translate "+5%" %}</div>
                    <div class="card_title_2">{% translate "рост путешествий ежегодно" %}</div>
                    <div class="card_title_3">{% translate "В среднем на 5% растёт количество путешествий ежегодно. Просто путешествуй и получай бонусы." %}</div>

{#                <div class="cards_item_1_right">#}
{#                    <div class="card_gradient_black"></div>#}
{#                </div>#}
            </div>
            <div class="cards_item_2">

                    <div class="card_title_1">{% translate "в 3 раза" %}</div>
                    <div class="card_title_2">{% translate "быстрее других сервисов" %}</div>
                    <div class="card_title_3">{% translate "Почтовые сервисы доставляет посылки в среднем за 10 дней. С нами - быстрее!" %}</div>



{#                <div class="cards_item_2_right">#}
{#                    <div class="card_gradient"></div>#}
{#                </div>#}
            </div>
            <div class="cards_item_3">

                    <div class="card_title_1">{% translate "+142" %}</div>
                    <div class="card_title_2">{% translate "заявки ежедневно" %}</div>
                    <div class="card_title_3">{% translate "На перевозку или отправку посылок в разные уголки мира" %}</div>

{#                <div class="cards_item_3_right">#}
{#                     <div class="card_gradient"></div>#}
{#                </div>#}
            </div>
            <div class="cards_item_4">

                    <div class="card_title_1">{% translate "30+" %}</div>
                    <div class="card_title_2">{% translate "стран" %}</div>
                    <div class="card_title_3">{% translate "С TWB отправляй посылки по всему миру! С нами нет границ!" %}</div>

{#                <div class="cards_item_4_right">#}
{#                   <div class="card_gradient_black"></div>#}
{#                </div>#}
            </div>
        </div>

    </div>

    <div class="faq_main_page">
            <h2 id=title_static>{% translate "Частые вопросы" %}</h2>


        <details>
            <summary>{% translate "Как пользоваться сервисом?" %}</summary>
            <p>Скандинавская мифология — мифология древних скандинавов, часть древнегерманской мифологии.</p>
        </details>
        <details>
            <summary>{% translate "Как разместить объявление о посылке/перевозке?" %}</summary>
            <p><b>Скандинавская мифология</b> — мифология древних скандинавов, часть древнегерманской мифологии.<br>
                Основным источником сведений о ней являются тексты поэтической <b>«Старшей Эдды»</b> и прозаической <b>«Младшей Эдды» С. Стурлусона XII века н. э.</b><br>
                Примерно в то же время датский хронист Саксон Грамматик в <b>«Деяниях датчан»</b> передаёт многие мифологические сюжеты. Ценные сведения о <br>древнегерманской мифологии имеются в <b>«Германии» Тацита</b>.</p>
        </details>
        <details>
            <summary>{% translate "Как оплатить лицензию?" %}</summary>
            <p>{% translate "Однозначно, явные признаки победы институционализации ограничены исключительно образом мышления. Следует отметить, что новая модель организационной деятельности обеспечивает широкому кругу (специалистов) участие в формировании как самодостаточных, так и внешне зависимых концептуальных решений. " %}</p>
        </details>
                <h2 id=title_static>{% translate "Последние новости" %}</h2>

    </div>




    <div class="news_block_main">
{#        {% for art in articles %}#}
{##}
{#                <div class="news_item">#}
{#                    <div class="news_img"><img src="{{ MEDIA_URL }}{{ art.picture }}" /></div>#}
{#                    <div class="news_header">{{ art.name }}</div>#}
{#                    <div class="news_description">#}
{#                        {{ art.description|truncatechars:100 }}#}
{#                        <div class="news_gradient"></div>#}
{#                    </div>#}
{#                </div>#}
{##}
{#        {% endfor %}#}
{#        <div class="three_pinned_news">#}
        <div class="news_block">
            {% for art in articles %}
                <a class="cont_one_news" href="{% url "article_one" art.url %}">
                    <div class="cont_img_one_news">
                        <img class="img_one_news" src="{{ MEDIA_URL }}{{ art.picture }}">
                    </div>
                    <div class="cont_content_one_news">
                        <div class="container_name_one_news">
                            {{ art.name|truncatechars:100 }}
                        </div>
                        <div class="container_descript_one_news">
                            {{ art.description|truncatechars:100 }}
                        </div>
                    </div>
                </a>
            {% endfor %}
        </div>


{#            {% url "article_one" art.url %}#}
{#            {{ MEDIA_URL }}{{ art.picture }}#}
{#            {{ art.description|truncatechars:100 }}#}



{#        </div>#}
    </div>


{% endblock %}