<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: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/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="TreePanel"
                arguments="{
                    type: 'setup',
                    tree: pageTsConfigTree,
                    pageUid: pageUid
                }"
            />
        </div>
    </f:if>
</f:section>

<f:section name="TreePanel">
    <div class="panel panel-default">
        <h3 class="panel-heading" role="tab" id="pagetsconfig-includes-{type}-tree-heading">
            <div class="panel-heading-row">
                <button
                    class="panel-button collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#pagetsconfig-includes-{type}-tree-body"
                    aria-controls="pagetsconfig-includes-{type}-tree-body"
                    aria-expanded="false"
                >
                    <div class="panel-title">
                        <strong><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.panel.header.configuration"/></strong>
                    </div>
                    <span class="caret"></span>
                </button>
            </div>
        </h3>
        <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 if="{child.type} == 'Condition'">
                                                {child.lineStream}
                                            </f:else>
                                            <f:else if="{child.type} == 'ConditionElse'">
                                                {child.lineStream}
                                            </f:else>
                                            <f:else if="{child.type} == 'ConditionStop'">
                                                {child.lineStream}
                                            </f:else>
                                            <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>
                            </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">
            <h3 class="panel-heading" role="tab" id="pagetsconfig-includes-errors-heading">
                <div class="panel-heading-row">
                    <button
                        class="panel-button collapsed"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#pagetsconfig-includes-errors-body"
                        aria-controls="pagetsconfig-includes-errors-body"
                        aria-expanded="false"
                    >
                        <div class="panel-title">
                            <strong><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pagetsconfig.xlf:module.pagetsconfig_includes.panel.header.syntaxErrors"/></strong>
                        </div>
                        <div class="panel-badge">
                            <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>
                        <span class="caret"></span>
                    </button>
                </div>
            </h3>
            <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>

</html>
