{% extends "hobo/applications/home.html" %}
{% load i18n %}

{% block appbar %}
<h2>{{ type.text }}</h2>
{% endblock %}

{% block content %}
<form method="post">
  {% csrf_token %}
  <div class="application-elements">
    {% for element in elements %}
    <label data-slugged-text="{{ element.text|slugify }}"><input type="checkbox" name="elements" value="{{ element.id }}">{{ element.text }}</label>
    {% endfor %}
  </div>
  <div style="text-align: right">
  <label>{% trans "Filter:" %} <input type="search" id="element-filter"></label>
  </div>
<div class="buttons">
<button class="submit-button">{% trans "Add" %}</button>
<a class="cancel" href="{% url 'application-manifest' app_slug=app.slug %}">{% trans "Cancel" %}</a>
</div>
<script>
$('#element-filter').on('change blur keyup', function() {
  const val = $(this).val().toLowerCase();
  // force dimensions so a reduced number of elements do not affect size
  $('.application-elements').css('height', $('.application-elements').height());
  $('.application-elements').css('width', $('.application-elements').width());
  if (!val) {
    $('.application-elements label').show();
  } else {
    $('.application-elements label').each(function(idx, elem) {
      var slugged_text = $(elem).attr('data-slugged-text');
      if (slugged_text.indexOf(val) > -1) {
        $(elem).show();
      } else {
        $(elem).hide();
      }
    });
  }
});
</script>

</form>
{% endblock %}