{% extends "Includes/layout.html.twig" %}

{% block body %}
    <div id="app-global-parameters">
        <main class="row main mx-0 fade-in fade-in" id="main-content" v-cloak>
            <div :class="[showModifyPanel || showCreatePanel ? 'show' : '', 'modal-backdrop']"
                 style="visibility: visible !important;"
                 id="modal-backdrop" ref="modalBackdrop" v-show="showModifyPanel || showCreatePanel"></div>
            <section class="content-area p-r-l-6">
                <div class="simple-data-headers bg-white py-3 rounded-2 mb-3 row">
                    <div class="col-md-6 col-sm-12 text-left d-flex data-options align-items-center">
                        <div class="pagination pr-4 my-auto align-items-center">
                            <span>Page <b><% page %></b> {{ 'of'|trans }} <% nbrPages %></span>
                            <div class="pl-4 d-flex">
                                <i class="pr-2 fas fa-step-backward mr-2" :class="{disabled: page === 1 || loading}"
                                   @click="navigatePage('backward')"></i>
                                <i class="pr-2 fal fa-chevron-left mr-2" :class="{disabled: page === 1 || loading}"
                                   @click="navigatePage('prev')"></i>
                                <i class="pr-2 fal fa-chevron-right mr-2"
                                   :class="{disabled: page === nbrPages || loading}" @click="navigatePage('next')"></i>
                                <i class="fas fa-step-forward" :class="{disabled: page === nbrPages ||loading}"
                                   @click="navigatePage('forward')"></i>
                            </div>
                        </div>
                        <p class="m-0">
                            {{ 'Total globalParameters'|trans }}:
                            <span class="chips chips_purple py-2"><% globalParametersCount %></span>
                        </p>
                    </div>
                    <div class="col-md-6 col-sm-12 section-search text-right d-flex align-items-center">
                        <div class="col-md-6 px-0 d-inline-block ml-auto">
                            <div class="input-group">
                                <input type="search" class="form-control border"
                                       v-model="searchValue"
                                       @keyup.enter="filteredGlobalParameters()"
                                       placeholder="{{ 'search into service description paramkey and value'|trans }}">
                                <span class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button"
                                            @click="getGlobalParametersList()">
                                        <i class="fal fa-search"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                        <button class="btn btn-primary rounded-30 px-4 py-2 border border-primary cursor-pointer my-auto ml-3"
                                @click="openCreatePanel()">{{ 'Create a parameter'|trans }}
                        </button>
                    </div>
                </div>
                <div class="row main-data-table">
                    <div class="main-data-table-content mb-5 pb-3 col-12 px-0">
                        <div class="simple-data-table">
                            <div class="table-headers px-3 py-4 rounded-2">
                                <div class="row px-3">
                                    <div class="col-1 my-auto">
                                        <b>#</b>
                                    </div>
                                    <div class="col-1 my-auto text-left">
                                        <b>Service</b>
                                    </div>
                                    <div class="col-2 my-auto text-left">
                                        <b>ParamKey</b>
                                    </div>
                                    <div class="col-4 my-auto text-center">
                                        <b>Value</b>
                                    </div>
                                    <div class="col-2 my-auto text-center">
                                        <b>Description</b>
                                    </div>
                                    <div class="col-1 my-auto text-center">
                                        <b>Active</b>
                                    </div>
                                    <div class="col-1 my-auto text-center">
                                        <b>Action</b>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <template>
                            <div class="main-data-table-line col-12 rounded-2 bg-white mt-2 line-animation"
                                 v-for="(globalParameter, key) in globalParametersPagination" :key="globalParameter.id">
                                <div class="row px-3" :id="'globalParameter-row-'+globalParameter.id">
                                    <div class="col-1 border-right">
                                        <% globalParameter.id %>
                                    </div>
                                    <div class="col-1 border-right" style="word-wrap:break-word">
                                        <span><% globalParameter.service %></span>
                                    </div>
                                    <div class="col-2 border-right"
                                         style="font-family: 'Courier New';; color: #0000F0; word-wrap:break-word">
                                        <span><% globalParameter.paramkey %></span>
                                    </div>
                                    <div class="col-4 border-right" style="max-height: 100px;overflow-y: auto">
                                        <pre class="mb-0" style="background-color: #1D2437;"><code style="font-family: 'Courier New';white-space: pre; color: white;"><% globalParameter.value %></code></pre>
                                    </div>
                                    <div class="col-2 border-right" style="word-wrap:break-word">
                                        <span><% globalParameter.description %></span>
                                    </div>
                                    <div class="col-1">
                                        <div class="custom-switch d-flex justify-content-center ml-sm-2">
                                            <input type="checkbox" class="custom-control-input"
                                                   :id="'globalParameterSwitch-' + globalParameter.id ">
                                            <label class="custom-control-label-campaign small d-block mt-auto"
                                                   :for="'globalParameterSwitch-' + globalParameter.id"
                                                   :class="{ inactive: !globalParameter.active}"
                                                   @click="globalParameterSwitch(globalParameter.id)">
                                            </label>
                                        </div>
                                    </div>
                                    <div class="my-auto d-flex justify-content-around px-0 col-md-1">
                                        <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center"
                                              data-tippy-content="{{ 'Modify globalParameter'|trans }}"
                                              style="width: 30px; height: 30px"
                                              @click="openModifyPanel(globalParameter.id)">
                                            <i class="fal fa-pen"></i>
                                        </span>
{#                                        <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center"#}
{#                                              data-tippy-content="{{ 'history'|trans|capitalize }}"#}
{#                                              style="width: 30px; height: 30px"#}
{#                                              @click="showHistories(globalParameter.id)"#}
{#                                              :data-id="globalParameter.id">#}
{#                                            <i class="fal fa-history"></i>#}
{#                                        </span>#}
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </section>
            {{ include('Admin/GlobalParameter/edit.html.twig') }}
        </main>
    </div>
    <span class="d-none invisible twig-data-global_parameters"
          data-globalparameters="{{ globalParameters|json_encode }}"></span>
    <span class="d-none invisible twig-data-services" data-services="{{ services|json_encode }}"></span>
    <span class="d-none invisible twig-data-path-ajax-modify"
          data-pathajaxmodify="{{ path('global_parameter_ajax_modify', {'globalParameter': ':gpid'}) }}"></span>
    <span class="d-none invisible twig-data-path-ajax-create"
          data-pathajaxcreate="{{ path('global_parameter_ajax_create') }}"></span>
    <span class="d-none invisible twig-data-path-ajax-get"
          data-pathajaxget="{{ path('global_parameter_ajax_get') }}"></span>
{% endblock %}
{% block specificJS %}
    {{ encore_entry_script_tags('global_parameter_index') }}
{% endblock %}