public/src/js/widgets/columns/fronts-config.html

<div class="col__inner scrollable frontsConfig">
    <div class="title">
        Fronts
        <span data-bind="click: createFront" class="linky">+</span>
    </div>
    <div class="cnf-fronts">
        <!-- ko if: pinnedFront -->
            <div class="configPinnedFront"
                data-bind="template: {name: 'template_front', data: pinnedFront}"></div>
        <!-- /ko -->
        <div class="configListFronts"
            data-bind="template: {name: 'template_front', foreach: fronts}"></div>
    </div>
</div>

<script type="text/html" id="template_front">
    <div class="cnf-front" data-bind="
        ownerClass: $data,
        css: {open: state.isOpen}">

        <div class="title" data-bind="visible: !isNew()">
            <span class="title--text" data-bind="
                text: id,
                click: toggleOpen
            "></span>

            <!-- ko if: props.isHidden() && collections.items().length > 0 -->
            <span class="cfn-front__hidden-text">hidden</span>
            <!-- /ko -->
        </div>

        <!-- ko if: isNew() -->
            <div class="cnf-front__inner cnf-form">
                <label>URL path</label>
                <input class="input-url-path" type="text" placeholder="eg. world/middleeast" data-bind="value: id"/>
                <!-- ko if: showGroups() -->
                <label>Group</label>
                <select data-bind="
                    optionsCaption: 'Select a group',
                    options: groups,
                    value: props.group,
                    valueAllowUnset: true"></select>
                <!-- /ko -->

                <div class="tools action-buttons">
                    <button class="tool create-new-front" data-bind="click: createFront">Create front</button>
                </div>
            </div>
        <!-- /ko -->

        <div class="cnf-front__inner" data-bind="if: state.isOpen">
            <!-- ko if: state.isOpenProps() -->
                <div class="cnf-form">
                    <label>Hidden</label>
                    <input type="checkbox" class="toggle--hidden" data-bind="
                        checked: props.isHidden,
                        disable: state.isTypeLocked" />

                    <label>Nav section</label>
                    <select data-bind="
                        css: {
                            'is-placeholder': !props.navSection()
                        },
                        optionsCaption: placeholders.navSection() || '...',
                        options: $root.navSections,
                        value: props.navSection"></select>

                    <label>Name</label>
                    <input type="text" class="metadata--title" data-bind="
                        attr: {placeholder: placeholders.webTitle},
                        value: props.webTitle"/>

                    <label>SEO title</label>
                    <textarea class="metadata--seo-title" data-bind="
                        attr: {placeholder: placeholders.title},
                        value: props.title"></textarea>

                    <label>Meta description</label>
                    <textarea class="metadata--description" data-bind="
                        attr: {placeholder: placeholders.description},
                        value: props.description"></textarea>

                    <label>On-page description</label>
                    <textarea class="metadata--page-description" data-bind="value: props.onPageDescription"></textarea>

                    <label>Image</label>
                    <input type="text" class="metadata--provisionalImage" placeholder="Image URL, e.g. copied from Batch Uploader"
                        data-bind="value: provisionalImageUrl" />

                    <label>Display image</label>
                    <input type="checkbox" class="metadata--imageUrl" data-bind="
                        checked: props.isImageDisplayed,
                        enable: props.imageUrl" />

                    <label>Type</label>
                    <!-- ko foreach: $root.priorities -->
                    <input type="radio" name="group02" data-bind="
                        checkedValue: $data === $root.defaultPriority ? undefined : $data,
                        checked: $parent.props.priority" />
                    <span class="radio-label" data-bind="text: $data"></span>
                    <!-- /ko -->

                    <!-- ko if: showGroups() -->
                    <label>Group</label>
                    <select data-bind="
                        optionsCaption: 'Select a group',
                        options: groups,
                        value: props.group,
                        valueAllowUnset: true"></select>
                    <!-- /ko -->

                    <label>Canonical container</label>
                    <select data-bind="
                        optionsCaption: 'Select a container',
                        options: collections.items,
                        optionsText: function (collection) {
                            return collection.meta.displayName();
                        },
                        optionsValue: 'id',
                        value: props.canonical,
                        valueAllowUnset: true"></select>

                    <div class="tools action-buttons">
                        <button class="tool save-metadata" data-bind="
                            enable: state.isValidMetadata() !== false,
                            click: saveProps">Save metadata</button>
                    </div>
                </div>
            <!-- /ko -->

             <!-- ko if: !isNew() -->
                <div class="instructions">
                    <!-- ko if: !state.isOpenProps() && collections.items().length -->
                        <span class="linky tool--metadata" data-bind="click: openProps">edit metadata</span>
                        &middot;
                        <a class='tool--content' data-bind="attr: {href: '/' + $root.fullPriority + '?layout=latest,front:' + id()}">edit content</a>
                        &middot;
                        <a class='tool--content' data-bind="attr: {href: '/' + $root.fullPriority + '?redirect=false&amp;treats=please&amp;front=' + id()}">edit treats</a>
                        &middot;
                        <a class='tool--live' data-bind="attr: {href: $root.liveFrontend + id()}" target="_blank">view live</a>
                        &middot;
                        <a class='tool--live' data-bind="attr: {href: ophanPerformances()}" target="_blank">view performance</a>
                    <!-- /ko -->
                </div>

                <div class="cnf-front__collections" data-bind="with: collections">
                    <div class="droppable config-droppable" data-bind="
                        makeDroppable: true,
                        css: {underDrag: underDrag},
                        template: {name: 'template_collection', foreach: items}"></div>
                </div>
                <div class="instructions">
                    <span data-bind="click: createCollection" class="linky tool--container">create a container</span> or drop one above.
                    <span data-bind="if: !collections.items().length">Empty fronts will be discarded!</span>
                </div>
            <!-- /ko -->
       </div>

    </div>
