{% load static %}

    <link rel="stylesheet" href="{% static 'css/ion.rangeSlider.min.css' %}">


<form class = "new_route" name="new_route" method="post">
        {% csrf_token %}
  <div>
    <label for="id_type_transport">{{ form.fields.type_transport.label }}</label>
  </div>
 <div>

    <select
            onchange="OnSelectionChange(this)"
            name="type_transport"
            id="id_type_transport">
            {% for item in form.fields.type_transport.choices  %}
         <option
                 value="{{ item.0 }}"
                 {% if form.initial.type_transport == item.0 %}
                         selected="selected"
                 {% endif %}>
             {{ item.1 }}
         </option>
            {% endfor %}
    </select>
    {% if not errors_off and form.errors and form.errors.type_transport %}
        <span>{{ form.errors.type_transport }}</span>
    {% endif %}
  </div>

{% if form.initial and form.initial.type_transport and form.initial.type_transport != '' %}
    <hr>
    <div class="departure_arrival">
      <div>
          <label for="id_departure_DT">{{ form.fields.departure_DT.label }}</label>

      <input
               type="datetime-local"
               name="departure_DT"
               {% if form.fields.departure_DT.required %} required{% endif %}
               id="id_departure_DT"
               {% if form.initial.departure_DT %}value="{{ form.initial.departure_DT.date|date:"Y-m-d" }}T{{ form.initial.departure_DT.time|date:"H:i" }}"{% endif %}
       />

      {% if not errors_off and form.errors and form.errors.departure_DT %}
          <span>{{ form.errors.departure_DT }}</span>
      {% endif %}
 </div>
    <div>
      <label for="id_arrival_DT">{{ form.fields.arrival_DT.label }}</label>
      <input
              type="datetime-local"
              name="arrival_DT"
              {% if form.fields.arrival_DT.required %} required{% endif %}
              id="id_arrival_DT"
              {% if form.initial.arrival_DT %}value="{{ form.initial.arrival_DT.date|date:"Y-m-d" }}T{{ form.initial.arrival_DT.time|date:"H:i" }}"{% endif %}
      />
    {% if not errors_off and form.errors and form.errors.arrival_DT %}
        <span>{{ form.errors.arrival_DT }}</span>
    {% endif %}
    </div>
