<div ng-controller="Umbraco.Overlays.TemplateSectionsOverlay as vm">

    <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 />
                <small class="red" val-msg-for="renderSectionName" val-toggle-msg="required"><localize key="required" /></small>
            </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 />
                <small class="red" val-msg-for="sectionName" val-toggle-msg="required"><localize key="required" /></small>
            </div>
        </div>

    </div>

</div>