{% extends 'Admin/base.html.twig' %}

{% block title %}{{ 'app.admin.pages.webhook.head_title'|trans }}{% endblock %}

{% block toolbar_actions %}
	{% include 'Includes/Button/add.html.twig'%}
{% endblock %}

{% block search %}
	{% include 'Search/list.html.twig' %}
{% endblock %}

{% block component_body %}
    <div class="card card-flush">
        <div class="card-body pt-0">
            <div class="table-responsive">
                <table class="table table-row-bordered table-row-dashed gy-4 align-middle fw-bold tab-copy-keys">
                    <thead>
                        <tr>
                            <th class="ps-4 min-w-100px rounded-start">{{ 'app.admin.pages.webhook.list.source'|trans }}</th>
                            <th class="min-w-200px">{{ 'app.admin.pages.webhook.list.object'|trans }}</th>
                            <th class="min-w-250px">{{ 'app.admin.pages.webhook.list.endpoints'|trans }}</th>
                            <th class="min-w-125px text-center">{{ 'app.admin.pages.webhook.list.retries'|trans }}</th>
                            <th class="min-w-50px">{{ 'app.admin.pages.webhook.list.events'|trans }}</th>
                            <th class="min-w-50px">{{ 'app.admin.pages.webhook.list.hmacKey'|trans }}</th>
                            <th class="text-end"></th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for webhook in webhooks %}
                        {% set colors = ['primary', 'success', 'danger', 'warning', 'info', 'dark'] %}
                        <tr class="copy-key-parent">
                            <td class="ps-4">
                                <span class="text-dark text-hover-primary d-block fs-6">{{ webhook.source }}</span>
                            </td>
                            <td class="ps-4">
                                {% set object = 'app.admin.pages.webhook.object.' ~ webhook.object  %}
                                <span class="badge bg-{{ random(colors) }}">{{ object|trans }}</span>
                            </td>
                            <td nowrap>
                                {% for endpoint in webhook.endpoints %}
                                    <span class="text-dark text-hover-primary d-block fs-6"><li>{{ endpoint.endpoint }}</li></span>
                                {% endfor %}
                            </td>
                            <td class="text-center">
                                <span class="text-dark text-hover-primary d-block fs-6">{{ webhook.retries }}</span>
                            </td>
                            <td>
                                {% for ev in webhook.events %}
                                    {% set state = 'app.admin.pages.webhook.states.' ~ ev %}
                                    <span class="text-dark text-hover-primary fs-6">{{ state|trans|badge('primary')}}</span>
                                {% endfor %}
                            </td>
                            <td class="text-center">
                                <span class="text-dark text-hover-primary d-inline fs-6">*****</span>
                                <span class="d-none" data-bs-target="key">{{ webhook.hmacKey }}</span>
                            </td>
                            <td class="text-end">
                                <div class="d-flex justify-content-end flex-shrink-0">
                                    <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'app.global.buttons.copy_hmac_key'|trans }}">{{ btn('copy') }}</span>
                                    {{ link('edit','modal', 'success', {'entity-id' : webhook.id, 'entity-name' : webhook.source, 'modalId': 'foxorders_modal_form_admin' }) }}
                                    {% include 'Includes/delete.html.twig' with {
                                        'route':path('foxorders_admin_webhook_delete', {'id': webhook.id}) ,
                                        'token': csrf_token('delete' ~ webhook.id),
                                        'button': 'list_delete'} %}
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="5" style='color:orange'>{{ 'app.global.detail.no_record_found'|trans }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            {% include 'List/pagination.html.twig' with { 'data' : webhooks } %}
        </div>
    </div>
{% endblock %}

{% block modals %}
    {% include 'Modal/form.html.twig' with {
        'title': 'app.admin.pages.webhook.new.title'|trans,
        'id': 'admin',
    } %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        var translations = {
            "source": '{{ 'app.global.validation.webhook.source'|trans }}',
            "events": '{{ 'app.global.validation.webhook.events'|trans }}',
            "object": '{{ 'app.global.validation.webhook.object'|trans }}',
            "endpoint": {
                'empty': '{{ 'app.global.validation.webhook.endpoint.empty'|trans }}',
                'valid': '{{ 'app.global.validation.webhook.endpoint.valid'|trans }}',
            },
            "retries": {
                'empty': '{{ 'app.global.validation.webhook.retries.empty'|trans }}',
                'valid': '{{ 'app.global.validation.webhook.retries.valid'|trans }}',
            },
            "modal": {
                'add': '{{ 'app.admin.pages.webhook.new.title'|trans }}',
                'edit': '{{ 'app.admin.pages.webhook.edit.title'|trans }}',
            }
        }
    </script>
    <script src="{{asset('foxorders/js/validation/rules/admin/webhooks.js') }}"></script>
    <script src="{{asset('foxorders/js/admin/webhooks.js') }}"></script>
	<script src="{{asset('foxorders/js/global/copy-keys.js') }}"></script>
{% endblock %}