<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/new-multiple-pages.js"/>

    <h1>
        <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:title" />
    </h1>

    <f:if condition="!{canCreateNew}">
        <f:then>
            <f:be.infobox
                title="{f:translate(key:'LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:canNotCreateNew.title')}"
                message="{f:translate(key:'LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:canNotCreateNew.message')}"
                state="{f:constant(name: 'TYPO3\CMS\Core\Type\ContextualFeedbackSeverity::INFO')}"
            />
        </f:then>
        <f:else>
            <f:if condition="{hasNewPagesData}">
                <f:then>
                    <f:if condition="{pagesCreated}">
                        <f:then>
                            <f:be.infobox
                                title="{f:translate(key:'LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:pagesCreated.title')}"
                                message="{f:translate(key:'LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:pagesCreated.message')}"
                                state="{f:constant(name: 'TYPO3\CMS\Core\Type\ContextualFeedbackSeverity::INFO')}"
                            />
                        </f:then>
                        <f:else>
                            <f:be.infobox
                                title="{f:translate(key:'LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:noPagesCreated.title')}"
                                message="{f:translate(key:'LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:noPagesCreated.message')}"
                                state="{f:constant(name: 'TYPO3\CMS\Core\Type\ContextualFeedbackSeverity::WARNING')}"
                            />
                        </f:else>
                    </f:if>

                    <f:if condition="{visiblePages}">
                        <h2 class="mt-4">
                            <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:newSubPages"/>
                        </h2>
                        <div class="table-fit">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:newSubPages.pageTitle" /></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <f:for each="{visiblePages}" as="page" iteration="pageIterator">
                                        <tr>
                                            <td>
                                                <span class="treeline-icon treeline-icon-join{f:if(condition: '{pageIterator.isLast}', then: 'bottom')}"></span>
                                                <span title="id={page.uid}"><f:spaceless>
                                                    <button type="button"
                                                        class="btn btn-link"
                                                        data-contextmenu-trigger="click"
                                                        data-contextmenu-table="pages"
                                                        data-contextmenu-uid="{page.uid}"
                                                        aria-label="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.contextMenu.open')}"
                                                    >
                                                        <core:iconForRecord table="pages" row="{page}" />
                                                    </button>
                                                    {page.title -> f:format.crop(maxCharacters: maxTitleLength)}
                                                </f:spaceless></span>
                                            </td>
                                            <td class="col-control">
                                                <div class="btn-group">
                                                    <be:link.editRecord
                                                        table="pages"
                                                        uid="{page.uid}"
                                                        title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_mod_web_list.xlf:edit')}"
                                                        class="btn btn-default"
                                                    >
                                                        <core:icon identifier="actions-page-open" />
                                                    </be:link.editRecord>
                                                </div>
                                            </td>
                                        </tr>
                                    </f:for>
                                </tbody>
                            </table>
                        </div>
                    </f:if>
                </f:then>
                <f:else>
                    <f:if condition="{pageTypes->f:count()} === 0">
                        <f:then>
                            <f:asset.module identifier="@typo3/backend/page-wizard/new-page-wizard-button.js"/>
                            <f:be.infobox
                                title="{f:translate(key: 'multiplePagesCanNotBeCreated.title', domain: 'backend.pages_new')}"
                                state="{f:constant(name: 'TYPO3\CMS\Core\Type\ContextualFeedbackSeverity::INFO')}"
                            >
                                <p>
                                    <f:translate key="multiplePagesCanNotBeCreated.message" domain="backend.pages_new"/>
                                </p>
                                <typo3-backend-new-page-wizard-button
                                    class="btn btn-secondary"
                                    configuration="{wizardConfiguration -> f:format.json()}"
                                    data-page-create="inside"
                                >
                                    <f:translate key="multiplePagesCanNotBeCreated.buttonLabel" domain="backend.pages_new"/>
                                </typo3-backend-new-page-wizard-button>
                            </f:be.infobox>
                        </f:then>
                        <f:else>
                            <f:if condition="{filteredTypes->f:count()} > 0">
                                <f:asset.module identifier="@typo3/backend/page-wizard/new-page-wizard-button.js"/>
                                <f:be.infobox
                                    title="{f:translate(key: 'availablePageTypesHaveBeenFiltered.title', domain: 'backend.pages_new')}"
                                    state="{f:constant(name: 'TYPO3\CMS\Core\Type\ContextualFeedbackSeverity::INFO')}"
                                >
                                    <p>
                                        <f:translate key="availablePageTypesHaveBeenFiltered.message" domain="backend.pages_new"/>
                                        <f:for each="{filteredTypes}" as="label" iteration="i"><f:if condition="{i.isFirst}"><f:else>, </f:else></f:if>{label}</f:for>
                                    </p>
                                    <typo3-backend-new-page-wizard-button
                                        class="btn btn-secondary"
                                        configuration="{wizardConfiguration -> f:format.json()}"
                                        data-page-create="inside"
                                    >
                                        <f:translate key="availablePageTypesHaveBeenFiltered.buttonLabel" domain="backend.pages_new"/>
                                    </typo3-backend-new-page-wizard-button>
                                </f:be.infobox>
                            </f:if>
                            <div class="t3js-newmultiplepages-newlinetemplate" style="display:none">
                                <f:render section="FormLine" arguments="{line: {index: '[0]', label: '[1]', pageTypes: '{pageTypes}'}}" />
                            </div>

                            <form action="{be:moduleLink(route:'pages_new', arguments:'{id:pageUid}')}" method="post">
                                <div class="form-group t3js-newmultiplepages-container">
                                    <f:render section="FormLine" arguments="{line: {index: '0', label: '1', pageTypes: '{pageTypes}'}}" />
                                    <f:render section="FormLine" arguments="{line: {index: '1', label: '2', pageTypes: '{pageTypes}'}}" />
                                    <f:render section="FormLine" arguments="{line: {index: '2', label: '3', pageTypes: '{pageTypes}'}}" />
                                    <f:render section="FormLine" arguments="{line: {index: '3', label: '4', pageTypes: '{pageTypes}'}}" />
                                    <f:render section="FormLine" arguments="{line: {index: '4', label: '5', pageTypes: '{pageTypes}'}}" />
                                </div>

                                <div class="form-group">
                                    <input
                                        class="btn btn-default t3js-newmultiplepages-createnewfields"
                                        type="button"
                                        value="{f:translate(key:'LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:addMoreLines')}"
                                    />
                                </div>

                                <div class="form-group">
                                    <div class="formengine-field-item">
                                        <div class="form-wizards-wrap">
                                            <div class="form-wizards-item-element">
                                                <div class="form-check form-check-type-icon-toggle">
                                                    <input type="checkbox" class="form-check-input" name="createInListEnd" id="createInListEnd" value="1" />
                                                    <label for="createInListEnd" class="form-check-label">
                                                        <span class="form-check-label-icon">
                                                            <span class="form-check-label-icon-checked">
                                                                <core:icon identifier="actions-check" size="small" alternativeMarkupIdentifier="inline" />
                                                            </span>
                                                            <span class="form-check-label-icon-unchecked">
                                                                <core:icon identifier="miscellaneous-placeholder" size="small" alternativeMarkupIdentifier="inline" />
                                                            </span>
                                                        </span>
                                                        <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:listEnd" />
                                                    </label>
                                                </div>
                                                <div class="form-check form-check-type-icon-toggle">
                                                    <input type="checkbox" class="form-check-input" name="hidePages" id="hidePages" value="1" />
                                                    <label for="hidePages" class="form-check-label">
                                                        <span class="form-check-label-icon">
                                                            <span class="form-check-label-icon-checked">
                                                                <core:icon identifier="actions-check" size="small" alternativeMarkupIdentifier="inline" />
                                                            </span>
                                                            <span class="form-check-label-icon-unchecked">
                                                                <core:icon identifier="miscellaneous-placeholder" size="small" alternativeMarkupIdentifier="inline" />
                                                            </span>
                                                        </span>
                                                        <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:hidePages" />
                                                    </label>
                                                </div>
                                                <div class="form-check form-check-type-icon-toggle">
                                                    <input type="checkbox" class="form-check-input" name="hidePagesInMenus" id="hidePagesInMenus" value="1" />
                                                    <label for="hidePagesInMenus" class="form-check-label">
                                                        <span class="form-check-label-icon">
                                                            <span class="form-check-label-icon-checked">
                                                                <core:icon identifier="actions-check" size="small" alternativeMarkupIdentifier="inline" />
                                                            </span>
                                                            <span class="form-check-label-icon-unchecked">
                                                                <core:icon identifier="miscellaneous-placeholder" size="small" alternativeMarkupIdentifier="inline" />
                                                            </span>
                                                        </span>
                                                        <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:hidePagesInMenus" />
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <input
                                        class="btn btn-primary"
                                        type="submit"
                                        name="create"
                                        value="{f:translate(key:'LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:create')}"
                                    />
                                    <input
                                        class="btn btn-default t3js-newmultiplepages-reset-fields"
                                        type="reset"
                                        value="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:reset')}"
                                    />
                                </div>
                            </form>
                        </f:else>
                    </f:if>
                </f:else>
            </f:if>
        </f:else>
    </f:if>
