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

<f:layout name="Module"/>

<f:section name="Before">
    <f:be.pageRenderer
        includeJavaScriptModules="{
            0: '@typo3/backend/context-menu.js',
            1: '@typo3/backend/element/immediate-action-element.js',
            2: '@typo3/backend/tree/tree-node-toggle.js',
            3: '@typo3/backend/utility/collapse-state-persister.js',
            4: '@typo3/backend/pagetsconfig/pagetsconfig-includes.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_includes.headline"
            arguments="{
                0: '{pageTitle}'
            }"
        />
    </h1>
    <p><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.description" /></p>

    <f:if condition="{siteSettingsTree.children}">
        <h2><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.siteSettings" /></h2>
        <div class="panel-group">
            <f:render
                section="TreePanel"
                arguments="{
                    type: 'constants',
                    tree: siteSettingsTree,
                    pageUid: pageUid
                }"
            />
        </div>
    </f:if>

    <f:if condition="{pageTsConfigTree.children}">
        <h2><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.pagetsconfig" /></h2>
        <div class="panel-group">
            <f:render
                section="SyntaxErrors"
                arguments="{
                    type: 'constants',
                    pageUid: pageUid,
                    errors: syntaxErrors,
                    errorCount: syntaxErrorCount
                }"
            />
            <f:render
                section="Conditions"
                arguments="{
                    pageUid: pageUid,
                    conditions: pageTsConfigConditions,
                    conditionActiveCount: pageTsConfigConditionsActiveCount
                }"
            />
            <f:render
                section="TreePanel"
                arguments="{
                    type: 'setup',
                    tree: pageTsConfigTree,
                    pageUid: pageUid
                }"
            />
        </div>
    </f:if>
</f:section>

<f:section name="TreePanel">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title" id="pagetsconfig-includes-{type}-tree-heading">
                <a href="#" class="collapsed" data-bs-toggle="collapse" data-bs-target="#pagetsconfig-includes-{type}-tree-body" aria-expanded="false" aria-controls="pagetsconfig-includes-{type}-tree-body">
                    <span class="caret"></span>
                    <strong><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.panel.header.configuration"/></strong>
                </a>
            </h3>
        </div>
        <div id="pagetsconfig-includes-{type}-tree-body" class="panel-collapse collapse" data-persist-collapse-state="true" aria-labelledby="pagetsconfig-includes-{type}-tree-heading">
            <div class="panel-body panel-body-overflow">
                <ul class="treelist">
                    <f:render
                        section="Tree"
                        arguments="{
                            type: type,
                            pageUid: pageUid,
                            tree: tree
                        }"
                    />
                </ul>
            </div>
        </div>
    </div>
</f:section>

<f:section name="Tree">
    <f:if condition="{tree.children}">
        <f:for each="{tree.nextChild}" as="child">
            <li>
                <f:if condition="{child.children}">
                    <typo3-backend-tree-node-toggle
                        class="treelist-control treelist-control-collapsed"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapse-list-{child.identifier}"
                        aria-expanded="false">
                    </typo3-backend-tree-node-toggle>
                </f:if>
                <div class="row justify-content-between">
                    <div class="col">
                        <div class="row row-cols-auto justify-content-md-between">
                            <div class="col col-12 col-lg-auto">
                                <span class="treelist-group treelist-group-monospace">
                                    <span class="treelist-label">
                                        <f:if condition="{child.type} == 'Segment'">
                                            <f:then>
                                                <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.tree.child.type.Segment" />
                                            </f:then>
                                            <f:else>
                                                {child.name}
                                            </f:else>
                                        </f:if>
                                    </span>
                                </span>
                            </div>
                            <div class="col col-12 col-lg-auto text-md-end">
                                <f:comment><!-- Hand {child.type} over to f:translate and add locallang.xlf entries when Include classes stabilized. --></f:comment>
                                <f:if condition="{child.type} != 'Segment'">
                                    <f:then>
                                        <span class="badge">
                                            <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.tree.child.type.{child.type}" />
                                        </span>
                                    </f:then>
                                </f:if>
                                <f:if condition="{child.conditionToken}">
                                    <f:then>
                                        <f:if condition="{child.conditionVerdict}">
                                            <f:then>
                                                <span title="[{child.conditionToken.value}]" class="badge badge-success">
                                                    <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.tree.child.conditionVerdict.matched" />
                                                </span>
                                            </f:then>
                                            <f:else>
                                                <span title="[{child.conditionToken.value}]" class="badge badge-danger">
                                                    <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.tree.child.conditionVerdict.notMatched" />
                                                </span>
                                            </f:else>
                                        </f:if>
                                    </f:then>
                                </f:if>
                            </div>
                        </div>
                    </div>
                    <div class="col col-auto text-end">
                        <div class="btn-group">
                            <f:be.link
                                route="pagetsconfig_includes.source"
                                parameters="{id: pageUid, includeType: type, identifier: child.identifier}"
                                additionalAttributes="{'data-modal-title': child.name}"
                                class="btn btn-default btn-sm t3js-pagetsconfig-includes-modal{f:if(condition:'!{child.lineStream}', then:' disabled')}"
                                title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.tree.child.btn.sourceCode')}"
                            >
                                <core:icon identifier="{f:if(condition:'{child.lineStream}', then:'actions-variable', else: 'empty-empty')}" />
                            </f:be.link>
                            <f:be.link
                                route="pagetsconfig_includes.sourceWithIncludes"
                                parameters="{id: pageUid, includeType: type, identifier: child.identifier}"
                                additionalAttributes="{'data-modal-title': '{child.name} (with resolved includes)'}"
                                class="btn btn-default btn-sm t3js-pagetsconfig-includes-modal{f:if(condition:'!{child.children}', then:' disabled')}"
                                title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.tree.child.btn.sourceCodeWithResolvedIncludes')}"
                            >
                                <core:icon identifier="{f:if(condition:'{child.children}', then:'actions-variable-select', else: 'empty-empty')}" />
                            </f:be.link>
                        </div>
                    </div>
                </div>

                <f:if condition="{child.children}">
                    <ul
                        class="treelist list-group collapse"
                        id="collapse-list-{child.identifier}"
                        data-persist-collapse-state="true"
                        data-persist-collapse-state-suffix="typoscript-include-{type}"
                        data-persist-collapse-state-if-state="shown"
                    >
                        <f:render
                            section="Tree"
                            arguments="{
                                type: type,
                                pageUid: pageUid,
                                tree: child
                            }"
                        />
                    </ul>
                </f:if>
            </li>
        </f:for>
    </f:if>
