{% load i18n %}
    <div class="top_block_static_wrapper">
        <div class="top_block_static">
        <div id=title_static>{% blocktrans %}Отправляй <span class="color_title">посылку</span> в любую точку мира!{% endblocktrans %}</div>
        <span id="sub_title_static">{{ page.description }}</span>
        <div class="button_container">
             <button id="more_button">{% translate "Узнать подробнее" %}</button>
            <button 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>

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

    <div class="bottom_block_static">
        <div id=title_static>{% blocktrans %}Станьте нашим <span class="color_title">партнером</span>{% endblocktrans %}</div>

        <span
                id="sub_title_static">
            <p>
                {% translate "Приглашаем к сотрудничесту и развитию, вместе с большой и сильной командой. Мы предлагаем Вам" %}
                {% translate "вместе с нами развивать сервис и стать партнером" %}
            </p>
        </span>


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


    <div class="feedback_form">

        <div id=title_static>{% blocktrans %}Мы всегда на <span class="color_title">связи</span>!{% endblocktrans %}</div>


        <span id="sub_title_static">{% translate "У вас есть вопрос? Отправьте нам сообщение" %}</span>
        <form>
            <div class="left_inputs_form">
                <div class="inputs_l">
            <input name="username" type="text" placeholder="Имя" {% if form.data.username %} value="{{ form.data.username }}"{% endif %}>
            {% if form.username and form.errors.username %}
            <span>{{ form.errors.username }}</span>
                 {% endif %}
            </div>

              <div class="inputs_l">
                <input name="email" type="email" placeholder="Е-mail"{% if form.data.email %} value="{{ form.data.email }}"{% endif %}>
                {% if form.email and form.errors.email %}
                <span>{{ form.errors.email }}</span>
                     {% endif %}
              </div>

              <div class="inputs_l">
                <input name="tel" type="number" placeholder="Телефон"{% if form.data.tel %} value="{{ form.data.tel }}"{% endif %}>
                {% if form.tel and form.errors.tel %}
                <span>{{ form.errors.tel }}</span>
                     {% endif %}
              </div>
            </div>
            <div class="right_inputs_form">
                <div class="counter-box">
                    <label for="id_text"></label>
                    <textarea
                            name="text"
                            onFocus="this.select()"
                            oninput="counterText(this)"
                            id="id_text" class="feedback_form_message"
                                    placeholder= {% translate "Сообщение" %}
                            value="{% if form.adding_machine.text %}{{ form.initial.text }}{% endif %}"
                            maxlength="100"
                    ></textarea>
                    <span class="counter-text">
                          <span class="counter-text__current">0</span>
                          /
                          <span class="counter-text__total">100</span>
                    </span>

                </div>
                <div class="button_feedback_form">
                    <button id="send_feedback_form">{% translate 'Отправить сообщение' %}</button>

                </div>


            </div>

        </form>
        <div class="clear_both"></div>

    </div>