{% load humanize %}
{% load static %}
{% load i18n %}

<div class="card mt-4">
    <div class="card-header">
        {% trans "Фильтр" %}
    </div>
    <div class="card-body">
        <div>
            <div class="d-flex">
                <input type="text" id="filterSearchTerm" class="form-control form-input" placeholder="{% trans "Альянс, Корпорация, Персонаж..." %}"  list="autocomplete"/>
                <datalist id="autocomplete">
                </datalist>
            </div>
            <button id="addFilterBtn" class="btn btn-primary mt-4">
                   {% trans "Добавить" %}
            </button>
        </div>
        </div>
        <div class="mt-2">
            <ul id="filters-list" class="list list-group list-group-flush mt-4">
            {% for entry in data %}
                <li class="d-flex justify-content-between p-2 list-group-item" >
                    <div>
                        <img src="{{entry.icon}}" width="32" alt="{{entry.display_name}}" />
                        {{entry.display_name}}
                    </div>
                    <button data-id="{{entry.filter.id}}" data-name="{{entry.display_name}}" class="delete-filter-btn fa fa-trash btn btn-danger"></button>
                </li>
            {% endfor %}
            </ul>
        </div>
    </div>
</div>