{namespace be=TYPO3\CMS\Backend\ViewHelpers}

<f:be.pageRenderer
    includeRequireJsModules="{
        0:'TYPO3/CMS/Backend/ContextMenu',
        1:'TYPO3/CMS/Backend/NewMultiplePages'
    }"
/>

<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="-1"
        />
    </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="-1"
                        />
                    </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="1"
                        />
                    </f:else>
                </f:if>
                <f:if condition="{visiblePages}">
                    <div class="form-group">
                        <h2>
                            <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:newSubPages"/>
                        </h2>
                        <f:for each="{visiblePages}" as="page">
                            <core:iconForRecord table="pages" row="{page}" />
                            {page.title -> f:format.crop(maxCharacters: maxTitleLength)}
                            <br />
                        </f:for>
                    </div>
                </f:if>
            </f:then>
            <f:else>
                <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="form-check">
                            <input type="checkbox" class="form-check-input" name="createInListEnd" id="createInListEnd" value="1" />
                            <label for="createInListEnd" class="form-check-label">
                                <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:listEnd" />
                            </label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" name="hidePages" id="hidePages" value="1" />
                            <label for="hidePages" class="form-check-label">
                                <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:hidePages" />
                            </label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" name="hidePagesInMenus" id="hidePagesInMenus" value="1" />
                            <label for="hidePagesInMenus" class="form-check-label">
                                <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:hidePagesInMenus" />
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <input
                            class="btn btn-default"
                            type="submit"
                            name="create"
                            value="{f:translate(key:'LLL:EXT:backend/Resources/Private/Language/locallang_pages_new.xlf:create')}"
                        />
                        <input
                            class="btn btn-default"
                            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:section name="FormLine">
    <div class="form-section" id="form-line-{line.index}">
        <div class="row">
            <div class="form-group col-8">
                <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="form-control-wrap">
                    <input class="form-control" 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 class="form-group col-4">
                <label for="page_new_select_{line.index}">
                    <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_general.xlf:LGL.type"/>
                </label>
                <div class="form-control-wrap">
                    <div class="input-group">
                        <div id="page_new_icon_{line.index}" class="input-group-addon input-group-icon">
                            <core:iconForRecord table="pages" row="{id: '0'}" />
                        </div>
                        <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="{f:translate(key: '{group}')}">
                                    <f:for each="{typegroup}" as="type">
                                        <option data-icon='{core:icon(identifier: "{type.2}")}' value="{type.1}">{f:translate(key: '{type.0}')}</option>
                                    </f:for>
                                </optgroup>
                            </f:for>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</f:section>