<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers"
    xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
    data-namespace-typo3-fluid="true"
>
<f:layout name="Module" />

<f:section name="Content">
    <f:asset.module identifier="@typo3/backend/context-menu.js"/>
    <f:asset.module identifier="@typo3/backend/modal.js"/>
    <f:asset.module identifier="@typo3/backend/multi-record-selection.js"/>
    <f:asset.module identifier="@typo3/backend/multi-record-selection-edit-action.js"/>
    <f:asset.module identifier="@typo3/backend/multi-record-selection-delete-action.js"/>

    <h1><f:translate key="LLL:EXT:reactions/Resources/Private/Language/locallang_module_reactions.xlf:heading_text"/></h1>
    <f:variable
        name="returnUrl"
        value="{f:be.uri(route:'system_reactions')}"
    />
    <f:if condition="{paginator.paginatedItems -> f:count()}">
        <f:then>
            <f:render section="filter" arguments="{_all}" />
            <f:render section="table" arguments="{_all}" />
        </f:then>
        <f:else>
            <f:if condition="{demand.constraints}">
                <f:then>
                    <f:render section="filter" arguments="{_all}" />
                    <f:be.infobox state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_NOTICE')}" title="{f:translate(key: 'LLL:EXT:reactions/Resources/Private/Language/locallang_module_reactions.xlf:reaction_not_found_with_filter.title')}">
                        <p><f:translate key="LLL:EXT:reactions/Resources/Private/Language/locallang_module_reactions.xlf:reaction_not_found_with_filter.message"/></p>
                        <a class="btn btn-default" href="{f:be.uri(route:'system_reactions')}">
                            <f:translate key="LLL:EXT:reactions/Resources/Private/Language/locallang_module_reactions.xlf:reaction_no_filter"/>
                        </a>
                        <be:link.newRecord returnUrl="{returnUrl}" class="btn btn-primary" table="sys_reaction">
                            <f:translate key="LLL:EXT:reactions/Resources/Private/Language/locallang_module_reactions.xlf:reaction_create"/>
                        </be:link.newRecord>
                    </f:be.infobox>

                    <f:variable name="gotToPageUrl"><f:be.uri route="system_reactions" parameters="{demand: demand.parameters, page: 987654322}" /></f:variable>
                    <form data-on-submit="processNavigate">
                        <input type="hidden" value="1" name="paginator-target-page" data-number-of-pages="1" data-url="{gotToPageUrl}"/>
                    </form>
                </f:then>
                <f:else>
                    <f:be.infobox state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_INFO')}" title="{f:translate(key: 'LLL:EXT:reactions/Resources/Private/Language/locallang_module_reactions.xlf:reaction_not_found.title')}">
                        <p><f:translate key="LLL:EXT:reactions/Resources/Private/Language/locallang_module_reactions.xlf:reaction_not_found.message"/></p>
                        <be:link.newRecord returnUrl="{returnUrl}" class="btn btn-primary" table="sys_reaction">
                            <f:translate key="LLL:EXT:reactions/Resources/Private/Language/locallang_module_reactions.xlf:reaction_create"/>
                        </be:link.newRecord>
                    </f:be.infobox>
                </f:else>
            </f:if>
        </f:else>
    </f:if>
</f:section>

