<div ng-controller="Umbraco.Editors.TemplateSectionsController as vm">

    <form name="templateSectionsForm" novalidate val-form-manager>

    <umb-editor-view>

        <umb-editor-header
            name="model.title"
            name-locked="true"
            hide-alias="true"
            hide-icon="true"
            hide-description="true">
        </umb-editor-header>

        <umb-editor-container>
            <umb-box>
                <umb-box-content>

                    <div class="umb-insert-code-box" ng-click="vm.select('renderBody')">
                        <div class="umb-insert-code-box__check" ng-class="{'umb-insert-code-box__check--checked': model.insertType === 'renderBody'  }"><i class="icon icon-check"></i></div>
            
                        <div class="umb-insert-code-box__title"><localize key="template_renderBody" /></div>
            
                        <div class="umb-insert-code-box__description">
                            <localize key="template_renderBodyDesc" />
                        </div>
                    </div>
            
                    <div class="umb-insert-code-box" ng-click="vm.select('renderSection')">
            
                        <div class="umb-insert-code-box__check" ng-class="{'umb-insert-code-box__check--checked': model.insertType === 'renderSection' }"><i class="icon icon-check"></i></div>
                        <div class="umb-insert-code-box__title"><localize key="template_renderSection" /></div>
                        <div class="umb-insert-code-box__description">
                            <localize key="template_renderSectionDesc" />
                        </div>
            
                        <div ng-if="model.insertType === 'renderSection'" style="margin-top: 20px;">
                            <div style="margin-bottom: 20px;">
                                <label class="bold"><localize key="template_sectionName" /> <span class="red">*</span></label>
                                <input type="text" name="renderSectionName" class="-full-width-input" ng-model="model.renderSectionName" required umb-auto-focus />
                                <span ng-messages="templateSectionsForm.renderSectionName.$error" show-validation-on-submit>
                                    <small class="red" ng-message="required"><localize key="required" /></small>
                                </span>
                            </div>
            
                            <div>
                                <label>
                                    <input type="checkbox" ng-model="model.mandatoryRenderSection" /> <localize key="template_sectionMandatory" />
                                </label>
            
                                <div class="umb-insert-code-box__description">
                                    <localize key="template_sectionMandatoryDesc" />
                                </div>
                            </div>
                        </div>
            
                    </div>
            
                    <div class="umb-insert-code-box" ng-click="vm.select('addSection')">
            
                        <div class="umb-insert-code-box__check" ng-class="{'umb-insert-code-box__check--checked': model.insertType === 'addSection'  }"><i class="icon icon-check"></i></div>
                        <div class="umb-insert-code-box__title"><localize key="template_defineSection" /></div>
                        <div class="umb-insert-code-box__description">
                            <localize key="template_defineSectionDesc" />
                        </div>
            
                        <div ng-if="model.insertType === 'addSection'" style="margin-top: 20px;">
                            <div>
                                <label class="bold"><localize key="template_sectionName" /> <span class="red">*</span></label>
                                <input type="text" name="sectionName" class="-full-width-input" ng-model="model.sectionName" required umb-auto-focus />
                                <span ng-messages="templateSectionsForm.sectionName.$error" show-validation-on-submit>
                                    <small class="red" ng-message="required"><localize key="required" /></small>
                                </span>
                            </div>
                        </div>
            
                    </div>

                </umb-box-content>
            </umb-box>

        </umb-editor-container>

        <umb-editor-footer>
            <umb-editor-footer-content-right>
                <umb-button
                    type="button"
                    button-style="link"
                    label-key="general_close"
                    shortcut="esc"
                    action="vm.close()">
                </umb-button>
                <umb-button
                    type="button"
                    button-style="success"
                    label-key="general_submit"
                    action="vm.submit(model)">
                </umb-button>
            </umb-editor-footer-content-right>
        </umb-editor-footer>

    </umb-editor-view>

    </form>

</div>