</div>
<hr>
  <div class="from_to_country">
    <div class="from_country_container">
        <label for="id_from_address_point">{{ form.fields.from_address_point.label }}</label>
        <input
                type="number"
                name="from_address_point"
                id="id_from_address_point"
                hidden
                {% if form.initial.from_address_point %}value="{{ form.initial.from_address_point }}"{% endif %}
        />
        <input
                oninput="searchTown(this)"
                onclick="showSearchList(this)"
                onblur="setTimeout(()=>onblurInputField(event, this), 100)"
                onFocus="this.select()"
                autocomplete="off"
                type="text"
                name="from_address_point_txt"
                class="from_address_point_txt"
                {% if form.fields.from_address_point.required %} required{% endif %}
                id="id_from_address_point_txt"
                {% if form.initial.from_address_point_txt %}value="{{ form.initial.from_address_point_txt }}"{% endif %}
        />
        <datalist id="from_address_point">

        </datalist>

        <div class="input_list" name="from_address_point_txt_list">
        </div>
        {% if not errors_off and form.errors and form.errors.from_address_point %}
            <span>{{ form.errors.from_address_point}}</span>
        {% endif %}
    </div>
  <div>
    <label for="id_to_address_point">{{ form.fields.to_address_point.label }}</label>
    <input
            type="number"
            name="to_address_point"
            id="id_to_address_point"
            hidden
            {% if form.initial.to_address_point %}value="{{ form.initial.to_address_point}}"{% endif %}
    />
    <input
            oninput="searchTown(this)"
            onclick="showSearchList(this)"
            onblur="setTimeout(()=>onblurInputField(event, this), 100)"
            onFocus="this.select()"
            autocomplete="off"
            type="text"
            name="to_address_point_txt"
            {% if form.fields.to_address_point.required %} required{% endif %}
            id="id_to_address_point_txt"
            class="to_address_point_txt"
            {% if form.initial.to_address_point_txt %}value="{{ form.initial.to_address_point_txt}}"{% endif %}

    />
    <div class="input_list" name="to_address_point_txt_list">

    </div>
    {% if not errors_off and form.errors and form.errors.to_address_point %}
        <span>{{ form.errors.to_address_point }}</span>
    {% endif %}
  </div>
  </div>
{#  <div>#}
{#    <label for="id_from_city">{{ form.fields.from_city.label }}</label>#}
{#    <input type="text" name="from_city"{% if form.fields.from_city.required %} required{% endif %} id="id_from_city">#}
{#  </div>#}
{#  <div>#}
{#    <label for="id_to_city">{{ form.fields.to_city.label }}</label>#}
{#    <input type="text" name="to_city"{% if form.fields.to_city.required %} required{% endif %} id="id_to_city">#}
{#  </div>#}
  <div class="from_to_place">
    <div>
    <label for="id_from_place">{{ form.fields.from_place.label }}</label>
    <select
            name="from_place"
{#            onchange="hideErrorMsg(this)"#}
            id="id_from_place"
            {% if form.fields.from_place.required %} required{% endif %}>
            {% for item in form.fields.from_place.choices  %}
                <option
                        value="{{ item.0 }}"{% if form.initial.from_place == item.0 %}
                        selected="selected"{% endif %}>{{ item.1 }}
                </option>
            {% endfor %}
    </select>
    {% if not errors_off and form.errors and form.errors.from_place %}
                 <span>{{ form.errors.from_place }}</span>
             {% endif %}
    </div>
    <div>
    <label for="id_to_place">{{ form.fields.to_place.label }}</label>
    <select
            name="to_place"
            id="id_to_place"
            {% if form.fields.to_place.required %} required{% endif %}>
            {% for item in form.fields.to_place.choices  %}
                <option
                        value="{{ item.0 }}"{% if form.initial.to_place == item.0 %}
                        selected="selected"{% endif %}>{{ item.1 }}
                </option>
            {% endfor %}
    </select>
    {% if not errors_off and form.errors and form.errors.to_place %}
                 <span>{{ form.errors.to_place }}</span>
             {% endif %}
    </div>
  </div>

<hr>

  <div>
    <label for="id_cargo_type">{{ form.fields.cargo_type.label }}</label>
  </div>
{#<div>#}
{#    <select#}
{#            multiple#}
{#            size="5"#}
{#            name="cargo_type"#}
{#            id="id_cargo_type"#}
{#            {% if form.fields.cargo_type.required %} required{% endif %}>#}
{#            {% for item in form.fields.cargo_type.choices  %}#}
{#                <option#}
{#                        value="{{ item.0 }}"{% if form.fields.cargo_type == item.0 %}#}
{#                        selected="selected"{% endif %}>{{ item.1 }}#}
{#                </option>#}
{#            {% endfor %}#}
{##}
{#    </select>#}

{#  </div>#}

<div class="checkbox_cargo_type">
            {% for item in form.fields.cargo_type.choices  %}
                <input
                        type="checkbox"
                        name="cargo_type"
                        id="id_cargo_type"
                      {% if form.fields.cargo_type.required %} required{% endif %}
                        value="{{ item.0 }}"
                        {% if form.fields.cargo_type == item.0 %}
                        {% endif %}/>{{ item.1 }}
            {% endfor %}

{#            <lable for="">#}
{##}
{#            </lable>#}
     {% if not errors_off and form.errors and form.errors.cargo_type %}
                     <span>{{ form.errors.cargo_type }}</span>
                 {% endif %}
</div>


<hr>

  <div class="range-slider">
    <label for="id_weight">{{ form.fields.weight.label }}</label>
      <input
              type="text"
              id="id_weight"
              {% if form.fields.weight.required %} required{% endif %}
              name="weight"
              value=""
              {% if form.initial.weight %}value="{{ form.initial.weight}}"{% endif %}
      />
  {% if not errors_off and form.errors and form.errors.weight %}
      <span>{{ form.errors.weight }}</span>
  {% endif %}
  </div>


{#    <div class="prise-slider-div">#}
{#        <span class="filter-span">Цена</span>#}
{#        <div id="slider-range"></div>#}
{#        <div class="input-control-price">#}
{#            <div class="slider-range-div-input">#}
{#                <span class="span-price-placeholder">от</span>#}
{#                <input min="0" max="1000" type="number" onchange="set_range(this)" class="form-control" name="price" id="control-price-1">#}
{#            </div>#}
{##}
{#            <div class="slider-range-div-input">#}
{#                <span class="span-price-placeholder">до</span>#}
{#                <input min="0" max="1000" type="number" onchange="set_range(this)" class="form-control" name="price" id="control-price-2">#}
{#            </div>#}
{#        </div>#}
{#    </div>#}

<hr>

<div class="phone">
  <div>
    <label for="id_phone">{{ form.fields.phone.label }}</label>
    <input
            type="phone"
            name="phone"
            placeholder="{{ form.fields.phone.label }}"
            {% if form.fields.phone.required %} required{% endif %}
            id="id_phone"
            {% if form.initial.phone %}value="{{ form.initial.phone}}"{% endif %}

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

  <div>

    <label for="id_extra_phone">{{ form.fields.extra_phone.label }}</label>
    <input
            type="phone"
            name="extra_phone"
            id="id_extra_phone"
            placeholder="{{ form.fields.extra_phone.label }}"
            {% if form.initial.extra_phone %}value="{{ form.initial.extra_phone}}"{% endif %}
    />
  {% if not errors_off and form.errors and form.errors.extra_phone %}
      <span>{{ form.errors.extra_phone }}</span>
  {% endif %}
  </div>
</div>

<hr>

  <div>
    <label for="id_receive_msg_by_email">{{ form.fields.receive_msg_by_email.label }}</label>
    <input type="checkbox" name="receive_msg_by_email" id="id_receive_msg_by_email">
       {% if not errors_off and form.errors and form.errors.receive_msg_by_email %}
                     <span>{{ form.errors.receive_msg_by_email }}</span>
                 {% endif %}
  </div>
  <div class="button_register">
     <button id="registration" onclick="sendRoute(this, {% if route.id%}{{ route.id }}{% endif %})"> Разместить объявления  </button>
  </div>


{% endif %}

</form>