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

{% block header %}
{% endblock %}

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


{% block content %}
    {% if ingredients_list %}
        <div class="list-group">
            {% for ingredient in ingredients_list %}
                <a class="list-group-item list-group-item-action d-inline-flex align-items-center justify-content-start"
                   href="{{ ingredient.get_absolute_url }}">
                <span class="text-white rounded-circle m-1 me-2"
                      style="background-color: lightgray; width: 40px; height: 40px;">
                    {% if ingredient.image %}
                        <img src="{{ ingredient.image.image.url }}"
                             class="img-fluid"
                             alt="{{ ingredient.name }}"
                             style="height: 40px; width: 40px; border-radius: 50%; object-fit: cover;">
                    {% else %}
                        <i class="fas fa-camera fa-sx" style="text-align:center; width: 40px;"></i>
                    {% endif %}
                  </span>
                    {{ ingredient.name }}
                    {% if ingredient.is_vegan %}
                        <span class="badge bg-success ms-2">{% translate "Vegan" %}</span>
                    {% elif ingredient.is_vegetarian %}
                        <span class="badge bg-info ms-2">{% translate "Vegetarian" %}</span>
                    {% endif %}
                </a>
            {% endfor %}
        </div>
    {% else %}
        <p>
            {% if perms.nutrition.add_ingredient %}
                <a href="{% url 'nutrition:ingredient:add' %}"
                   class="btn btn-light btn-block">
                    {% translate "No ingredients." %} {% translate "Add one now." %}
                </a>
            {% else %}
                {% translate "No ingredients." %}
            {% endif %}
        </p>
    {% endif %}


    <div style="padding-top:3em;"></div>
    <nav aria-label="{% translate 'Ingredient pagination' %}">
        <ul class="pagination justify-content-center">
            {% if is_paginated %}
                <li class="page-item">
                    <a href="{{ first_url }}" class="page-link">
                        « {% translate "First page" %}
                    </a>
                </li>
            {% endif %}
            {% if has_prev %}
                <li class="page-item">
                    <a href="{{ prev_url }}" class="page-link">
                        ‹ {% translate "previous" %}
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <a href="#" class="page-link">‹ {% translate "previous" %}</a>
                </li>
            {% endif %}
            {% if has_next %}
                <li class="page-item">
                    <a href="{{ next_url }}" class="page-link">
                        {% translate "next" %} ›
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <a href="#" class="page-link">{% translate "next" %} ›</a>
                </li>
            {% endif %}
        </ul>
    </nav>
{% endblock %}

{% block sidebar %}
    <h4>{% translate "Search" %}</h4>
    <div id="react-ingredient-search"></div>

    <h4 class="mt-4">{% translate "Filter" %}</h4>
    <form method="GET" action="">
        <div class="mb-3">
            <div class="form-check">
                <input class="form-check-input"
                       type="checkbox"
                       name="is_vegan"
                       id="filter-vegan"
                       value="1"
                       {% if request.GET.is_vegan %}checked{% endif %}>
                <label class="form-check-label" for="filter-vegan">
                    {% translate "Vegan" %}
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input"
                       type="checkbox"
                       name="is_vegetarian"
                       id="filter-vegetarian"
                       value="1"
                       {% if request.GET.is_vegetarian %}checked{% endif %}>
                <label class="form-check-label" for="filter-vegetarian">
                    {% translate "Vegetarian" %}
                </label>
            </div>
        </div>
        <button type="submit" class="btn btn-light btn-sm">{% translate "Apply" %}</button>
        {% if request.GET.is_vegan or request.GET.is_vegetarian %}
            <a href="{% url 'nutrition:ingredient:list' %}" class="btn btn-outline-secondary btn-sm">{% translate "Reset" %}</a>
        {% endif %}
    </form>

{% endblock %}


{#         #}
{# Options #}
{#         #}
{% block options %}
    {% if perms.nutrition.add_ingredient %}
        {% translate 'Add' as text %}
        {% modal_link url='nutrition:ingredient:add' text=text %}
    {% endif %}
{% endblock %}