{% extends 'base.html' %}
{% load static %}
{% load custom_tags_and_filters %}
{% block extrahead %}
    <script type="text/javascript" src="{% static "mobile.js" %}"></script>
{% endblock %}
{% block title %}Choose tool or area{% endblock %}
{% block content %}
    <h3>{{ title }}</h3>
    <form>
        <div class="form-group">
            <label for="search">
                Search for
                {% if tools %}a tool{% endif %}
                {% if tools and areas %}or{% endif %}
                {% if areas %}an area{% endif %}
            </label>
            <input class="form-control"
                   type="text"
                   id="search"
                   spellcheck="false"
                   autocapitalize="off"
                   autocomplete="off"
                   autocorrect="off"
                   oninput="mobile_search(this, get_base_url, {% if tools and areas %}false{% else %}true{% endif %})"
                   data-search-results-target="#search_results"
                   data-search-base='{% json_search_base_with_extra_fields tools|add:areas %}'>
        </div>
    </form>
    <div id="search_results"></div>
    {% if tools %}
        <p>... or select by category:</p>
        {% regroup tools by category as tools_regrouped_by_category %}
        {% for category in tools_regrouped_by_category %}
            <div class="alert alert-info" role="alert">
                <span style="cursor:pointer"
                      class="pull-right glyphicon glyphicon-chevron-down"
                      data-toggle="collapse"
                      data-target="#category_{{ forloop.counter }}"></span>
                <p style="cursor:pointer" data-toggle="collapse" data-target="#category_{{ forloop.counter }}">
                    <strong>{{ category.grouper }}</strong>
                </p>
                <div id="category_{{ forloop.counter }}" class="collapse">
                    <div style="margin-bottom:10px"></div>
                    {% for tool in category.list %}
                        <p>
                            <a href="{% url next_page 'tool' tool.id %}">{{ tool.name_or_child_in_use_name }}</a>
                        </p>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    {% endif %}
    <script type="text/javascript">
	let get_base_url = function(item_type, item_id)
	{
	    return '{% url next_page 'tool' '11111' %}'.replace('/tool/', '/'+item_type+'/').replace('11111', item_id)
	}
	
    </script>
{% endblock %}
