{% load static %}
{% with APP_INVITATION_STRING_IN_FORM="Город, улица, дом" %}
  <script type="text/javascript">
    function set_filter(s) {
      // переинициализируем autocomplete
      $('#addr').autocomplete("option", "source", "/autocomplete_addr?csrfmiddlewaretoken={{ csrf_token }}&use_filter=" + s);
    }

    $(document).ready(function () {
      $('#input_address').submit(function () {
        try {
          yaCounter32997984.reachGoal('FIND');
          ga('send', 'event', 'CLICK', 'ClickSearch', 'SearchAddress');
          _tmr.push({id: '2018432', type: 'reachGoal', goal: 'ClcSrh'});
        }
        catch (e) {
        }
        if ($("#addr").val() != "{{ APP_INVITATION_STRING_IN_FORM }}") {
          $.ajax({
            url: "/get_address", //Адрес подгружаемой страницы
            type: "POST",        //Тип запроса
            dataType: "html",    //Тип данных
            data: $("#input_address").serialize(),
            success: function (html) {
              $("#box").html(html)
            }
          });
          return false;
        }
      });
      $('#addr').autocomplete({ // автозаполнение
        source: "/autocomplete_addr?csrfmiddlewaretoken={{ csrf_token }}&use_filter=only_known", // Страница для обработки запросов автозаполнения
        minLength: 4, // Минимальная длина запроса для срабатывания автозаполнения
        delay: 160    // Задержка срабатывания автозаполнения
      });
      $.fn.fade_obj = function (ops) {
        var $elem = this;
        var res = $.extend({delay: 670, speed: 890}, ops);
        for (var i = 0, pause = 0, l = $elem.length; i < l; i++, pause += res.delay) {
          $elem.eq(i).delay(pause).fadeIn(res.speed);
        }
        return $elem;
      };
      $('.show_delayed').fade_obj();
    });
  </script>
  <h1>Выбирайте окна в квартиру<!-- ({{ NV }})-->:</h1>
  {% if NV <= 1 %}
  <ol>
    <li class="show_delayed">Вводите адрес дома или выберите его из подсказки,</li>
    <li class="show_delayed">укажите тип квартиры,</li>
    <li class="show_delayed">получите актуальные цены и сравнивайте характеристики предложений.</li>
  </ol>
  {% endif %}
  <form class="show_delayed" method="post" id="input_address">
    {% csrf_token %}
    <div class="btn-group" data-toggle="buttons" style="margin:-1em 0 1ex 0;width: 100%;">
      <label class="btn btn-default btn-xs active" onclick="set_filter('only_known');" style="float:right;">
        <input type="radio" name="sw-in1" value="notall" checked> с ценами
      </label>
      <label class="btn btn-default btn-xs" onclick="set_filter('all');" style="float:right;">
        <input type="radio" name="sw-in" value="all"> все
      </label>
      <span style="padding:2px 5px;font-size:12px;line-height:1.5;float:right;">Подсказывать адреса:</span>
    </div>
    <div class="input-group stylish-input-group">
      <input type="text" class="form-control" value="{{ APP_INVITATION_STRING_IN_FORM }}"
          id="addr" autocomplete="on" name="address"  data-provide="typeahead"
          onfocus="if(this.value=='{{ APP_INVITATION_STRING_IN_FORM }}'){this.value='';this.style.color='#000';}"
          onblur= "if(this.value==''){this.value='{{ APP_INVITATION_STRING_IN_FORM }}';this.style.color='#777';}" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-search"></span>
      </span>
      <span class="input-group-btn">
        <button type="submit" class="btn btn-primary btn-add">Найти</button>
      </span>
    </div>
    {% if LAST_VISIT %}<div><h5>Ваши последние просмотры:</h5>
    <ul style="font-size:small">{% for ITEM in LAST_VISIT %}
      <li><a href="{{ ITEM.LastURL }}">{{ ITEM.LastApart }} <small>({{ ITEM.LastAddress }})</small></a> <small style="font-size: xx-small;">{{ ITEM.Time }}</small></li>{% endfor %}
    </ul>
    </div>{% endif %}

  </form>
  <p></p>{% endwith %}