{% extends 'page-base.twig' %}
{% block content %}
    <div class="page-columns">
        <!-- FILTERS -->
        <div class="column filter__column">
            <div class="content-box">
                <div class="box-header">
                    <span class="box-header-title flex items-center">
  <span class="box-header-icon mr-2">
    <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
    </svg>
  </span>
  <span>{{ _e('Filters', 'postsync') }}</span>
</span>
                </div>
                <div class="box-content filter__content">
                    <div class="filter__item">
                        <div class="filter__item-content overview-search relative">
                            <div class="flex absolute inset-y-0 right-0 items-center pr-3">
                                <button
                                        type="button"
                                        id="overview-search"
                                >
                                    <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor"
                                         viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M10 18.5A7.5 7.5 0 1117.5 11 7.5 7.5 0 0110 18.5zM21.5 21.5l-4.6-4.6"/>
                                    </svg>
                                </button>
                            </div>
                            <input
                                    type="search"
                                    id="overview-search-input"
                                    placeholder="{{ _e('Search through logs..', 'postsync') }}"
                            />
                        </div>
                    </div>
                    <div class="filter__item">
                        <div class="flex"></div>
                        <div class="filter__item-header flex items-center" data-toggle="date-picker">
  <span class="filter__header-icon mr-2">
    <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
    </svg>
  </span>
                            <span class="filter__header-title flex-grow">
    {{ _e('Date filter', 'postsync') }}
  </span>
                        </div>
                        <div id="date-picker" class="filter__item-content date-picker" style="display: none">
                            <div class="flex justify-start items-center">
                                <input
                                        type="text"
                                        class="header__util-datepicker datepicker__left rounded-r-none"
                                        id="datepicker-start"
                                        placeholder="{{ _e('Start date', 'postsync') }}"
                                />
                                <span class="datepicker-separator border-y border-y-gray-200 px-2 pt-[7px] pb-[6px]">
                                    {{ _e('to', 'postsync') }}
                                </span>
                                <input
                                        type="text"
                                        class="header__util-datepicker datepicker__right"
                                        id="datepicker-end"
                                        placeholder="{{ _e('End date', 'postsync') }}"
                                />
                            </div>
                        </div>
                    </div>
                    <div class="filter__item">
                        <div class="filter__item-header flex items-center" data-toggle="severity-levels">
  <span class="filter__header-icon mr-2">
    <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
    </svg>
  </span>
                            <span class="filter__header-title flex-grow">
    {{ _e('Severity', 'postsync') }}
  </span>
                        </div>
                        <div id="severity-levels" class="filter__item-content checkbox__content" style="display: none">
                            <div class="flex items-center mb-2">
                                <input id="severity-error" type="checkbox" value="error"
                                       class="input__checkbox severity__checkbox w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-transparent focus:ring-0">
                                <label for="severity-error"
                                       class="ml-2 text-gray-900 flex justify-between items-center"><span
                                            class="mr-1 block rounded-full w-2 h-2 bg-red-500"></span> {{ _e("Error", "postsync") }}
                                </label>
                            </div>
                            <div class="flex items-center mb-2">
                                <input id="severity-warning" type="checkbox" value="warning"
                                       class="input__checkbox severity__checkbox w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-transparent focus:ring-0">
                                <label for="severity-warning"
                                       class="ml-2 text-gray-900 flex justify-between items-center"><span
                                            class="mr-1 block rounded-full w-2 h-2 bg-amber-500"></span> {{ _e("Warning", "postsync") }}
                                </label>
                            </div>
                            <div class="flex items-center mb-2">
                                <input id="severity-info" type="checkbox" value="info"
                                       class="input__checkbox severity__checkbox w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-transparent focus:ring-0">
                                <label for="severity-info" class="ml-2 text-gray-900 flex justify-between items-center"><span
                                            class="mr-1 block rounded-full w-2 h-2 bg-blue-500"></span> {{ _e("Info", "postsync") }}
                                </label>
                            </div>
                            <div class="flex items-center">
                                <input id="severity-debug" type="checkbox" value="debug"
                                       class="input__checkbox severity__checkbox w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-transparent focus:ring-0">
                                <label for="severity-debug"
                                       class="ml-2 text-gray-900 flex justify-between items-center"><span
                                            class="mr-1 block rounded-full w-2 h-2 bg-gray-500"></span> {{ _e("Debug", "postsync") }}
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="filter__item">
                        <div class="filter__item-header flex items-center" data-toggle="category-items">
  <span class="filter__header-icon mr-2">
    <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
    </svg>
  </span>
                            <span class="filter__header-title flex-grow">
    {{ _e('Category', 'postsync') }}
  </span>
                        </div>
                        <div id="category-items" class="filter__item-content checkbox__content" style="display: none">
                            <div class="flex items-center mb-2">
                                <input id="category-rest" type="checkbox" value="wp rest"
                                       class="input__checkbox category__checkbox w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-transparent focus:ring-0">
                                <label for="category-rest"
                                       class="ml-2 text-gray-900 flex justify-between items-center">{{ _e("WP REST", "postsync") }}</label>
                            </div>
                            <div class="flex items-center mb-2">
                                <input id="category-authentication" type="checkbox" value="authentication"
                                       class="input__checkbox category__checkbox w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-transparent focus:ring-0">
                                <label for="category-authentication"
                                       class="ml-2 text-gray-900 flex justify-between items-center">{{ _e("Authentication", "postsync") }}</label>
                            </div>
                            <div class="flex items-center mb-2">
                                <input id="category-sync" type="checkbox" value="sync"
                                       class="input__checkbox category__checkbox w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-transparent focus:ring-0">
                                <label for="category-sync"
                                       class="ml-2 text-gray-900 flex justify-between items-center">{{ _e("Sync", "postsync") }}</label>
                            </div>
                            <div class="flex items-center mb-2">
                                <input id="category-settings" type="checkbox" value="settings"
                                       class="input__checkbox category__checkbox w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-transparent focus:ring-0">
                                <label for="category-settings"
                                       class="ml-2 text-gray-900 flex justify-between items-center">{{ _e("Settings", "postsync") }}</label>
                            </div>
                            <div class="flex items-center">
                                <input id="category-uncategorized" type="checkbox" value="uncategorized"
                                       class="input__checkbox category__checkbox w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-transparent focus:ring-0">
                                <label for="category-uncategorized"
                                       class="ml-2 text-gray-900 flex justify-between items-center">{{ _e("Uncategorized", "postsync") }}</label>
                            </div>
                        </div>
                    </div>
                    <div class="filter__item">
                        <div class="filter__item-header flex items-center" data-toggle="source-items">
  <span class="filter__header-icon mr-2">
    <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
    </svg>
  </span>
                            <span class="filter__header-title flex-grow">
    {{ _e('Source', 'postsync') }}
  </span>
                        </div>
                        <div id="source-items" class="filter__item-content checkbox__content" style="display: none">
                            <div class="flex items-center mb-2">
                                <input id="source-order" type="checkbox" value="OrderApi"
                                       class="input__checkbox source__checkbox w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-transparent focus:ring-0">
                                <label for="source-order"
                                       class="ml-2 text-gray-900 flex justify-between items-center">{{ _e("Order API", "postsync") }}</label>
                            </div>
                            <div class="flex items-center mb-2">
                                <input id="source-cart" type="checkbox" value="CartApi"
                                       class="input__checkbox source__checkbox w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-transparent focus:ring-0">
                                <label for="source-cart"
                                       class="ml-2 text-gray-900 flex justify-between items-center">{{ _e("Cart API", "postsync") }}</label>
                            </div>
                            <div class="flex items-center mb-2">
                                <input id="source-map" type="checkbox" value="MapApi"
                                       class="input__checkbox source__checkbox w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-transparent focus:ring-0">
                                <label for="source-map"
                                       class="ml-2 text-gray-900 flex justify-between items-center">{{ _e("Map API", "postsync") }}</label>
                            </div>
                            <div class="flex items-center mb-2">
                                <input id="source-manage" type="checkbox" value="ManageApi"
                                       class="input__checkbox source__checkbox w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-transparent focus:ring-0">
                                <label for="source-manage"
                                       class="ml-2 text-gray-900 flex justify-between items-center">{{ _e("Manage API", "postsync") }}</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- LOGS -->
        <div class="column">
            <div class="content-box">
                <span class="box-header-title flex items-center">
  <span class="box-header-icon mr-2">
    <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
    </svg>
  </span>
  <span>{{ _e('Logs', 'postsync') }}</span>