<f:section name="table">
    <f:comment>Partial is used from EXT:backend/Resources/Private/Partials/MultiRecordSelection/Actions.html</f:comment>
    <f:render partial="MultiRecordSelection/Actions" arguments="{actions: actions}"/>
    <div class="table-fit mb-0">
        <table class="table table-striped table-hover">
            <thead>
            <tr>
                <th class="col-checkbox">
                    <div class="btn-group dropdown">
                        <button type="button" class="dropdown-toggle dropdown-toggle-link t3js-multi-record-selection-check-actions-toggle" data-bs-toggle="dropdown" data-bs-boundary="window" aria-expanded="false" aria-label="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.openSelectionOptions')}">
                            <core:icon identifier="actions-selection" size="small" />
                        </button>
                        <ul class="dropdown-menu t3js-multi-record-selection-check-actions">
                            <li>
                                <button type="button" class="dropdown-item" disabled="disabled" data-multi-record-selection-check-action="check-all" title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.checkAll')}">
                                    <span class="dropdown-item-columns">
                                        <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden="true">
                                            <core:icon identifier="actions-selection-elements-all" size="small" />
                                        </span>
                                        <span class="dropdown-item-column dropdown-item-column-title">
                                            <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.checkAll" />
                                        </span>
                                    </span>
                                </button>
                            </li>
                            <li>
                                <button type="button" class="dropdown-item" disabled="disabled" data-multi-record-selection-check-action="check-none" title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.uncheckAll')}">
                                    <span class="dropdown-item-columns">
                                        <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden="true">
                                            <core:icon identifier="actions-selection-elements-none" size="small" />
                                        </span>
                                        <span class="dropdown-item-column dropdown-item-column-title">
                                            <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.uncheckAll" />
                                        </span>
                                    </span>
                                </button>
                            </li>
                            <li>
                                <button type="button" class="dropdown-item" data-multi-record-selection-check-action="toggle" title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.toggleSelection')}">
                                    <span class="dropdown-item-columns">
                                        <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden="true">
                                            <core:icon identifier="actions-selection-elements-invert" size="small" />
                                        </span>
                                        <span class="dropdown-item-column dropdown-item-column-title">
                                            <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.toggleSelection" />
                                        </span>
                                    </span>
                                </button>
                            </li>
                        </ul>
                    </div>
                </th>
                <th colspan="2"><f:render section="listHeaderSorting" arguments="{field: 'name', label: 'sys_reaction.name', demand: demand}"/></th>
                <th><f:render section="listHeaderSorting" arguments="{field: 'reaction_type', label: 'sys_reaction.reaction_type', demand: demand}"/></th>
                <th>URL</th>
                <th class="col-control"></th>
            </tr>
            </thead>
            <tbody data-multi-record-selection-row-selection="true">
            <f:for each="{paginator.paginatedItems}" key="reactionId" as="reaction">
                <f:variable name="reactionRecord" value="{reaction as array}"/>
                <tr data-uid="{reaction.uid}" data-multi-record-selection-element="true">
                    <td class="col-checkbox">
                        <span class="form-check form-check-type-toggle">
                            <input class="form-check-input t3js-multi-record-selection-check" type="checkbox">
                        </span>
                    </td>
                    <f:if condition="{reactionTypes.{reaction.type}}">
                        <f:then>
                            <td class="col-icon">
                                <button
                                    type="button"
                                    class="btn btn-link"
                                    data-contextmenu-trigger="click"
                                    data-contextmenu-table="sys_reaction"
                                    data-contextmenu-uid="{reaction.uid}"
                                    title="{reaction.name}"
                                    aria-label="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.contextMenu.open')}"
                                >
                                    <core:iconForRecord table="sys_reaction" row="{reactionRecord}" />
                                </button>
                            </td>
                            <td>
                                <be:link.editRecord
                                    returnUrl="{returnUrl}"
                                    table="sys_reaction"
                                    uid="{reaction.uid}"
                                    title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_mod_web_list.xlf:edit')}: {reaction.name}"
                                >
                                    {reaction.name}
                                </be:link.editRecord>
                            </td>
                            <td>
                                <f:translate key="{reactionTypes.{reaction.type}.description}" default="{reactionTypes.{reaction.type}.description}"/>
                            </td>
                            <td>
                                <f:render section="codesnippet" arguments="{reaction: reaction}" />
                            </td>
                            <td class="col-control">
                                <f:render section="controls" arguments="{_all}" />
                            </td>
                        </f:then>
                        <f:else>
                            <td class="col-icon">
                                <core:iconForRecord table="sys_reaction" row="{reactionRecord}" />
                            </td>
                            <td>
                                {reaction.name}
                            </td>
                            <td colspan="2">
                                <span class="badge badge-danger">
                                    <f:translate key="LLL:EXT:reactions/Resources/Private/Language/locallang_module_reactions.xlf:reaction_no_implementation_class" arguments="{0: reaction.type}" />
                                </span>
                            </td>
                            <td class="col-control">
                                <f:render section="controls" arguments="{_all}" />
                            </td>
                        </f:else>
                    </f:if>
                </tr>
            </f:for>
            </tbody>
        </table>
    </div>
    <f:render partial="MultiRecordSelection/Actions" arguments="{actions: actions}"/>
    <f:render partial="Pagination" arguments="{_all}" />