</f:section>

<f:section name="SyntaxErrors">
    <f:if condition="{errors}">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row align-items-center justify-content-between">
                    <div class="col align-middle">
                        <h3 class="panel-title" id="pagetsconfig-includes-errors-heading">
                            <a
                                href="#"
                                class="collapsed"
                                data-bs-toggle="collapse"
                                data-bs-target="#pagetsconfig-includes-errors-body"
                                aria-expanded="false"
                                aria-controls="pagetsconfig-includes-errors-body"
                            >
                                <span class="caret"></span>
                                <strong><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.panel.header.syntaxErrors"/></strong>
                            </a>
                        </h3>
                    </div>
                    <div class="col text-end">
                        <span class="badge badge-warning">
                            <f:translate
                                key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.panel.info.syntaxErrorCount.{f:if(condition: '{errorCount} > 1', then:'multiple', else: 'single')}"
                                arguments="{0: errorCount}"
                            />
                        </span>
                    </div>
                </div>
            </div>
            <div id="pagetsconfig-includes-errors-body" class="panel-collapse collapse" data-persist-collapse-state="true" aria-labelledby="pagetsconfig-includes-errors-heading">
                <div class="panel-body">
                    <f:for each="{errors}" as="error">
                        <div class="row justify-content-between">
                            <div class="col">
                                <f:translate
                                    key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.syntaxError.type.{error.type}"
                                    arguments="{0: error.include.name, 1: '{error.lineNumber + 1}'}"
                                />
                            </div>
                            <div class="col col-auto text-end">
                                <div class="btn-group">
                                    <f:be.link
                                        route="pagetsconfig_includes.source"
                                        parameters="{id: pageUid, includeType: 'setup', identifier: error.include.identifier}"
                                        additionalAttributes="{'data-modal-title': error.include.name}"
                                        class="btn btn-default btn-sm t3js-pagetsconfig-includes-modal"
                                        title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.syntaxError.sourceCode')}"
                                    >
                                        <core:icon identifier="actions-variable" />
                                    </f:be.link>
                                </div>
                            </div>
                        </div>
                    </f:for>
                </div>
            </div>
        </div>
    </f:if>
</f:section>

<f:section name="Conditions">
    <f:if condition="{conditions}">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab">
                <f:if condition="{conditionActiveCount}">
                    <f:then>
                        <div class="row align-items-center justify-content-between">
                            <div class="col align-middle">
                                <h3 class="panel-title" id="pagetsconfig-includes-conditions-heading">
                                    <a
                                        href="#"
                                        class="collapsed"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#pagetsconfig-includes-conditions-body"
                                        aria-expanded="false"
                                        aria-controls="pagetsconfig-includes-conditions-body"
                                    >
                                        <span class="caret"></span>
                                        <strong><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.panel.header.conditions"/></strong>
                                    </a>
                                </h3>
                            </div>
                            <div class="col text-end">
                                <span class="badge badge-info">
                                    <f:translate
                                        key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.panel.info.conditionActiveCount.{f:if(condition: '{conditionActiveCount} > 1', then:'multiple', else: 'single')}"
                                        arguments="{0: conditionActiveCount}"
                                    />
                                </span>
                            </div>
                        </div>
                    </f:then>
                    <f:else>
                        <h3 class="panel-title" id="pagetsconfig-includes-conditions-heading">
                            <a
                                href="#"
                                class="collapsed"
                                data-bs-toggle="collapse"
                                data-bs-target="#pagetsconfig-includes-conditions-body"
                                aria-expanded="false"
                                aria-controls="pagetsconfig-includes-conditions-body"
                            >
                                <span class="caret"></span>
                                <strong><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.panel.header.conditions"/></strong>
                            </a>
                        </h3>
                    </f:else>
                </f:if>
            </div>
            <div
                class="panel-collapse collapse"
                id="pagetsconfig-includes-conditions-body"
                data-persist-collapse-state="true"
                role="tabpanel"
                aria-labelledby="pagetsconfig-includes-conditions-heading"
            >
                <div class="panel-body">
                    <form action="{f:be.uri(route: 'pagetsconfig_includes', 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"
                                    name="pageTsConfigConditions[{condition.hash}]"
                                    id="pageTsConfigCondition{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="pageTsConfigCondition{condition.hash}">
                                    <f:if condition="{condition.originalValue}">
                                        <f:then>
                                            <span class="font-monospace">[{condition.value}]</span>
                                            <span class="diff-item-result diff-item-result-inline font-monospace p-0">
                                                <f:format.raw>
                                                    <f:translate
                                                        key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.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:if>
</f:section>

</html>
