{% extends 'App/_include/_layout.main.html.twig' %}

{% block page_content %}
    <div class="cell small-12">
        <div class="grid-x header_title_and_action">
            <div class="cell small-12  medium-auto header_title">
                <h1><i class="fa fa-cube"></i>{{ 'article.list.title'|trans }}</h1>
            </div>
            <div class="cell small-12  medium-shrink header_action">
                <a class="button {% if is_allowed_to_create_article %}save{% else %}disabled{% endif %} small" href="{% if is_allowed_to_create_article %}{{ url('app_article_add') }}{% else %}#{% endif %}"><i class="fa fa-plus"></i> {{ 'article.button.add'|trans }}</a>
            </div>
        </div>
    </div>
    <div class="cell small-12">
        <div id="dtContainer" class="grid-x"></div>
    </div>

    {# Modal Delete #}
    <div class="reveal red" id="modalDeleteArticle" data-reveal>
        <div class="reveal-title">{{ 'article.title.delete'|trans }}</div>
        <div class="reveal-body">
            {{ 'article.message.delete.text'|trans }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small delete" id="btn_submit_delete_article">{{ 'delete'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="reveal red" id="modalDeleteHasKB" data-reveal>
        <div class="reveal-title">{{ 'article.title.delete'|trans }}</div>
        <div class="reveal-body">
            {{ 'article.message.delete.error'|trans }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="reveal" id="modalCloneArticle" data-reveal>
        <div class="reveal-title">{{ 'article.title.clone'|trans }}</div>
        <div class="reveal-body">
            {{ 'article.message.clone'|trans }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_clone_article">{{ 'clone'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    {# Modal Export #}
    {% include 'App/_include/_export/_modal.export.html.twig' with {'title': 'export_article.modal.title'|trans } %}
    {% import 'App/_include/_import/_modal.import.html.twig' as macro_import_html %}
    {% if is_granted('ROLE_APP_SUB_IMPORT_ARTICLE') %}
        {# Modal Import #}
        {{ macro_import_html.html_import(formImport, 'article.title.import'|trans, 0) }}
    {% else %}
        {{ macro_import_html.html_import_not_allowed('modal.title.import_not_allowed'|trans, 0) }}
    {% endif %}
{% endblock %}

{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function() {
            {% if is_granted('ROLE_APP_SUB_IMPORT_ARTICLE') %}
                {% import 'App/_include/_import/_modal.import.js.twig'  as macro_import_js %}
                {{ macro_import_js.js_import_general_functions() }}
                {{ macro_import_js.js_import('article', 0) }}
            {% endif %}
            {% include 'App/_include/_export/_modal.export.js.twig' %}
            let fixedColumn = 0;
            let dtToolbar_article = new dtToolbar(document.getElementById('dtContainer'),  {{ dt_settings|json_encode|raw }}, [{'type':'button','title': '{{ "datatable.custom_button.export" | trans }}', 'id':'btn_call_export','icon':'fa-cloud-upload'},{'type':'button','title': '{{ "datatable.custom_button.import" | trans }}', 'id':{% if is_granted('ROLE_APP_SUB_IMPORT_ARTICLE') %}'btn_call_import'{% else %}'btn_call_import_not_allowed'{% endif %},'icon':'fa-cloud-download'}], fixedColumn);
            $(dtToolbar_article).on('row.click', function(e, id){
                let url = "{{ url('app_article_edit',{'article':'__00__'}) }}";
                window.location = url.replace('__00__', id);
            });

            $(dtToolbar_article).on('row.click_action', function(e, data){
                let item_id = data.id;
                if(data.target.classList.contains('btnOpenModalDuplicateArticle')){
                    $('#modalCloneArticle').foundation('open');
                    $('#btn_submit_clone_article').click(function () {
                        let url = "{{ url('app_article_clone', {'article': '__00__'}) }}";
                        url = url.replace('__00__', item_id);
                        window.location = url
                    });
                }
                else if(data.target.classList.contains('btnOpenModalDeleteArticle')){
                    if (data.target.classList.contains('has_kb')){
                        $('#modalDeleteHasKB').foundation('open');
                    } else {
                        $('#modalDeleteArticle').foundation('open');
                        $('#btn_submit_delete_article').click(function () {
                            let delete_url = "{{ url('app_article_delete', {'article': '__00__'}) }}";
                            delete_url = delete_url.replace('__00__', item_id);
                            $(this).html(btn_spin);
                            window.location = delete_url;
                        });
                    }

                }
            });

            $(dtToolbar_article).on('btn_custom.click', function(e, data){
                if(data.id === 'btn_call_export'){
                    selected_ids = data.data;
                    $('#modalExportFile').foundation('open');
                }
                {% if is_granted('ROLE_APP_SUB_IMPORT_ARTICLE') %}
                    else if(data.id === 'btn_call_import'){
                        $('#modalStepFile_0').foundation('open');
                    }
                {% else %}
                else if(data.id === 'btn_call_import_not_allowed'){
                    $('#modalImportNotAllowed_0').foundation('open');
                }
                {% endif %}
            });
        });
    </script>
{% endblock %}