</f:section>

<f:section name="listHeaderSorting">
    <div class="dropdown dropdown-static">
        <button class="dropdown-toggle dropdown-toggle-link" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <f:translate key="LLL:EXT:reactions/Resources/Private/Language/locallang_db.xlf:{label}"/>
            <f:if condition="{demand.orderField} === {field}">
                <f:then>
                    <div class="text-primary">
                        <f:if condition="{demand.orderDirection} === asc">
                            <f:then>
                                <core:icon identifier="actions-sort-amount-up" />
                            </f:then>
                            <f:else>
                                <core:icon identifier="actions-sort-amount-down" />
                            </f:else>
                        </f:if>
                    </div>
                </f:then>
                <f:else>
                    <div>
                        <core:icon identifier="empty-empty" />
                    </div>
                </f:else>
            </f:if>
        </button>
        <ul class="dropdown-menu">
            <li>
                <a
                    class="dropdown-item"
                    href="{f:be.uri(route:'system_reactions', parameters: '{demand: demand.parameters, orderField: field, orderDirection: demand.defaultOrderDirection}')}"
                    title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.sorting.asc')}"
                    aria-label="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.sorting.asc')}"
                >
                    <span class="dropdown-item-columns">
                        <span class="dropdown-item-column dropdown-item-column-icon text-primary">
                            <f:if condition="{demand.orderField} === {field}">
                                <f:if condition="{demand.orderDirection} === asc">
                                    <core:icon identifier="actions-dot" />
                                </f:if>
                            </f:if>
                        </span>
                        <span class="dropdown-item-column dropdown-item-column-title">
                            {f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.sorting.asc')}
                        </span>
                    </span>
                </a>
            </li>
            <li>
                <a
                    class="dropdown-item"
                    href="{f:be.uri(route:'system_reactions', parameters: '{demand: demand.parameters, orderField: field, orderDirection: demand.reverseOrderDirection}')}"
                    title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.sorting.desc')}"
                    aria-label="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.sorting.desc')}"
                >
                    <span class="dropdown-item-columns">
                        <span class="dropdown-item-column dropdown-item-column-icon text-primary">
                            <f:if condition="{demand.orderField} === {field}">
                                <f:if condition="{demand.orderDirection} === desc">
                                    <core:icon identifier="actions-dot" />
                                </f:if>
                            </f:if>
                        </span>
                        <span class="dropdown-item-column dropdown-item-column-title">
                            {f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.sorting.desc')}
                        </span>
                    </span>
                </a>
            </li>
        </ul>
    </div>
</f:section>

<f:section name="filter">
    <form action="{f:be.uri(route:'system_reactions')}" method="post" enctype="multipart/form-data" name="demand">
        <input type="hidden" name="orderField" value="{demand.orderField}">
        <input type="hidden" name="orderDirection" value="{demand.orderDirection}">
        <div class="form-row">
            <div class="form-group">
                <label for="demand-name" class="form-label"><f:translate key="LLL:EXT:reactions/Resources/Private/Language/locallang_module_reactions.xlf:filter.name"/></label>
                <input type="text" id="demand-name" class="form-control" name="demand[name]" value="{demand.name}"/>
            </div>
            <div class="form-group">
                <label for="demand-reaction-type" class="form-label"><f:translate key="LLL:EXT:reactions/Resources/Private/Language/locallang_module_reactions.xlf:filter.reaction_type"/></label>
                <select id="demand-reaction-type" class="form-select" name="demand[reaction_type]" data-on-change="submit">
                    <option value=""><f:translate key="LLL:EXT:reactions/Resources/Private/Language/locallang_module_reactions.xlf:filter.reaction_type.showAll"/></option>
                    <f:for each="{reactionTypes}" key="type" as="reaction">
                        <option value="{type}" {f:if(condition: '{type} == {demand.reactionType}', then: 'selected')}>
                            <f:translate key="{reaction.description}" default="{reaction.description}"/>
                        </option>
                    </f:for>
                </select>
            </div>
            <div class="form-group align-self-end">
                <input type="submit" value="{f:translate(key: 'LLL:EXT:reactions/Resources/Private/Language/locallang_module_reactions.xlf:filter.sendButton')}" class="btn btn-default" />
                <a href="{f:be.uri(route:'system_reactions')}" class="btn btn-link"><f:translate key="LLL:EXT:reactions/Resources/Private/Language/locallang_module_reactions.xlf:filter.resetButton"/></a>
            </div>
        </div>
    </form>
</f:section>

<f:section name="codesnippet">
    <code class="my-1 p-2 me-2 bg-dark text-bg-primary">
        <f:be.uri route="reaction" referenceType="url" />/{reaction.identifier}
    </code>
    <button type="button" class="btn btn-default" data-bs-target="#codesnippet-{reaction.identifier}" data-bs-toggle="collapse">
        <f:translate key="LLL:EXT:reactions/Resources/Private/Language/locallang_module_reactions.xlf:reaction_example" />
    </button>
    <div class="collapse" id="codesnippet-{reaction.identifier}">
<pre class="my-1 p-2 bg-dark text-bg-primary">
<code><span>curl -X </span><span class="text-info">'POST'</span><span> \</span><span>
    </span><span class="text-info">'<f:be.uri route="reaction" referenceType="url" />/{reaction.identifier}'</span><span> \</span>
    <span>  -d </span><span class="text-info">'{"my-payload":"my-value","field-b":"my-input"}'</span><span> \</span>
    <span>  -H </span><span class="text-info">'accept: application/json'</span><span> \</span>
    <span>  -H </span><span class="text-info">'x-api-key: ***your-secret***'</span>
</code></pre>
    </div>
</f:section>

<f:section name="controls">
    <div class="btn-group">
        <be:link.editRecord
            returnUrl="{returnUrl}"
            class="btn btn-default"
            table="sys_reaction"
            uid="{reaction.uid}"
            title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_mod_web_list.xlf:edit')}"
        >
            <core:icon identifier="actions-open" />
        </be:link.editRecord>
        <f:if condition="{reactionRecord.disabled} == 1">
            <f:then>
                <a
                    class="btn btn-default"
                    href="{be:moduleLink(route:'tce_db', query:'data[sys_reaction][{reaction.uid}][disabled]=0', arguments:'{redirect: returnUrl}')}"
                    title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_mod_web_list.xlf:unHide')}"
                >
                    <core:icon identifier="actions-edit-unhide" />
                </a>
            </f:then>
            <f:else>
                <a
                    class="btn btn-default"
                    href="{be:moduleLink(route:'tce_db', query:'data[sys_reaction][{reaction.uid}][disabled]=1', arguments:'{redirect: returnUrl}')}"
                    title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_mod_web_list.xlf:hide')}"
                >
                    <core:icon identifier="actions-edit-hide" />
                </a>
            </f:else>
        </f:if>
        <a class="btn btn-default t3js-modal-trigger"
            href="{be:moduleLink(route:'tce_db', query:'cmd[sys_reaction][{reaction.uid}][delete]=1', arguments:'{redirect: returnUrl}')}"
            title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_mod_web_list.xlf:delete')}"
            data-severity="warning"
            data-title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_alt_doc.xlf:label.confirm.delete_record.title')}"
            data-bs-content="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_alt_doc.xlf:deleteWarning')}"
            data-button-close-text="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_alt_doc.xlf:buttons.confirm.delete_record.no')}">
            <core:icon identifier="actions-delete" />
        </a>
    </div>
</f:section>
</html>
