<div class="umb-mediapicker3">

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

    <div class="umb-media-card-grid" ng-class="{'--singleMode':(vm.validationLimit.max === 1 && vm.model.value.length <= 1)}">

        <div style="display:contents;" ui-sortable="vm.sortableOptions" ng-model="vm.model.value" ng-if="vm.loading !== true">

            <div ng-repeat="media in vm.model.value track by media.key" class="umb-media-card-grid__cell">

                <button type="button"
                        ng-if="vm.loading !== true && vm.allowAdd && ((vm.singleMode === true && vm.model.value.length === 0) || vm.singleMode === false)"
                        class="btn-reset umb-media-card-grid--inline-create-button"
                        ng-click="vm.addMediaAt($index, $event)"
                        ng-controller="Umbraco.PropertyEditors.MediaPicker3PropertyEditor.CreateButtonController as inlineCreateButtonCtrl"
                        ng-mousemove="inlineCreateButtonCtrl.onMouseMove($event)">
                        <div class="__plus" ng-style="{'top':inlineCreateButtonCtrl.plusPosY}">
                            <umb-icon icon="icon-add" class="icon"></umb-icon>
                        </div>
                </button>

                <umb-media-card
                    media-key="media.mediaKey"
                    on-name-clicked="vm.editMedia(media, $index, $event)"
                    ng-class="{'--active': vm.activeMediaEntry === media}"
                    has-error="vm.propertyForm.maxCount.$valid === false && $index >= vm.validationLimit.max"
                    allowed-types="vm.allowedTypes">
                    <div class="__actions">
                        <button ng-if="vm.supportCopy" type="button" class="btn-reset __action umb-outline" localize="title" title="actions_copy" ng-click="vm.copyMedia(media); $event.stopPropagation();">
                            <umb-icon icon="icon-documents" class="icon"></umb-icon>
                        </button>
                        <button type="button" class="btn-reset __action umb-outline" localize="title" title="general_remove" ng-click="vm.removeMedia(media); $event.stopPropagation();">
                            <umb-icon icon="icon-trash" class="icon"></umb-icon>
                        </button>
                    </div>
                </umb-media-card>

            </div>
        </div>

        <button ng-if="vm.loading !== true && ((vm.singleMode === true && vm.model.value.length === 0) || vm.singleMode !== true)"
                id="{{vm.model.alias}}"
                type="button"
                class="btn-reset umb-media-card-grid__create-button umb-outline"
                ng-disabled="!vm.allowAdd"
                ng-click="vm.addMediaAt(vm.model.value.length, $event)">
                <div>
                    <umb-icon icon="icon-add" class="icon large"></umb-icon>
                    <localize key="general_add">Add</localize>
                </div>
        </button>

    </div>

    <input type="hidden" name="modelValue" ng-model="vm.model.value" val-server="value" />
    <input type="hidden" name="minCount" ng-model="vm.model.value" val-server="minCount" />
    <input type="hidden" name="maxCount" ng-model="vm.model.value" val-server="maxCount" />

    <div ng-messages="vm.propertyForm.minCount.$error">
        <div class="help text-error" ng-message="minCount">
            <localize key="validation_entriesShort" tokens="[vm.validationLimit.min, vm.validationLimit.min - vm.model.value.length]" watch-tokens="true">Minimum %0% entries, needs <strong>%1%</strong> more.</localize>
        </div>
        <span class="help-inline" ng-message="valServer" ng-bind-html="vm.propertyForm.minCount.errorMsg">></span>
    </div>
    <div ng-messages="vm.propertyForm.maxCount.$error">
        <div class="help text-error" ng-message="maxCount">
            <localize key="validation_entriesExceed" tokens="[vm.validationLimit.max, vm.model.value.length - vm.validationLimit.max]" watch-tokens="true">Maximum %0% entries, <strong>%1%</strong> too many.</localize>
        </div>
        <span class="help-inline" ng-message="valServer" ng-bind-html="vm.propertyForm.maxCount.errorMsg"></span>
    </div>

    <ng-form name="vm.modelValueForm">
        <input type="hidden" name="modelValue" ng-model="vm.model.value.length" ng-required="vm.model.validation.mandatory && vm.model.value.length === 0" />
    </ng-form>

</div>
