{% 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 category in categories %}
        <div>
          {% if category.name %}<h4>{{ category.name }}</h4>{% endif %}
          {% for element in category.elements %}
            <label data-slugged-text="{{ element.text|slugify }}"><input
              type="checkbox" name="elements" value="{{ element.id }}">
              {{ element.indentation }}{{ element.text }}</label>
          {% endfor %}
        </div>
      {% 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 div').show();
          $('.application-elements label').show();
        } else {
          $('.application-elements label').each(function(idx, elem) {
            var container = $(elem).parent();
            var slugged_text = $(elem).attr('data-slugged-text');
            if (slugged_text.indexOf(val) > -1) {
              $(elem).show();
              container.show();
            } else {
              $(elem).hide();
              if (!$('label:visible', container).length) {
                container.hide();
              }
            }
          });
        }
      });
    </script>

  </form>
{% endblock %}