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

    <div style="margin-bottom: 15px;">
        <p><localize key="content_languagesToSendForApproval"></localize></p>
    </div>

    <div ng-if="vm.loading" style="min-height: 50px; position: relative;">
        <umb-load-indicator></umb-load-indicator>
    </div>

    <div class="umb-list umb-list--condensed" ng-if="!vm.loading">

        <div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.modifiedVariantFilter">
            <ng-form name="publishVariantSelectorForm">
                <div class="flex" ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">

                    <umb-checkbox
                        input-id="{{variant.htmlId}}"
                        name="publishVariantSelector"
                        model="variant.save"
                        on-change="vm.changeSelection(variant)"
                        server-validation-field="{{variant.htmlId}}"/>

                    <div>
                        <label for="{{variant.htmlId}}" style="margin-bottom: 2px;">
                            <span>{{ variant.language.name }}</span>
                            <strong ng-if="variant.language.isMandatory" class="umb-control-required">*</strong>

                            <span class="db" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                                <umb-variant-state class="umb-list-item__description" variant="variant"></umb-variant-state>
                            </span>

                            <span class="db" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
                                <span class="db umb-list-item__description text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
                            </span>

                            <umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>

                        </label>
                    </div>
                </div>

            </ng-form>
        </div>
        <br />
    </div>

    <div class="umb-list umb-list--condensed" ng-if="!vm.loading && (vm.variants | filter:vm.unmodifiedVariantFilter).length > 0">
        <div style="margin-bottom: 15px; font-weight: bold;">
            <p><localize key="content_unmodifiedLanguages"></localize></p>
        </div>

        <div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.unmodifiedVariantFilter">
            <div>
                <div style="margin-bottom: 2px;">
                    <span>{{ variant.language.name }}</span>
                    <strong ng-if="variant.language.isMandatory" class="umb-control-required">*</strong>
                </div>
                <umb-variant-state class="umb-list-item__description" variant="variant"></umb-variant-state>
            </div>
        </div>
    </div>

</div>