</span>
                <div class="box-content table-content">
                    <div class="overflow-x-auto relative">
                        <table class="w-full text-left">
                            <thead class="text-xs text-gray-700 uppercase bg-slate-50 border-gray-100 border-b">
                            <tr>
                                <th scope="col" class="p-3"></th>
                                <th scope="col" class="p-3">
                                    {{ _e("Title", "postsync") }}
                                </th>
                                <th scope="col" class="p-3 w-6/12">
                                    {{ _e("Message", "postsync") }}
                                </th>
                                <th scope="col" class="p-3 text-center">
                                    {{ _e("Category", "postsync") }}
                                </th>
                                <th scope="col" class="p-3">
                                    {{ _e("Timestamp", "postsync") }}
                                </th>
                            </tr>
                            </thead>
                            <tbody id="log-row-container">
                            <tr class="table__log-loading animate-pulse hidden">
                                <td class="py-4 px-3">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3 font-medium whitespace-nowrap w-64">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3 w-6/12">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3 text-center">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                            </tr>
                            <tr class="table__log-loading animate-pulse hidden">
                                <td class="py-4 px-3">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3 font-medium whitespace-nowrap w-64">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3 w-6/12">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3 text-center">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                            </tr>
                            <tr class="table__log-loading animate-pulse hidden">
                                <td class="py-4 px-3">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3 font-medium whitespace-nowrap w-64">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3 w-6/12">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3 text-center">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                            </tr>
                            <tr class="table__log-loading animate-pulse hidden">
                                <td class="py-4 px-3">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3 font-medium whitespace-nowrap w-64">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3 w-6/12">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3 text-center">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                            </tr>
                            <tr class="table__log-loading animate-pulse hidden">
                                <td class="py-4 px-3">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3 font-medium whitespace-nowrap w-64">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3 w-6/12">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3 text-center">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                                <td class="py-4 px-3">
                                    <div class="rounded-full w-full h-3 bg-slate-100"></div>
                                </td>
                            </tr>
                            {% if logs is not empty %}
                                {% for index, log in logs %}
                                    <tr class="table__log-row" data-row="{{ index }}">
                                        <td class="py-4 px-3">
                                            {% if log.getSeverity() == 'error' %}
                                                <span class="block rounded-full w-2 h-2 bg-red-500"></span>
                                            {% elseif log.getSeverity() == 'warning' %}
                                                <span class="block rounded-full w-2 h-2 bg-amber-500"></span>
                                            {% elseif log.getSeverity() == 'info' %}
                                                <span class="block rounded-full w-2 h-2 bg-blue-500"></span>
                                            {% elseif log.getSeverity() == 'debug' %}
                                                <span class="block rounded-full w-2 h-2 bg-gray-500"></span>
                                            {% endif %}
                                        </td>
                                        <td class="py-4 px-3 font-medium whitespace-nowrap w-64">
                                            <a
                                                    class="log__row-link align-top text-blue-400 hover:text-blue-500 text-sm truncate w-64 block transition-all ease-in-out duration-300"
                                                    title="{{ log.getTitle() }}"
                                                    data-index="{{ index }}"
                                            >
                                                {{ log.getTitle() }}
                                            </a>
                                        </td>
                                        <td class="py-4 px-3 w-6/12">
                                            <code id="message-block-{{ index }}"
                                                  class="table__message message__fade w-full rounded block text-xs max-h-[50px]">
                                                <span class="block text-gray-900"><span
                                                            class="font-bold text-yellow-500">timestamp:</span> {{ log.getTimestampISO() }}</span>
                                                <span class="block text-gray-900">
                                                    <span class="font-bold text-yellow-500">severity:</span>
                                                    {% if log.getSeverity() == 'error' %}
                                                        <span class="bg-red-100">error</span>
                                                    {% elseif log.getSeverity() == 'warning' %}
                                                        <span class="bg-amber-100">warning</span>
                                                    {% elseif log.getSeverity() == 'info' %}
                                                        <span class="bg-blue-100">info</span>
                                                    {% elseif log.getSeverity() == 'debug' %}
                                                        <span class="bg-debug-100">debug</span>
                                                    {% endif %}
                                                </span>
                                                <span class="block text-gray-900"><span
                                                            class="font-bold text-yellow-500">message:</span> {{ log.getMessage() }}</span>
                                                <span class="block text-gray-900"><span
                                                            class="font-bold text-yellow-500">source:</span> {{ log.getSource() }}</span>
                                                <span class="block text-gray-900 max-w-[40vw]">
                                                    <span class="font-bold text-yellow-500">metadata:</span>
                                                    <pre id="metadata-{{ index }}" class="message__data"
                                                         data-original='{{ function('json_encode', log.getMetadata()) }}'>{{ function('json_encode', log.getMetadata()) }}</pre>
                                                    <button type="button" class="format__data-button"
                                                            data-toggle="metadata-{{ index }}">{{ _e('Toggle format', 'postsync') }}</button>
                                                </span>
                                                <span class="block text-gray-900 max-w-[40vw]">
                                                    <span class="font-bold text-yellow-500">data:</span>
                                                    <pre id="data-{{ index }}" class="message__data"
                                                         data-original='{{ log.getData(true) }}'>{{ log.getData(true) }}</pre>
                                                    <button type="button" class="format__data-button"
                                                            data-toggle="data-{{ index }}">{{ _e('Toggle format', 'postsync') }}</button>
                                                </span>
                                            </code>
                                        </td>
                                        <td class="py-4 px-3 text-center">
                                            <span class="bg-slate-100 text-slate-500 text-xs p-2 rounded font-medium uppercase">{{ log.getCategory() }}</span>
                                        </td>
                                        <td class="py-4 px-3">
                                            {{ log.getTimestamp().format("d-m-Y H:i:s") }}
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% endif %}
                            </tbody>
                        </table>
                        <div id="no-logs-notification" class="no__logs-found hidden">
                            <p>{{ _e('No logs have been found', 'postsync') }}</p>
                        </div>
                        <div class="block__body-options w-full flex items-center justify-between p-4 text-gray-600">
                            <div class="body__options-left">
                                <p>{{ _e('Total', 'postsync') }} <span id="logs-filter-count">{{ count }}</span></p>
                            </div>
                            <div class="body__options-right flex justify-start items-center">
                                <select id="logger-per-page">
                                    <option value="10">{{ _e('10 per page', 'postsync') }}</option>
                                    <option value="20">{{ _e('20 per page', 'postsync') }}</option>
                                    <option value="50">{{ _e('50 per page', 'postsync') }}</option>
                                    <option value="100">{{ _e('100 per page', 'postsync') }}</option>
                                </select>
                                <div id="log-pagination-list"
                                     class="option__right-pagination flex justify-between items-center w-52 ml-5">
                                    <button
                                            type="button"
                                            id="overview-pagination-left"
                                            class="flex justify-center items-center transition ease-in-out duration-300 w-6 h-6 rounded-full hover:bg-slate-200"
                                    >
                                        <svg aria-hidden="true" class="w-3 h-3 mr-1 -ml-1" fill="currentColor"
                                             viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd"
                                                  d="M10.293 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H18a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
                                                  clip-rule="evenodd"></path>
                                        </svg>
                                    </button>
                                    <button
                                            data-page="1"
                                            type="button"
                                            class="pagination__page-btn selected flex justify-center items-center text-blue-500 transition ease-in-out duration-300 w-6 h-6 rounded-full hover:bg-slate-200"
                                    >
                                        1
                                    </button>
                                    {% if pages > 1 %}
                                        <button
                                                data-page="2"
                                                type="button"
                                                class="pagination__page-btn flex justify-center items-center text-blue-500 transition ease-in-out duration-300 w-6 h-6 rounded-full hover:bg-slate-200"
                                        >
                                            2
                                        </button>
                                    {% endif %}
                                    {% if pages > 2 %}
                                        <button
                                                data-page="3"
                                                type="button"
                                                class="pagination__page-btn flex justify-center items-center text-blue-500 transition ease-in-out duration-300 w-6 h-6 rounded-full hover:bg-slate-200"
                                        >
                                            3
                                        </button>
                                    {% endif %}
                                    {% if pages > 3 %}
                                        <span>...</span>
                                        <button
                                                data-page="{{ pages }}"
                                                type="button"
                                                class="pagination__page-btn flex justify-center items-center text-blue-500 transition ease-in-out duration-300 w-6 h-6 rounded-full hover:bg-slate-200"
                                        >
                                            {{ pages }}
                                        </button>
                                    {% endif %}
                                    <button
                                            type="button"
                                            id="overview-pagination-right"
                                            class="flex justify-center items-center transition ease-in-out duration-300 w-6 h-6 rounded-full hover:bg-slate-200"
                                    >
                                        <svg aria-hidden="true" class="w-3 h-3 ml-1 -mr-1" fill="currentColor"
                                             viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd"
                                                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                                                  clip-rule="evenodd"></path>
                                        </svg>
                                    </button>

                                    <input type="hidden" id="pagination-max-pages" value="{{ pages }}"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}