{% extends "view/layout.html.twig" %}
{% block title %} Subcategory | CRM BIVTeam {% endblock %}
{% block body %}
    <div class="container-fluid mt-2">
        {% set titleHelp = "help.subcategory.title"|trans %}
        {% include 'view/header/_help.html.twig' %}

        <!-- box -->
        <div class="row">
            <div class="col-sm-4 col-md-4">
                <div class="content-box content-lighten" data-step="1"
                     data-intro="{{ "help.subcategory.list.step1"|trans }}">
                    <h2 class="mb-3">{{ 'subcategory.formSubcategoryType.title' | trans }}</h2>
                    {{ form(formSubcategory) }}
                </div>
            </div>
            <div class="col-sm-8 col-md-8">
                <div class="content-box content-lighten">
                    <div class="row">
                        <div class="col-md-6">
                            <h3> {{ 'subcategory.list.title' | trans }} </h3>
                        </div>
                        <div class="col-md-6">
                            <div class="text-right">
                                {% if 'ROLE_CLIENT_ADMIN' in app.user.roles %}
                                    <div class="text-right mb-2">
                                        <form id="deleteSubcategoriesForm" action="{{ path('deleteSubcategory') }}">
                                            <input type="hidden" name="_method" value="DELETE"/>
                                            <input type="hidden" name="subcategories[]" value="">
                                            <button type="submit" id='deleteSubCategory' class="btn btn-danger"
                                                    data-toggle="tooltipDelete"
                                                    data-step="3" data-intro="{{ "help.subcategory.list.step3"|trans }}"
                                                    data-placement="left" title="{{ "header.delete"| trans }}"
                                                    disabled>
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                            <button title="Exporter en csv" id="exportCsvSubCategory" type="button"
                                                    class="btn btn-outline-success m-1">
                                                <i class="fa fa-file-csv"></i>
                                            </button>
                                        </form>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="h-600" data-step="2" data-intro="{{ "help.subcategory.list.step2"|trans }}">
                        <div id="subCategoryLoader" class="table-loader"><div class="spinner-border"></div></div>
                        <div id="subCategoryTable" class="ag-theme-quartz h-600"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        let translations = {
            name: "{{ 'subcategory.list.table.name'|trans }}",
            description: "{{ 'subcategory.list.table.description' | trans }}",
        };
    </script>
    <script type="text/javascript" charset="utf8"
            src="{{ asset('js/signaletique/subcategory/subcategories.js') }}"></script>
{% endblock %}