{% extends "base.html" %}
{% load widget_tweaks %}

{% block content %}
    <div class="container">
        <h1 class="title">Filters</h1>

        <table class="table">
            <thead>
                <tr>
                    <th>Phrase</th>
                    <th>Filter contexts</th>
                    <th></th>
                    <th></th>
                    <th class="empty-cell"></th>
            </thead>
            <tbody>
                {% for filter in filters %}
                    <tr id="filter-{{ filter.id }}">
                        <td>{{ filter.phrase }}</td>
                        <td>
                            {% for context in filter.context %}
                                {{ context }}
                            {% endfor %}
                        </td>
                        <td>
                            <a href="{% url "edit_filter" filter.id %}">
                                <span class="fa fa-pencil"></span>
                                Edit filter
                            </a>
                        </td>
                        <td>
                            <a href="{% url "delete_filter" filter.id %}"
                               ic-delete-from="{% url "delete_filter" filter.id %}",
                               ic-indicator="#filter-spinner-{{ filter.id }}"
                               ic-confirm="Really delete that filter?"
                               ic-success-action="fadeOut;remove"
                               ic-action-target="#filter-{{ filter.id }}">
                                <span class="fa fa-times"></span>
                                Delete filter
                        </td>
                        <td class="empty-cell">
                            <i id="filter-spinner-{{filter.id}}"
                               class="fa fa-spinner fa-spin"
                               style="display:none"></i>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>

        <p>
            <a class="button is-primary" href="{% url "create_filter" %}">
                Create filter
            </a>
    </div>

{% endblock %}
