{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<div class="tb-backend">
    <vh:render section="typeMenuBar" arguments="{_all}" />

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

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

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

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

<f:section name="articleTable">
    <table class="neos-table">
        <tr>
            <th></th>
            <th>ID</th>
            <th>Type</th>
            <th>Name</th>
        </tr>
        <f:for each="{articles}" as="article">
            <tr>
                <td class="neos-action">
                    <f:form action="toggleHidden" method="POST" arguments="{ article: article }">
                        <button
                            type="submit"
                            title="{f:if(condition: article.hidden, then: 'anzeigen', else: 'verbergen')}"
                            class="border-r-4 border-solid border-0
                                {f:if(condition: article.hidden, then: 'border-red', else: 'border-green')}"
                        >
                            <i class="fas fa-eye{f:if(condition: article.hidden, then: '-slash')}"></i>
                        </button>
                    </f:form>
                </td>
                <td>
                    <small class="text-grey">
                        {article.originalId}
                    </small>
                </td>
                <td>
                    <span class="neos-badge">
                    {article.humanReadableMainType}
                    </span>
                </td>
                <td>
                    {article.name}
                </td>
            </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}', articleType: articleType }"
            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="{articleType}" name="articleType" />
            <f:form.textfield type="number" value="{page}" name="page" />
            /
            {lastPage}
        </f:form>
        <f:link.action
            action="index"
            arguments="{ page: '{page + 1}', articleType: articleType }"
            class="neos-button neos-button-primary"
        >
            <i class="fas fa-caret-right"></i>
        </f:link.action>
    </div>
</f:section>