</script>

<script type="text/html" id="template_collection">
    <div class="cnf-collection" data-bind="
        css: {
            underDrag: state.underDrag,
            open: state.isOpen}">

        <span class="cnf-collection__index" data-bind="text: $index() + 1"></span>

        <a class="cnf-collection__name" data-bind="
            click: toggleOpen,
            attr: {href: '/' + id, title: id},
            text: getDisplayName()"></a>

        <span class="placements" data-bind="
            if: parents().length,
            css: {'is-single': parents().length === 1}">
            also on
            <span data-bind="foreach: parents">
                <!-- ko if: $parents[2] ? id !== $parents[2].id() : true -->
                    <a class="cnf-collection__also-on" data-bind="
                        click: $parents[3].openFront.bind($parents[3]),
                        css: {'cnf-collection__also-on__crossPriority': !$parents[2].hasSamePriority(id)},
                        text: id"></a>
                <!-- /ko -->
            </span>
        </span>

        <!-- ko if: !state.isOpen() -->
            <span data-bind="foreach: meta.metadata">
               <span class="tagLabel" data-bind="text: type"></span>
            </span>
        <!-- /ko -->

        <!-- ko if: state.isOpen -->
        <div class="cnf-form">
            <div class="type-option type-option-chosen" data-bind="click: toggleOpenTypePicker">
                <div data-bind="text: meta.type() || 'Choose a layout...'"></div>
                <!-- ko if: containerThumbnail -->
                <img onerror="this.style.display='none'" data-bind="attr: {src: containerThumbnail}" />
                <!-- /ko -->
                <!-- ko if: thisIsBetaCollection -->
                <span class="beta-warning-text">Beta</span>
                <!-- /ko -->
            </div>

            <!-- ko if: state.isOpenTypePicker -->
            <i class="fa fa-remove type-picker-closer" data-bind="click: toggleOpenTypePicker"></i>
            <div class="type-picker" data-bind="foreach: $root.types">
                <div class="type-option" data-bind="
                        css: {'type-option--highlight': $data === $parent.meta.type()},
                        click: $parent.typePicker">
                    <div class="type-option-value" data-bind="text: $data"></div>
                    <img onerror="this.style.display='none'" data-bind="attr: {src: '/thumbnails/' + $data + '.svg'}" />
                    <!-- ko if: (
                        $data === 'flexible/general' ||
                        $data === 'flexible/special' ||
                        $data === 'scrollable/highlights' ||
                        $data === 'scrollable/small' ||
                        $data === 'scrollable/medium' ||
                        $data === 'scrollable/feature' ||
                        $data === 'static/medium/4' ||
                        $data === 'static/feature/2' )
                        -->
                    <span class="beta-warning-text">Beta</span>
                    <!-- /ko -->
                </div>
            </div>
            <!-- /ko -->

            <label>Title</label>
            <input type="text" class="title--input" data-bind="
                value: meta.displayName"/>

            <label>Link url</label>
            <input type="text" data-bind="
                value: meta.href"/>

            <!-- ko if: !(
			 meta.type() === 'scrollable/small' ||
			 meta.type() === 'scrollable/medium' ||
			 meta.type() === 'static/medium/4')
			-->
            <label>Description</label>
                <input type="text" data-bind="
                    value: meta.description"/>
            <!-- /ko -->

            <config-collection-backfill params="backfill: meta.backfill"></config-collection-backfill>

            <div data-bind="visible: $root.priority == 'email' ">
                <label for="backfillLimit" title="Maximum number of items to include in email">Max items to render</label>
                <input id="backfillLimit" type="number" data-bind="value: meta.displayHints.maxItemsToDisplay" placeholder="6">
            </div>

            <config-collection-tags params="tags: meta.metadata" class="tags"></config-collection-tags>
            <!-- ko if: meta.groups -->
                <label>Groups</label>
                <span class="cnf-form__value" data-bind="text: meta.groups().slice().reverse()"></span>
            <!-- /ko -->

            <!-- ko if: meta.type() === "flexible/general"-->
              <div data-bind="foreach: meta.groupsConfig.slice().reverse()">
                <label data-bind="attr: { for: 'maxItems-' + $index() }"><span data-bind="text: name" class="capitalize-first-letter"></span> stories</label>
                <input type="number" data-bind="value: maxItems, attr: { id: 'maxItems-' + $index(), max: 20, min: 0 }" max="20" min="0">
              </div>
            <!-- /ko -->

            <label for="userVisibility">User visibility</label>
            <select id="userVisibility" data-bind="
                optionsCaption: 'Select user visibility',
                options: userVisibilities,
                value: meta.userVisibility,
                valueAllowUnset: true"></select>

            <label for="targetedTerritory">Target territory</label>
            <select id="targetedTerritory" data-bind="
                optionsCaption: 'Select territory',
                options: availableTerritories,
                value: meta.targetedTerritory,
                valueAllowUnset: true"></select>

            <label for="showTags" >Show tag kickers</label>
            <input id="showTags" type="checkbox" data-bind="checked: meta.showTags" />

            <label for="showSections" >Show section kickers</label>
            <input id="showSections" type="checkbox" data-bind="checked: meta.showSections" />

            <label for="hideKickers" >Suppress tone kickers</label>
            <input id="hideKickers" type="checkbox" data-bind="checked: meta.hideKickers" />

            <!-- ko if: !(
			 meta.type() === 'scrollable/small' ||
			 meta.type() === 'scrollable/medium' ||
			 meta.type() === 'static/medium/4')
			-->
			<label for="showDateHeader">Show date in header</label>
            <input id="showDateHeader" type="checkbox" data-bind="checked: meta.showDateHeader" />
            <!-- /ko -->

            <!-- ko if: !(
			 meta.type() === 'scrollable/small' ||
			 meta.type() === 'scrollable/medium' ||
			 meta.type() === 'static/medium/4')
			-->
			<label for="showLatestUpdate">Show latest update in header</label>
            <input id="showLatestUpdate" type="checkbox" data-bind="checked: meta.showLatestUpdate" />
            <!-- /ko -->

            <label for="excludeFromRss">Exclude from RSS</label>
            <input id="excludeFromRss" type="checkbox" data-bind="checked: meta.excludeFromRss" />

            <!-- ko if: !(
			 meta.type() === 'scrollable/small' ||
			 meta.type() === 'scrollable/medium' ||
			 meta.type() === 'static/medium/4')
			-->
            <label for="hideShowMore">Hide show more</label>
            <input id="hideShowMore" type="checkbox" data-bind="checked: meta.hideShowMore" />
            <!-- /ko -->

            <label>No curation</label>
            <input type="checkbox" data-bind="
                checked: meta.uneditable" />

            <label for="displayEditWarning">Display edit warning</label>
            <input id="displayEditWarning" type="checkbox" data-bind="checked: meta.frontsToolSettings.displayEditWarning" />

            <!-- ko if: (
			 meta.type() === 'scrollable/small' ||
			 meta.type() === 'scrollable/medium' ||
			 meta.type() === 'static/medium/4' ||
			 meta.type() === 'flexible/general')
			-->
			<label for="suppressImages">Suppress images</label>
            <input id="suppressImages" type="checkbox" data-bind="checked: meta.displayHints.suppressImages" />
            <!-- /ko -->

            <div class="platform-edit">
                <span>Platform: </span><span data-bind="text: getPlatform()"></span>
                <!-- ko if: !thisIsPlatformSpecificCollection && parents().length <= 1 -->
                <span class="tools"><button class="tool" data-bind="click: $parents[1].splitCollection.bind($parents[1], meta, parents)">Split into app/web</button></span>
                <!-- /ko -->
                <!-- ko if: thisIsPlatformSpecificCollection -->
                <span class="tools"><button class="tool" data-bind="
                  disable: !$parents[1].isUniqueCollection(meta.displayName()),
                  click: $parents[1].changeToAnyPlatform.bind($parents[1], meta)">Change to any</button></span>
                <!-- /ko -->
            </div>

            <div class="tools">
                <button class="tool tool-save-container" data-bind="
                    click: save.bind($data, $parents[1])">Save container</button>

                <button class="tool tool--rhs tool--remove-button" data-bind="
                    click: $parents[1].depopulateCollection">Remove</button>
            </div>
        </div>
        <!-- /ko -->

    </div>
</script>