{% load static %}
{% load i18n %}
{% trans "300" as maxLetterLength %}

{% if owner_type == 'customer' %}
  {% trans "Заполните форму, чтобы отправить посылку" as p_title %}
{% elif owner_type == 'mover' %}
  {% trans "Заполните форму, чтобы перевезти посылку" as p_title %}
{% endif %}
<link rel="stylesheet" href="{% static 'css/ion.rangeSlider.min.css' %}">
<link rel="stylesheet" href="{% static 'css/create_poster.css' %}">
<div hidden>
  csrfmiddlewaretoken: eoN2nLYYo46PpDIhi82dmTFASHH4ONiBdEQOz1jQNyUpsHJ4RrvcmFwfnM45TNtl
  type_transport: road
  from_address_point: 59613
  from_address_point_txt: Москаленки / Россия
  to_address_point: 2824
  to_address_point_txt: Берлар / Бельгия
  departure_DT: 17.12.2024 23:04
  arrival_DT: 29.12.2024 20:04
  from_place: other
  to_place: other
  cargo_type: parcel
  weight: 500
  phone: 2604195
  extra_phone: test
  receive_msg_by_email: on
  owner_type: customer
  hiddenTime: 16 декабря 2024 г. 23:04
</div>

<div class="poster">
  <h1 class="poster__title">{{ p_title }}</h1>


  <form class="poster__form"
        name="new_route"
        method="post"
        id="new_route"
  >
    {% csrf_token %}
    {#from-to#}
    <div class="poster__row poster__row--from-to">
      <div class="poster__col">
        <label for="from" class="poster__label " required>
          {% translate "Откуда забрать посылку" %}
        </label>
        <input type="text" name="from" id="from" class="locate" placeholder="{% translate "Укажите город" %}">
      </div>
      <div class="poster__col">
        <label for="to" class="poster__label " required>
          {% translate "Куда доставить посылку" %}
        </label>
        <input type="text" name="to" id="to" class="locate" placeholder="{% translate "Укажите город" %}">
      </div>
    </div>
    {#cargo-type#}
    <div class="poster__row poster__row--cargo">
      <div class="poster__col col-12">
        <label class="poster__label col-12" required>
          {% translate "Выберите кого (что) вы можете перевезти:" %}
        </label>
        <div class="poster__grid">

          {% for item in form.fields.cargo_type.choices %}
            <div class="cargo">
              <input
                  class="cargo__inp"
                  type="radio"
                  name="cargo_type"

                  id="cargo_type_{{ forloop.counter }}"
                  required
                  value="{{ item.0 }}"
                  {% if item.checked %}
                  checked="checked"
                  {% endif %}
              />

              <label class="cargo__label"
                     for="cargo_type_{{ forloop.counter }}">
                <span>{{ item.1 }}</span>
              </label>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
    {#date-poster#}
    <div class="poster__row poster__row--date">
      <div class="poster__col">

        <label from="date-to" required class="poster__label col-12 ">
          {% translate "Дата доставки посылки" %}
        </label>
        <input type="text" name="date-to" class="poster__date date">
      </div>
      <div class="poster__col"></div>
    </div>
    {#type-transport#}
    <div class="poster__row poster__row--transport">
      <div class="poster__col col-12">

        <label for="type_transport" class="poster__label col-12" required>
          {% translate "Каким способом Вы хотите отправить?" %}
        </label>
        {% for item in form.fields.type_transport.choices %}
          <div class="cargo cargo--inline">
            <input
                class="cargo__inp"
                type="radio"
                name="type_transport"
                id="type_transport_{{ forloop.counter }}"
                value="{{ item.0 }}"
                {% if form.initial.type_transport == item.0 %}
                checked="checked"
                {% endif %}
            >
            <label class="cargo__label"
                   for="type_transport_{{ forloop.counter }}">
              <span>{{ item.1 }}</span>
            </label>
          </div>
        {% endfor %}
        <div class="poster__errors">

        </div>
        <div class="poster__info">
          {% translate "Обязательно учитывайте Правила и особенности перевозки выбранным Вами видом транспорта" %}
        </div>
      </div>
    </div>
    {#phone#}
    <div class="poster__row poster__row--phone">
      <div class="poster__col col-12">

        <label for="phone" class="col-12">
          {% translate "Контактный номер телефона, по которому с Вами могут связаться перевозчики" %}
        </label>
        <input class="col-12 col-xl-6" type="tel" placeholder="{% translate "Укажите телефон" %}">
        <div class="poster__info">
          {% translate "Если вы оставите это поле пустым - перевозчики смогут только написать вам в личные сообщения на нашем сайте TripWB.com" %}
        </div>
      </div>
    </div>
    {#description#}
    <div class="poster__row poster__row--description">
      <div class="poster__col col-12">

        <label for="description" class="col-12">
          {% translate "Примечание (необязательно)" %}
        </label>
        <textarea
            name="description"
            id="description"
            maxlength="{{ maxLetterLength }}"
            placeholder="{% translate "Если желаете, то здесь можно указать важную информацию, например: вес, габариты посылки, количество попутчиков и т.д.)" %}"
        ></textarea>
        <div class="poster__area-descr">
          <span class="js-letter-count">0</span>
          {% translate "из" %}
          {{ maxLetterLength }}
          {% translate "символов" %}
        </div>
      </div>
    </div>
    {#distribution#}
    <div class="poster__row poster__row--distribution">
      <div class="cargo cargo--info">

        <input type="checkbox"
               name="receive_msg_by_email"
               class="cargo__inp"
            {% if form.initial.receive_msg_by_email == True %}
               checked="checked"
            {% endif %}
               id="id_receive_msg_by_email">

        <label class="cargo__label" for="id_receive_msg_by_email">
          {% translate "Хочу получать уведомления на E-mail о появлении перевозчика по моим критериям" %}
        </label>
      </div>



      {% if not errors_off and form.errors and form.errors.receive_msg_by_email %}
        {{ form.errors.receive_msg_by_email }}
      {% endif %}
    </div>

    <button type="submit"
            class="btn btn--primary col-12"
            onclick="sendRoute(this,
                {% if route.id %}{{ route.id }}{% endif %})"
    >
      {% translate "Разместить объявление" %}
    </button>

  </form>
</div>