</f:section>

<f:section name="FormLine">
    <fieldset class="form-section" id="form-line-{line.index}">
        <div class="row">
            <div class="form-group col-8">
                <label class="form-label" for="page_new_{line.index}">
                    <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:newPage"/> {line.label}
                </label>
                <div class="formengine-field-item t3js-formengine-field-item">
                    <div class="form-control-wrap">
                        <div class="form-wizards-wrap">
                            <input
                                class="form-control t3js-newmultiplepages-page-title"
                                type="text"
                                id="page_new_{line.index}"
                                name="pages[NEW{line.index}][title]"
                                placeholder="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_general.xlf:LGL.title')}"
                            />
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-4">
                <label class="form-label" for="page_new_select_{line.index}">
                    <f:translate key="doktype" domain="core.db.pages"/>
                </label>
                <div class="formengine-field-item t3js-formengine-field-item">
                    <div class="form-control-wrap">
                        <div class="form-wizards-wrap">
                            <div class="form-wizards-item-element">
                                <div class="input-group">
                                    <span class="input-group-text input-group-icon" id="page_new_icon_{line.index}">
                                        <core:iconForRecord table="pages" row="{id: '0'}" />
                                    </span>
                                    <select id="page_new_select_{line.index}" class="form-select t3js-newmultiplepages-select-doktype" name="pages[NEW{line.index}][doktype]" data-target="#page_new_icon_{line.index}">
                                        <f:for each="{line.pageTypes}" as="typegroup" key="group">
                                            <optgroup label="{group}">
                                                <f:for each="{typegroup}" as="type">
                                                    <option data-icon='{core:icon(identifier: type.icon)}' value="{type.value}">{f:translate(key: type.label, default: type.label)}</option>
                                                </f:for>
                                            </optgroup>
                                        </f:for>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</f:section>

</html>
