<html
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:backend="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="Before">
    <f:asset.module identifier="@typo3/backend/context-menu.js"/>
    <f:asset.module identifier="@typo3/backend/element/immediate-action-element.js"/>
    <f:asset.module identifier="@typo3/backend/tree/tree-node-toggle.js"/>
    <f:asset.module identifier="@typo3/backend/utility/collapse-state-persister.js"/>
    <f:asset.module identifier="@typo3/backend/utility/collapse-state-search.js"/>
    <f:variable name="args" value="{0: 'web', 1: pageUid}" />
    <typo3-immediate-action
        action="TYPO3.Backend.Storage.ModuleStateStorage.update"
        args="{args -> f:format.json() -> f:format.htmlspecialchars()}"
    ></typo3-immediate-action>
</f:section>

<f:section name="Content">
    <h1>
        <f:translate
            key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_active.headline"
            arguments="{
                0: '{pageTitle}'
            }"
        />
    </h1>
    <p><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_active.description" /></p>

    <f:render section="Options" arguments="{_all}" />

    <f:comment><!-- Constants from Site settings --></f:comment>
    <f:if condition="{siteSettingsAst}">
        <h2><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_active.siteSettings" /></h2>
        <div class="panel-group">
            <f:render
                section="TreePanel"
                arguments="{
                    type: 'constant',
                    tree: siteSettingsAst,
                    pageUid: pageUid,
                    displayComments: 0
                }"
            />
        </div>
    </f:if>

    <h2><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_active.activePageTsConfig" /></h2>
    <f:if condition="!{pageTsConfigAst.children}">
        <f:then>
            <f:be.infobox
                message="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_active.noPageTSconfigAvailable')}"
                state="{f:constant(name: 'TYPO3\CMS\Core\Type\ContextualFeedbackSeverity::INFO')}"
            />
        </f:then>
        <f:else>
            <div class="panel-group">
                <f:if condition="{pageTsConfigConditions}">
                    <f:render
                        section="Conditions"
                        arguments="{
                            pageUid: pageUid,
                            conditions: pageTsConfigConditions,
                            conditionActiveCount: pageTsConfigConditionsActiveCount,
                            displayConstantSubstitutions: displayConstantSubstitutions
                        }"
                    />
                </f:if>
                <f:render
                    section="TreePanel"
                    arguments="{
                        type: 'setup',
                        tree: pageTsConfigAst,
                        pageUid: pageUid,
                        displayComments: displayComments,
                        displayConstantSubstitutions: displayConstantSubstitutions
                    }"
                />
            </div>
        </f:else>
    </f:if>
</f:section>

<f:section name="Options">
    <div class="form-row-md align-items-md-end">
        <div class="form-group">
            <form action="#">
                <label for="searchValue" class="form-label">
                    <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.label.searchString" />
                </label>
                <div class="input-group">
                    <input
                        type="search"
                        autocomplete="off"
                        class="form-control t3js-collapse-search-term"
                        id="searchValue"
                        name="searchValue"
                        data-persist-collapse-search-key="collapse-search-term-pagets"
                        value=""
                        minlength="3"
                    />
                </div>
            </form>
        </div>
        <div class="form-group">
            <div class="form-row-md">
                <f:if condition="{siteSettingsAst}">
                    <div class="form-group">
                        <form action="{f:be.uri(route: 'pagetsconfig_active', parameters: '{id: pageUid}')}" method="post">
                            <input type="hidden" name="displayConstantSubstitutions" value="0" />
                            <div class="form-check form-switch form-check-size-input">
                                <input
                                    type="checkbox"
                                    class="form-check-input"
                                    name="displayConstantSubstitutions"
                                    id="displayConstantSubstitutions"
                                    value="1"
                                    data-global-event="change"
                                    data-action-submit="$form"
                                    data-value-selector="input[name='displayConstantSubstitutions']"
                                    {f:if(condition: displayConstantSubstitutions, then: 'checked="checked"')}
                                />
                                <label class="form-check-label" for="displayConstantSubstitutions">
                                    <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_active.displayConstantSubstitutions" />
                                </label>
                            </div>
                        </form>
                    </div>
                </f:if>
                <div class="form-group">
                    <form action="{f:be.uri(route: 'pagetsconfig_active', parameters: '{id: pageUid}')}" method="post">
                        <input type="hidden" name="displayComments" value="0" />
                        <div class="form-check form-switch form-check-size-input">
                            <input
                                type="checkbox"
                                class="form-check-input"
                                name="displayComments"
                                id="displayComments"
                                value="1"
                                data-global-event="change"
                                data-action-submit="$form"
                                data-value-selector="input[name='displayComments']"
                                {f:if(condition: displayComments, then: 'checked="checked"')}
                            />
                            <label class="form-check-label" for="displayComments">
                                <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_active.displayComments" />
                            </label>
                        </div>
                    </form>
                </div>
                <div class="form-group">
                    <form action="{f:be.uri(route: 'pagetsconfig_active', parameters: '{id: pageUid}')}" method="post">
                        <input type="hidden" name="sortAlphabetically" value="0" />
                        <div class="form-check form-switch form-check-size-input">
                            <input
                                type="checkbox"
                                class="form-check-input"
                                name="sortAlphabetically"
                                id="sortAlphabetically"
                                value="1"
                                data-global-event="change"
                                data-action-submit="$form"
                                data-value-selector="input[name='sortAlphabetically']"
                                {f:if(condition: sortAlphabetically, then: 'checked="checked"')}
                            />
                            <label class="form-check-label" for="sortAlphabetically">
                                <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_active.sortAlphabetically" />
                            </label>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</f:section>

