{% extends 'base.html.twig' %}

{% block title %}Catégories{% endblock %}

{% block body %}

<div class="uk-container">

    {% if slug|default == 'add' %}

    {% if category_id|default %}
    <h2>Modifier une catégorie</h2>
    {% else %}
    <h2>Ajouter une catégorie</h2>
    {% endif %}

    {% if formAddCategory|default %}

    <div class="uk-hr"></div>

    {{ form_start(formAddCategory, {'attr': {'class': 'uk-form uk-margin-top uk-grid-small', 'uk-grid' : '' }}) }}

    <div class="uk-width-1-2">
        {{ form_row(formAddCategory.name) }}
    </div>

    <div class="uk-width-1-1">
        {{ form_row(formAddCategory.Valider) }}
    </div>

    {{ form_end(formAddCategory) }}
    {% endif %}


    {% elseif categories|default %}

    <div class="uk-animation-slide-bottom">
        <p class="uk-text-center">
        <h1>Liste des catégories</h1>
        </p>
    </div>

    <div class="separator"></div>

    <div class="ui divided items uk-animation-fade">
        {% for categorie in categories %}
        <div class="item">
            <div class="ui tiny image">
                <img src="{{ asset('img/png/' ~  categorie ~ '.png') }}">
            </div>
            <div class="middle aligned content">
                <a href="{{ path('list_course_category', {'id': categorie.id }) }}">{{ categorie.name }}</a>
            </div>

            <div class="uk-text-right uk-padding-top uk-margin-top">
                <a href="{{ path('edit_category', {'id': categorie.id }) }}" class="ui-button ui-widget ui-corner-all">
                    <i class="edit icon right floated"></i>
                </a>                
                <a href="{{ path('delete_category', {'id': categorie.id }) }}" class="ui-button ui-widget ui-corner-all">
                    <i class="trash icon right floated"></i>
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="uk-text-right uk-padding-top">
        <a href="{{ path('new_category') }}" class="ui-button ui-widget ui-corner-all">
            <i class="plus circle icon"></i>Ajouter
        </a>
    </div>
    {% else %}
    <h2>Aucune informations en base de données</h2>
    {% endif %}
</div>
{% endblock %}

{# <div class="extra">
    <div class="ui right floated">
        <a href="{{ path('delete_category', {'id': categorie.id }) }}">
            <i class="trash icon right floated"></i>
        </a>
        <a href="{{ path('edit_category', {'id': categorie.id }) }}">
            <i class="edit icon right floated"></i>
        </a>

    </div>
</div> #}