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

{% block body %}
    <div id="overview-app" v-cloak>
        <main id="main-content" class="row main mx-0 fade-in">
            <section class="content-area p-r-l-6">
                <div class="col-12 main-data-table px-0">
                    {# data-tables options #}
                    <div class="data-table-headers bg-white py-3 rounded-2 col-sm-12 d-flex align-items-center">
                        <div class="col-md-6">
                            <h2 class="title-page">{{ 'List of'|trans }} Services Health</h2>
                        </div>
                        <div class="col-md-3 d-flex align-items-center justify-content-between">
                            <label for="ActiveServices" class="cursor-pointer ml-auto mr-2">{{ 'Display inactive services'|trans }}</label>
                            <div class="toggle-switch">
                                <input ref="checkbox" id="ActiveServices" type="checkbox" class="" value="false" v-model="showInactiveServices">
                                <label for="ActiveServices" class="toggle-label"></label>
                            </div>
                        </div>
                        <div class="col-md-3 d-flex align-items-center">
                            <button class="btn btn-warning text-white rounded-30 ml-3 px-3 d-flex align-items-center float-right" @click="openModaleUpsertServiceHealth('')">
                                {{ "New" | trans }} Service Health
                                <i class="fal fa-plus ml-2"></i>
                            </button>
                        </div>
                    </div>

                    {# data-tables #}
                    <div class="main-data-table-content mb-5 pb-3">
                        <div class="main-data-table-line col-12 rounded-2 mt-2 table-headers" style="box-shadow: none; background-color: rgba(235, 239, 248, 0.55);">
                            <div class="col-12 row pr-0">
                                <div class="col-md-1 text-center border-right">
                                    <strong>{{ 'Status'|trans }}</strong>
                                </div>
                                <div class="col-md-3 text-center">
                                    <span class="font-700 cursor-pointer">{{ 'Title'|trans }}</span>
                                    <i class="fa small cursor-pointer"
                                       @click="order('title', 'String')"
                                       :class="{'fa-sort-alt': serviceHealthOrder.option != 'title',
                                               'fa-sort-amount-down-alt': serviceHealthOrder.option == 'title' && serviceHealthOrder.direction == 'ASC',
                                               'fa-sort-amount-down': serviceHealthOrder.option == 'title' && serviceHealthOrder.direction == 'DESC' }"></i>

                                </div>
                                <div class="col-md-5 text-center border-left">
                                    <strong>{{ 'Description'|trans }}</strong>
                                </div>
                                <div class="col-md-1 text-center border-left">
                                    <strong>{{ 'Active'|trans }}</strong>
                                </div>
                                <div class="col-md-1 text-center border-left">
                                    <strong>{{ 'Should be empty'|trans }}</strong>
                                </div>
                            </div>
                        </div>


                        <div class="main-data-table-line col-12 rounded-2 bg-white mt-2 line-animation" :id="'service-health-row-'+serviceHealth.id"
                             v-for="(serviceHealth, key) in filteredServiceHealths" :key="serviceHealth.id">
                            {#  #}
                            <div class="col-12 row pr-0">
                                {# Status #}
                                <div class="col-md-1  justify-content-between border-right">
                                    <span class="span-icon no-hover d-flex justify-content-center align-items-center bg-transparent">
                                        <span class="span-icon no-hover d-flex justify-content-center align-items-center bg-transparent">
                                            <i v-if="serviceHealth.statusOk" class="fas fa-heart text-success" aria-hidden="true"
                                                :data-tippy-content="'{{ 'In this state since'|trans }} ' + ' : ' + serviceHealth.timeSinceUpdate + ' ' + '{{ 'days'|trans }}'"></i>
                                            <i v-if="serviceHealth.statusOk == 0" class="fas fa-fire text-danger" aria-hidden="true"
                                                :data-tippy-content="'{{ 'In this state since'|trans }} ' + ' : ' + serviceHealth.timeSinceUpdate + ' ' + '{{ 'days'|trans }}' + '<br>' + '<br>'
                                                + '{{ 'Last status import:'|trans }}' + ' ' + serviceHealth.lastResult"></i>
                                        </span>
                                    </span>
                                </div>
                                {# Title #}
                                <div class="col-md-3  justify-content-between">
                                    <span class="span-icon no-hover d-flex justify-content-center align-items-center bg-transparent">
                                        <% serviceHealth.title %>
                                    </span>
                                </div>
                                {# Description #}
                                <div class="col-md-5  justify-content-between border-left">
                                    <span class="span-icon no-hover d-flex justify-content-center align-items-center bg-transparent">
                                        <% serviceHealth.description %>
                                    </span>
                                </div>
                                {# Activated #}
                                <div class="col-md-1  justify-content-between border-left">
                                    <span class="span-icon no-hover d-flex justify-content-center align-items-center bg-transparent">
                                        <span class="span-icon no-hover d-flex justify-content-center align-items-center bg-transparent">
                                            <i v-if="serviceHealth.active" class="fa fa-check-circle text-success" aria-hidden="true"></i>
                                            <i v-else class="fa fa-times-circle text-danger" aria-hidden="true"></i>
                                        </span>
                                    </span>
                                </div>
                                {# Should be empty #}
                                <div class="col-md-1  justify-content-between border-left">
                                    <span class="span-icon no-hover d-flex justify-content-center align-items-center bg-transparent">
                                        <span class="span-icon no-hover d-flex justify-content-center align-items-center bg-transparent">
                                            <i v-if="serviceHealth.shouldBeEmpty" class="fa fa-check-circle text-success" aria-hidden="true"></i>
                                            <i v-else class="fa fa-times-circle text-danger" aria-hidden="true"></i>
                                        </span>
                                    </span>
                                </div>
                                {# Update & see more#}
                                <div class="col-sm-1 px-2">
                                    <div class="slider-icon-group " style="left: 67%;">
                                        <span data-tippy-content="{{ 'update' | trans }} System Health"
                                              class="span-icon small cursor-pointer d-flex justify-content-center align-items-center"
                                              @click="openModaleUpsertServiceHealth(key)"
                                              style="width: 30px; height: 30px;" >
                                            <i class="fal fa-pen"></i>
                                        </span>
                                    </div>
                                    <div class="slider-icon-group position-absolute" style="left: 100%;">
                                        <div class="slider-icon" :href="'#' + serviceHealth.id" :data-target="'#' + serviceHealth.id"
                                             :id="'id-' + serviceHealth.id" @click="sliderFunction(serviceHealth.id)">
                                            <i class="far fa-angle-down" data-tippy-content="{{ 'See more' | trans }}"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {###################### INNER DATA-TABLE ROW ######################}
                            <div class="hide-infos-apply col-12 pt-3 row pr-0 pb-3" :class="'div-' + serviceHealth.id" :data-id="serviceHealth.id" style="display: none;">
                                <div class="col-md-12 col-sm-12 px-0">
                                    <span class="mb-2 d-block font-600 text-center">Query:&nbsp; </span>
                                    <div class="mb-4">
                                        <div class="text-center"><% serviceHealth.query %></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        {# Form for adding / edit #}
        <transition name="slide-right">
            <div class="bg-white form-campaign px-5 pt-4 pb-5 active" id="modaleServiceHealth" v-if="isSidePanelOpen">
                <div class="small-loader" style="display: none;"></div>
                <div class="cover-white bg-white h-100 w-100 position-fixed opacity-06" style="z-index: 9998; display: none; overflow: unset;" id="cover-white"></div>
                <div class="w-100">
                    <div class="header d-flex flex-column pl-2 mb-5">
                        <div v-show="!loading" class="slider-icon-group active ml-auto" id="closeModale" style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);" @click="closeSideModal()">
                            <div class="slider-icon">
                                <i class="fal fa-times text-white"></i>
                            </div>
                        </div>
                        <div class="title mt-3">
                            <svg v-if="serviceHealthToUpsert.id" xmlns="http://www.w3.org/2000/svg" width="21.429" height="15" viewBox="0 0 21.429 15">
                                <path id="Icon_material-playlist-add" data-name="Icon material-playlist-add"
                                      d="M15.857,13.286H3v2.143H15.857Zm0-4.286H3v2.143H15.857Zm4.286,8.571V13.286H18v4.286H13.714v2.143H18V24h2.143V19.714h4.286V17.571ZM3,19.714h8.571V17.571H3Z"
                                      transform="translate(-3 -9)" fill="#1d446b" opacity="0.89"></path>
                            </svg>
                            <svg v-else xmlns="http://www.w3.org/2000/svg" width="21.429" height="15" viewBox="0 0 21.429 15">
                                <path id="Icon_material-playlist-add" data-name="Icon material-playlist-add" d="M15.857,13.286H3v2.143H15.857Zm0-4.286H3v2.143H15.857Zm4.286,8.571V13.286H18v4.286H13.714v2.143H18V24h2.143V19.714h4.286V17.571ZM3,19.714h8.571V17.571H3Z" transform="translate(-3 -9)" fill="#1d446b" opacity="0.89">
                                </path>
                            </svg>
                            <h5 class="ml-3 text-primary font-weight-bold d-inline">
                                <template v-if="serviceHealthToUpsert.id">
                                    {{ 'Update'|trans }}  Service Health
                                </template>
                                <template v-else>
                                    {{ 'New'|trans }}  Service Health
                                </template>
                            </h5>
                        </div>
                    </div>
                    <div class="body-form mt-2">
                        <div class="body-step">
                            <div class="d-flex ml-4 mt-4 ">
                                <div class="col pl-4 pr-0">
                                    <div class="form-label-group position-relative input-login">
                                        <label for="title" class="labelInput focusInput font-500">{{ 'Title'|trans }}</label>
                                        <input type="text" id="title" name="title"
                                               class="form-control no-placeholder"
                                               v-model="serviceHealthToUpsert.title" placeholder="{{ 'Title'|trans }}" required="true">
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex ml-4 mt-4">
                                <div class="col pl-4 pr-0">
                                    <div class="form-label-group position-relative input-login">
                                        <label for="description-textarea" class="labelInput focusInput font-500">{{ 'Description'|trans }}</label>
                                        <textarea id="description-textarea" class="form-group w-100 rounded-2 border" v-model="serviceHealthToUpsert.description"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex ml-4 mt-4">
                                <div class="col pl-4 pr-0">
                                    <div class="form-label-group position-relative input-login">
                                        <label for="query-textarea" class="labelInput focusInput font-500">{{ 'Query'|trans }}</label>
                                        <textarea id="query-textarea" class="form-group w-100 rounded-2 border" v-model="serviceHealthToUpsert.query"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex ml-4 mt-4">
                                <div class="col pl-4 pr-0">
                                    <div class="form-label-group position-relative input-login">
                                        <input class="inp-cbx" id="shouldBeEmpty" type="checkbox"
                                               style="display: none;"
                                               v-model="serviceHealthToUpsert.shouldBeEmpty"/>
                                        <label class="cbx d-flex align-items-center ml-4 w-fit-content font-500" for="shouldBeEmpty">
                                        <span class="bg-white mr-2">
                                            <svg width="10px" height="10px" viewbox="0 0 10 10"><polyline points="1.5 6 4.5 9 10.5 1"></polyline></svg>
                                        </span>
                                            {{ 'Should be empty'|trans }} ?
                                        </label>
                                    </div>
                                </div>
                                <div class="col pl-4 pr-0">
                                    <div class="form-label-group position-relative input-login">
                                        <input class="inp-cbx" id="activeReport" type="checkbox"
                                               style="display: none;"
                                               v-model="serviceHealthToUpsert.active"/>
                                        <label class="cbx d-flex align-items-center ml-4 w-fit-content font-500" for="activeReport">
                                        <span class="bg-white mr-2">
                                            <svg width="10px" height="10px" viewbox="0 0 10 10"><polyline points="1.5 6 4.5 9 10.5 1"></polyline></svg>
                                        </span>
                                            {{ 'Enabled'|trans }} ?
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-md-6">
                                    <button class="btn btn-primary rounded-30 ml-3 px-3 float-right" @click="upsertServiceHealth()">
                                        {{ 'Save'|trans }}
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    <button class="btn btn-danger rounded-30 ml-3 px-3" id="deleteServiceHealth" v-if="serviceHealthToUpsert.id" @click="deleteServiceHealth()">
                                        {{ 'Delete'|trans }}
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </transition>

        <div :class="[isSidePanelOpen ? 'show' : '', 'modal-backdrop']" style="visibility: visible !important;"
             id="modal-backdrop" ref="modalBackdrop" v-show="isSidePanelOpen"></div>

        <span class="d-none invisible twig-data-path-ajax-service-healths-get" data-path-ajax-service-healths-get="{{ path('ajax_get_system_healths') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-upsert-service-health" data-path-ajax-upsert-service-health="{{ path('ajax_upsert_system_health') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-remove-service-health" data-path-ajax-remove-service-health="{{ path('ajax_remove_system_health') }}"></span>
    </div>
{% endblock %}

{% block specificJS %}
    {{ encore_entry_script_tags('admin-service-health') }}
{% endblock %}