<f:section name="Conditions">
    <div class="panel panel-default">
        <h3 class="panel-heading" role="tab" id="pagetsconfig-active-conditions-heading">
            <div class="panel-heading-row">
                <button
                    class="panel-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#pagetsconfig-active-conditions-body"
                    aria-controls="pagetsconfig-active-conditions-body"
                    aria-expanded="false"
                >
                    <div class="panel-title">
                        <strong><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_active.panel.header.conditions"/></strong>
                    </div>
                    <f:if condition="{conditionActiveCount}">
                        <div class="panel-badge">
                            <span class="badge badge-info">
                                <f:translate
                                    key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_active.panel.info.conditionActiveCount.{f:if(condition: '{conditionActiveCount} > 1', then:'multiple', else: 'single')}"
                                    arguments="{0: conditionActiveCount}"
                                />
                            </span>
                        </div>
                    </f:if>
                    <span class="caret"></span>
                </button>
            </div>
        </h3>
        <div
            class="panel-collapse collapse"
            id="pagetsconfig-active-conditions-body"
            data-persist-collapse-state="true"
            data-persist-collapse-state-if-state="shown"
            role="tabpanel"
            aria-labelledby="pagetsconfig-active-conditions-heading"
        >
            <div class="panel-body">
                <form action="{f:be.uri(route: 'pagetsconfig_active', parameters: '{id: pageUid}')}" method="post">
                    <f:for each="{conditions}" as="condition">
                        <input type="hidden" name="pageTsConfigConditions[{condition.hash}]" value="0" />
                        <div class="form-check form-switch">
                            <input
                                type="checkbox"
                                class="form-check-input"
                                id="condition{condition.hash}"
                                name="pageTsConfigConditions[{condition.hash}]"
                                value="1"
                                data-global-event="change"
                                data-action-submit="$form"
                                data-value-selector="input[name='pageTsConfigConditions[{condition.hash}]']"
                                {f:if(condition: condition.active, then: 'checked="checked"')}
                            />
                            <label class="form-check-label" for="condition{condition.hash}">
                                <f:if condition="{displayConstantSubstitutions} && {condition.originalValue}">
                                    <f:then>
                                        <span class="font-monospace">[{condition.value}]</span>
                                        <span class="diff-inline">
                                            <f:format.raw>
                                                <f:translate
                                                    key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_active.panel.info.conditionWithConstant"
                                                    arguments="{
                                                        0: '{backend:typoScript.fineDiff(from: condition.originalValue, to: condition.value)}'
                                                    }"
                                                />
                                            </f:format.raw>
                                        </span>
                                    </f:then>
                                    <f:else>
                                        <span class="font-monospace">[{condition.value}]</span>
                                    </f:else>
                                </f:if>
                            </label>
                        </div>
                    </f:for>
                </form>
            </div>
        </div>
    </div>
