{% load static %}

<div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

  <script>
    function callAlert(name) {
      alert("hello, " + name);
    }

    var HelloJs = (function () {
      var self = {};

      self.hello = function (name) {
        alert("Hello " + name)
      }

      return self;
    }());
  </script>

  <h3>Visibility</h3>
  <div unicorn:key="visibility">
    <span unicorn:visible.threshold-25.debounce-1000="increase_counter" unicorn:partial="visibility">
      Number of times this span was scrolled into view: {{ scroll_counter }}
    </span>
  </div>

  <h3>Call JavaScript</h3>
  <button unicorn:click="call_javascript">Component view calls JavaScript</button>
  <button unicorn:click="call_javascript_module">Component view calls JavaScript module</button>

  <div>
    <h3>
      <code>javascript_exclude states</code>
    </h3>
    {% for state in states %}
    {{ state }}
    {% endfor %}
  </div>

  <h3>Select2</h3>

  <div u:ignore>
    <select unicorn:model="selected_state" class="form-control" id="select2-example" required
      onchange="Unicorn.call('js', 'select_state', this.value, this.selectedIndex);">
      {% for state in states %}
      <option value="{{ state }}">{{ state }}</option>
      {% endfor %}
    </select>

    States (in ignored div): {{ states }}
  </div>

  selected_state: {{ selected_state }}

  <script>
    $(document).ready(function () {
      $('#select2-example').select2();
    });
  </script>

  <div>
    States (not in ignored div): {{ states }}<br />
    <button type="submit" u:click="change_states">Change states</button>
  </div>

  <div>
    <input type="text" u:model="select2_datetime" />
    <button type="submit" u:click="get_now">Get now</button>
    <div>
      select2_datetime: {{ select2_datetime }}
    </div>
  </div>

  <div>
    <button u:click="$toggle('load_js')">Toggle {{ load_js }}</button>
    <p>load_js: {{ load_js }}
    </p>
    {% if load_js %}
    <script src="{% static "js/alert.js" %}"></script>
    <script src="{% static "js/console.js" %}"></script>
    {% endif %}
  </div>
</div>