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

{% block body %}
    <main id="error-ats" class="row main mx-0 fade-in" v-cloak>
        <section class="content-area p-r-l-6 w-100">
            <div class="main-data-table px-0">
                <div class="handledErrorMessage"></div>
                <div class="main-data-table-content pb-3">
                    <div class="main-data-table-line row col-12 rounded-2 mt-2 table-headers" style="box-shadow: none; background-color: rgba(235, 239, 248, 0.55);">
                        <div class="col-md-1 text-center">
                            <span class="font-700">Id ATS</span>
                        </div>
                        <div class="col-md-3 text-center border-left">
                            <span class="font-700">{{ 'Name'|trans }}</span>
                        </div>
                        <div class="col-md-3 text-center border-left">
                            <span class="font-700">{{ 'Number of error'|trans }}</span>
                        </div>
                    </div>
                </div>

                <div class="" v-for="(unknownErrorsOneAts, index) in unknownErrorsByAts"
                     :class="'div-' + unknownErrorsOneAts.name.replaceAll(' ', '-').replaceAll('(', '').replaceAll(')', '')" :data-id="'ats-'+unknownErrorsOneAts.name.replaceAll(' ', '-').replaceAll('(', '').replaceAll(')', '')">

                    <div class="main-data-table-content" style="cursor: pointer;">
                        <div class="main-data-table-line col-12 pt-3 row rounded-2 mt-2 table-headers" @click="showApiErrors(unknownErrorsOneAts.name.replaceAll(' ', '-').replaceAll('(', '').replaceAll(')', ''));" style="box-shadow: none; background-color: rgba(235, 239, 248, 0.55);">
                            <div class="col-md-1 text-center">
                                <span class="font-700"><% unknownErrorsOneAts.idAts %></span>
                            </div>
                            <div class="col-md-3 text-center">
                                <span class="font-700"><% unknownErrorsOneAts.name %></span>
                            </div>
                            <div class="col-md-3 text-center border-left">
                                <span class="font-700"><% unknownErrorsOneAts.count %></span>
                            </div>
                        </div>
                    </div>

                    <div class="main-data-table-content mb-5 pb-3 d-none" :id="'row-'+ unknownErrorsOneAts.name.replaceAll(' ', '-').replaceAll('(', '').replaceAll(')', '')">
                        <div class="main-data-table-line row col-12 pt-3 row pr-0 pb-3 table-headers">
                            <div class="col-12 row pr-0">
                                <div class="col-md-1 text-center">
                                    <span class="font-700">ATS</span>
                                </div>
                                <div class="col-md-1 text-center border-left">
                                    <span class="font-700">Total errors</span>
                                </div>
                                <div class="col-md-2 text-center border-left">
                                    <span class="font-700">Match keys</span>
                                </div>
                                <div class="col-md-2 text-center border-left">
                                    <span class="font-700">Pattern</span>
                                </div>
                                <div class="col-md-1 text-center border-left">
                                    <span class="font-700">Error type</span>
                                </div>
                                <div class="col-md-1 text-center border-left">
                                    <span class="font-700">Tolerance</span>
                                </div>
                                <div class="col-sm-1 text-center border-left">
                                    <span class="font-700">{{ 'Applies' | trans }}</span>
                                </div>
                                <div class="col-md-1 text-center border-left">
                                    <span class="font-700">Retry</span>
                                </div>
                                <div class="col-md-2 text-center border-left">
                                    <span class="font-700">Action</span>
                                </div>
                            </div>
                            <div class="main-data-table-line col-12 rounded-2 bg-white mt-2 line-animation sm" :id="'unknown-error-row-'+data.name.replaceAll(' ', '-').replaceAll('(', '').replaceAll(')', '')+'-'+data.index"
                                 v-for="(data, index) in unknownErrorsOneAts.listError" :key="data.name.replaceAll(' ', '-').replaceAll('(', '').replaceAll(')', '')+'-'+data.index" style="padding-top: 0.6rem;padding-bottom: 0.6rem;">
                                <div class="col-12 row pr-0">
                                    <div class="col-md-1  text-center" style="padding-top: 0.3%;cursor: pointer;" @click="showApiLog(data.prettyApiLog, data.index, data.name.replaceAll(' ', '-').replaceAll('(', '').replaceAll(')', ''))">
                                        <% data.name %>
                                    </div>
                                    <div class="col-md-1  text-center" style="padding-top: 0.3%;cursor: pointer;" @click="showApiLog(data.prettyApiLog, data.index, data.name.replaceAll(' ', '-').replaceAll('(', '').replaceAll(')', ''))"><% data.applyId.length %></div>
                                    <div class="col-md-2  text-center">
                                        <input type="text" class="form-control" style="font-size: 14px" v-model="unknownErrorLog[data.index].matchKeys">
                                    </div>
                                    <div class="col-md-2  text-center"><input type="text" class="form-control" style="font-size: 14px" v-model="unknownErrorLog[data.index].pattern"></div>
                                    <div class="col-md-1  text-center">
                                        <select name="pets" id="pet-select" v-model="unknownErrorLog[data.index].codeError" class="form-control" style="font-size: 14px" @change="changeToleranceAndRetry(data.index, unknownErrorLog[data.index].codeError)">
                                            <option v-for="error in errorList" :value="error.code"><% error.code %></option>
                                        </select>
                                    </div>
                                    <div class="col-md-1  text-center">
                                        <select name="pets" id="pet-select" v-model="unknownErrorLog[data.index].tolerance" class="form-control" style="font-size: 14px">
                                            <option v-for="(tolerance, tIndex) in toleranceList" :value="tIndex"><% tolerance %></option>
                                        </select>
                                    </div>
                                    <div class="col-sm-1  text-center">
                                        <input type="text" class="form-control" style="font-size: 14px" :data-tippy-content="Translator.trans('Click to copy to clipboard')" v-model="data.tippyContent" @click="handleCopyToClipboard">
                                    </div>
                                    <div class="col-md-1  text-center"><input type="checkbox" id="checkbox" v-model="unknownErrorLog[data.index].retry" style="margin-top: 10%;"></div>
                                    <div class="col-md-2  text-center">
                                        <button class="btn btn-primary btn-xs" @click="saveApiError(data.index, data)" :disabled="loadingTemplate || !data.checkTest">Save</button>
                                        <button class="btn btn-primary btn-xs" @click="testApiError(data.index, data)" :disabled="loadingTemplate">Test</button>
                                        <div class="slider-icon-group cursor-pointer position-absolute" style="left: 100%;">
                                            <div class="slider-icon" :href="'#id-' + data.ats+'-'+data.index" :data-target="'#id-' + data.name+'-'+data.index"
                                                 :id="'id-' + index" >
                                                <i class="far fa-angle-down"  data-tippy-content="{{ 'See more' | trans }}" @click="showApiLog(data.prettyApiLog, data.index, data.name.replaceAll(' ', '-').replaceAll('(', '').replaceAll(')', ''))"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {###################### INNER DATA-TABLE ROW ######################}
                                <div class="hide-infos-error col-12 pt-3 row pr-0 pb-3" :class="'div-' + data.name.replaceAll(' ', '-').replaceAll('(', '').replaceAll(')', '')+'-'+data.index" :id="'id-'+ data.name.replaceAll(' ', '-').replaceAll('(', '').replaceAll(')', '')+'-'+data.index" style="display: none;">
                                    <div class="col-md-12 overflow-auto" style="max-height: 600px; max-width: 1523px">
                                        <json-view :data="data.jsonContent"
                                                   :max-depth="15"
                                                   v-on:selected="handleKeyClick(data.index, $event)"></json-view>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <span class="d-none invisible twig-data-path-unknown-error-log" data-path-unknown-error-log="{{ path('unknown_error_log') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-save-api-error" data-path-ajax-save-api-error="{{ path('ajax_save_api_error') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-test-regex-api-log" data-path-ajax-test-regex-api-log="{{ path('ajax_test_regex_api_log') }}"></span>
        <span class="d-none invisible twig-data-role-ats-global-granted" data-role-ats-global-granted="{{ is_granted('ROLE_ATS_GLOBAL')|json_encode|raw }}"></span>
    </main>
{% endblock %}

{% block specificJS %}
    {{ encore_entry_script_tags('admin-ats-error-manage') }}
{% endblock %}