</f:section>

<f:section name="TreePanel">
    <div class="panel panel-default">
        <h3 class="panel-heading" role="tab" id="pagetsconfig-active-{type}-ast-heading">
            <div class="panel-heading-row">
                <button
                    class="panel-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#pagetsconfig-active-{type}-ast-body"
                    aria-controls="pagetsconfig-active-{type}-ast-body"
                    aria-expanded="false"
                    id="panel-tree-heading-{type}"
                >
                    <div class="panel-title">
                        <strong><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_active.panel.header.configuration"/></strong>
                    </div>
                    <div class="panel-heading-badge">
                        <span class="badge badge-success hidden t3js-collapse-states-search-numberOfSearchMatches"></span>
                    </div>
                    <span class="caret"></span>
                </button>
            </div>
        </h3>
        <div
            id="pagetsconfig-active-{type}-ast-body"
            class="panel-collapse collapse"
            data-persist-collapse-state="true"
            data-persist-collapse-state-if-state="shown"
            aria-labelledby="pagetsconfig-active-{type}-ast-heading"
            role="tabpanel"
        >
            <div class="panel-body panel-body-overflow t3js-collapse-states-search-tree">
                <ul class="treelist">
                    <f:render
                        section="Tree"
                        arguments="{
                            type: type,
                            tree: tree,
                            pageUid: pageUid,
                            displayConstantSubstitutions: displayConstantSubstitutions,
                            displayComments: displayComments
                        }"
                    />
                </ul>
            </div>
        </div>
    </div>
</f:section>

<f:section name="Tree">
    <f:for each="{tree.nextChild}" as="child">
        <f:if condition="{displayComments} && {child.comments}">
            <li class="loose">
                <div class="treelist-comment">
                    <f:for each="{child.comments}" as="comment" iteration="iterator">
                        <div><f:format.nl2br>{comment}</f:format.nl2br></div>
                    </f:for>
                </div>
            </li>
        </f:if>
        <f:if condition="{displayConstantSubstitutions} && {child.originalValueTokenStream}">
            <li class="loose">
                <span class="diff-inline">
                    <f:format.raw>
                        <f:variable name="trimmedValueTokenStream"><f:format.trim>{child.originalValueTokenStream}</f:format.trim></f:variable>
                        <f:translate
                            key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_active.tree.valueWithConstant"
                            arguments="{
                                0: '{backend:typoScript.fineDiff(from: trimmedValueTokenStream, to: child.value)}'
                            }"
                        />
                    </f:format.raw>
                </span>
            </li>
        </f:if>
        <li>
            <f:if condition="{child.children}">
                <typo3-backend-tree-node-toggle
                    class="treelist-control collapsed"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapse-list-{child.identifier}"
                    aria-expanded="false">
                </typo3-backend-tree-node-toggle>
            </f:if>
            <span class="treelist-group treelist-group-monospace">
                <span class="treelist-label">{child.name}</span>
                <f:if condition="!{child.valueNull}">
                    <span class="treelist-operator">=</span>
                    <span class="treelist-value">{child.value}</span>
                </f:if>
                <f:if condition="{child.referenceSourceStream}">
                    <span class="treelist-operator">=<</span>
                    <span class="treelist-value">{child.referenceSourceStream}</span>
                </f:if>
            </span>
            <f:if condition="{child.children}">
                <div
                    class="treelist-collapse collapse"
                    data-persist-collapse-state="true"
                    data-persist-collapse-state-suffix="pagets-active-{type}"
                    data-persist-collapse-state-not-if-search="true"
                    data-persist-collapse-state-if-state="shown"
                    id="collapse-list-{child.identifier}"
                >
                    <ul class="treelist">
                        <f:render
                            section="Tree"
                            arguments="{
                                type: type,
                                tree: child,
                                pageUid: pageUid,
                                displayConstantSubstitutions: displayConstantSubstitutions,
                                displayComments: displayComments
                            }"
                        />
                    </ul>
                </div>
            </f:if>
        </li>
    </f:for>
</f:section>

</html>
