<div data-element="editor-languages" ng-controller="Umbraco.Editors.Languages.EditController as vm" class="clearfix">

    <form name="editLanguageForm" no-validate val-form-manager>

        <umb-editor-view>
    
            <umb-editor-header
                name="vm.page.name"
                name-locked="true"
                on-back="vm.back()"
                show-back-button="vm.showBackButton"
                hide-icon="true"
                hide-description="true"
                hide-alias="true">
            </umb-editor-header>
    
            <umb-editor-container class="form-horizontal">

                <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>

                <umb-box ng-if="!vm.loading">
                    <umb-box-content>

                        <umb-control-group label="@general_language" ng-if="vm.availableCultures">
                            <select name="newLang"
                                    class="input-block-level"
                                    ng-model="vm.language.culture"
                                    ng-options="culture.name as culture.displayName for culture in vm.availableCultures"
                                    val-server-field="IsoCode"
                                    required></select>
                            <span ng-messages="editLanguageForm.newLang.$error" show-validation-on-submit >
                                <span class="help-inline" ng-message="required">Required</span>
                                <span class="help-inline" ng-message="valServerField">{{editLanguageForm.newLang.errorMsg}}</span>
                            </span>                            
                        </umb-control-group>

                        <umb-control-group label="@general_settings" class="umb-toggle-group">

                            <div class="umb-toggle-group-item" ng-click="vm.toggleDefault()" ng-class="{'umb-toggle-group-item--disabled': vm.initIsDefault}">
                                <umb-toggle
                                    class="umb-toggle-group-item__toggle"
                                    checked="vm.language.isDefault"
                                    disabled="vm.initIsDefault">
                                </umb-toggle>
                                <div class="umb-toggle-group-item__content" >
                                    <div>{{vm.labels.defaultLanguage}}</div>
                                    <div class="umb-toggle-group-item__description">{{vm.labels.defaultLanguageHelp}}</div>
                                </div>
                            </div>

                            <div class="umb-toggle-group-item" ng-click="vm.toggleMandatory()">
                                <umb-toggle
                                    class="umb-toggle-group-item__toggle"
                                    checked="vm.language.isMandatory">
                                </umb-toggle>
                                <div class="umb-toggle-group-item__content">
                                    <div>{{vm.labels.mandatoryLanguage}}</div>
                                    <div class="umb-toggle-group-item__description">{{vm.labels.mandatoryLanguageHelp}}</div>
                                </div>
                            </div>

                            <div class="umb-alert umb-alert--info" style="margin-top: 20px;" ng-if="vm.showDefaultLanguageInfo">
                                <localize key="languages_changingDefaultLanguageWarning"></localize>
                            </div>

                        </umb-control-group>

                        <umb-property property="properties.fallbackLanguage">
                            <div>
                                <select name="fallbackLanguage"
                                        ng-model="vm.language.fallbackLanguageId"
                                        ng-options="l.id as l.name for l in vm.availableLanguages">
                                    <option value="">{{vm.labels.noFallbackLanguageOption}}</option>
                                </select>
                            </div>
                        </umb-property>

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

            <umb-editor-footer>

                <umb-editor-footer-content-left>
                    <umb-breadcrumbs
                        ancestors="vm.breadcrumbs"
                        allow-on-open="true"
                        on-open="vm.goToPage(ancestor)">
                    </umb-breadcrumbs>
                </umb-editor-footer-content-left>

                <umb-editor-footer-content-right>
                    <umb-button 
                        type="button"
                        action="vm.save()"
                        state="vm.page.saveButtonState"
                        button-style="success"
                        shortcut="ctrl+s"
                        label="Save"
                        label-key="buttons_save"
                        disabled="vm.loading">
                    </umb-button>
                </umb-editor-footer-content-right>

            </umb-editor-footer>
    
        </umb-editor-view>

    </form>
    
</div>
