{% block tab_content %}
<div class="uk-container">

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

    {% if formAddCategory|default %}
    <h2>Ajouter une Catégorie</h2>

    <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-1">
        {{ 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 id="tabs" class="ui-tabs-vertical ui-helper-clearfix">
        <ul>
            {% for categorie in categories %}
            <li><a href="#tabs-{{ loop.index }}">{{ categorie.name }}</a></li>
            {% endfor %}
        </ul>
        {% for categorie in categories %}
        <div id="tabs-{{ loop.index }}">
            <h2>{{ categorie.name }}</h2>
        </div>
        {% endfor %}
    </div>

    <p class="uk-width-1-1 uk-text-right" uk-margin>
        <a href="{{ path('new_category') }}" class="ui-button ui-widget ui-corner-all">Ajouter une catégorie</a>
    </p>

    {% else %}
    <h2>Aucune informations en base de données</h2>
    {% endif %}

</div>

{% block js %}
<script>
    $(document).ready(function () {
        // Initialize jQuery UI tabs
        $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
        $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
    });
</script>
{% endblock %}
{% endblock %}