{namespace vh=Newland\NeosViewHelpers\ViewHelpers}
{namespace sync=Newland\Toubiz\Sync\Neos\ViewHelpers}

<div class="tb-backend">
    <div class="flex justify-between">
        <div>
            <vh:render section="typeMenu" arguments="{_all}" />
        </div>
        <div>
            <vh:render section="languageMenu" arguments="{_all}" />
        </div>
    </div>

    <details class="mb-8 mt-8">
        <summary class="text-xl font-bold">Filter</summary>
        <vh:render renderable="{filter}" />
    </details>

    <vh:render section="itemTable" arguments="{_all}" />

    <vh:render section="pagination" arguments="{_all}" />
</div>

<f:section name="languageMenu">
    <f:for each="{languages}" as="lang">
        <f:link.action
            action="index"
            arguments="{ language: lang, type: type }"
            class="neos-button {f:if(condition: '{lang} == {language}', then: 'neos-button-primary')}"
        >
            {lang}
        </f:link.action>
    </f:for>
</f:section>

<f:section name="typeMenu">
    <f:for each="{types}" as="t">
        <sync:link.backendAction
            action="index"
            arguments="{ type: t, language: language }"
            class="neos-button {f:if(condition: '{type} == {t}', then: 'neos-button-primary')}"
        >
            <f:translate id="types.{t}" package="Newland.Toubiz.Sync.Neos" source="Views/Configuration"/>
        </sync:link.backendAction>
    </f:for>
</f:section>

<f:section name="itemTable">
    <table class="neos-table">
        <f:for each="{items}" as="item">
            <tr>
                <f:for each="{item.actions}" as="action" key="actionKey">
                    <td class="neos-action">
                        <f:form
                            action="run"
                            method="POST"
                            arguments="{
                                actionKey: actionKey,
                                type: type,
                                itemType: item.entityType,
                                itemId: item.entity.persistenceObjectIdentifier
                            }">
                            <button type="submit" title="{action.name}" class="border-r-4 border-0 border-solid border-{action.color}">
                                <i class="{action.icon}"></i>
                            </button>
                        </f:form>
                    </td>
                </f:for>

                <f:for each="{item.tableCells}" as="cell">
                    <td>{cell -> f:format.raw()}</td>
                </f:for>
            </tr>
        </f:for>
    </table>
</f:section>

<f:section name="pagination">
    <div class="flex justify-end mb-1">
        {pageBounds.0 -> f:format.number(decimals: 0, thousandsSeparator: '.')}
        -
        {pageBounds.1 -> f:format.number(decimals: 0, thousandsSeparator: '.')}
        von
        {total -> f:format.number(decimals: 0, thousandsSeparator: '.')}
    </div>
    <div class="flex justify-center">
        <f:link.action
            action="index"
            arguments="{ page: '{page - 1}', type: type, language: language }"
            class="neos-button neos-button-primary"
        >
            <i class="fas fa-caret-left"></i>
        </f:link.action>
        <f:form action="index" class="mx-4">
            <f:form.textfield type="hidden" value="{type}" name="type" />
            <f:form.textfield type="number" value="{page}" name="page" />
            /
            {lastPage}
        </f:form>
        <f:link.action
            action="index"
            arguments="{ page: '{page + 1}', type: type, language: language }"
            class="neos-button neos-button-primary"
        >
            <i class="fas fa-caret-right"></i>
        </f:link.action>
    </div>
</f:section>

<script>
const clipboardButtons = document.querySelectorAll('span[data-copy-to-clipboard]');
console.log(clipboardButtons);
for (let i = 0; i < clipboardButtons.length; i++) {
    clipboardButtons[ i ].addEventListener(
        'click',
        () => {
            const clipboardButton = clipboardButtons[ i ];
            const data = clipboardButton.dataset.copyToClipboardContent;
            navigator.clipboard.writeText(data);
        },
    );
}
</script>