{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}
{% load wger_extras %}
{% load cache %}

{% block header %}
<script>
$(document).ready(function() {
    // Prevent the form from being submited if JavaScript is enabled
    $("#search_form").submit(function() {return false;});

    // Init the autocompleter
    $("#ingredient-search").autocomplete({
            source: "{% url 'ingredient-search' %}",
            minLength: 2,
            select: function(event, ui) {

                // Redirect to exercise after clicking on a result
                // Path is hard coded here, because we can't use the url-tag
                window.location.href = '/nutrition/ingredient/' + ui.item.id + '/view/'
            }
        });
});
</script>
{% endblock %}

{% block title %}{% trans "Ingredient overview" %}{% endblock %}


{% block content %}
{% if ingredients_list %}
<div class="list-group">
    {% for ingredient in ingredients_list %}
        <a  class="list-group-item {% if flavour == 'mobile' %}wger-list-group-item{% endif %}" href="{{ ingredient.get_absolute_url }}">
            {% if flavour == 'mobile' %}
                <span class="glyphicon glyphicon-chevron-right pull-right"></span>
            {% endif %}
            {{ ingredient.name }}
        </a>
    {% endfor %}
</div>
{% else %}
    <p>
        <a href="{% url 'nutrition:ingredient:add' %}" class="btn btn-default btn-block">
        {% trans "No ingredients." %} {% trans "Add one now." %}
        </a>
    </p>
{% endif %}


<div style="padding-top:3em;"></div>
{% pagination paginator page_obj %}
{% endblock %}

{% block sidebar %}
{% if user.is_authenticated and not user.userprofile.is_temporary %}
<h4>{% trans "Add ingredient" %}</h4>
<p>
       <a href="{% url 'nutrition:ingredient:add' %}" {% auto_link_css flavour %}>
       <img src="{% static 'images/icons/new.svg' %}"
            width="32"
            height="32"
            alt="{% trans 'Add ingredient' %}"
            title="{% trans 'Add ingredient' %}">
       {% trans "Add ingredient" %}
       </a>
</p>
{% endif %}

<h4>{% trans "Search" %}</h4>
<form action="{% url 'ingredient-search' %}"
        method="get"
        id="search_form">
    {% csrf_token %}
    <input name="term"
            type="search"
            id="ingredient-search"
            class="ajax-form-element form-control"
            placeholder="{% trans 'ingredient name' %}"
            style="width:100%;">
</form>
{% endblock %}
