<div class="umb-mediapicker3">

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

    <div
        class="dropzone"
        ngf-drop
        ngf-change="vm.handleFiles($files, $invalidFiles)"
        ngf-drag-over-class="'drag-over'"
        ngf-multiple="{{vm.model.config.multiple}}"
        ngf-allow-dir="{{ vm.allowDir }}"
        ngf-drop-disabled="{{!vm.allowDropMedia}}"
        ng-disabled="vm.readonly">

        <div class="drop-overlay">
            <localize key="media_dragAndDropYourFilesIntoTheArea"></localize>
        </div>

        <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)"
                            ng-disabled="!vm.allowAddMedia">
                            <div class="__plus" ng-style="{'top':inlineCreateButtonCtrl.plusPosY}">
                                <umb-icon icon="icon-add" class="icon"></umb-icon>
                            </div>
                    </button>

                    <div ng-if="!media.mediaKey" class="umb-media-card">
                        <div class="__showcase">

                            <div ng-if="media.$uploadProgress < 100" class="__upload-progress-container">
                                <div  class="__upload-progress">
                                    <umb-progress-bar class="__upload-progress-bar" percentage="{{media.$uploadProgress}}"></umb-progress-bar>
                                    <div class="__upload-progress-label" ng-if="media.$uploadProgress === 0">Waiting...</div>
                                    <div class="__upload-progress-label" ng-if="media.$uploadProgress > 0">{{media.$uploadProgress}}%</div>
                                </div>
                            </div>

                            <img
                                ng-if="media.$dataURL"
                                ng-src="{{media.$dataURL}}"
                                title="{{media.name}}"
                                alt="{{media.name}}" />

                            <umb-file-icon ng-if="!media.$dataURL && media.$icon"
                                icon="{{media.$icon}}"
                                size="s"
                                text="{{media.name}}"
                                extension="{{media.$extension}}">
                            </umb-file-icon>

                            <button
                                type="button"
                                class="btn-reset __info"
                                ng-click="vm.editMedia(media, $index, $event)"
                                ng-disabled="media.$uploadProgress < 100">
                                <div class="__name" ng-bind="media.name"></div>
                            </button>

                            <div class="__actions">
                                <button
                                    ng-if="vm.allowRemoveMedia"
                                    type="button" class="btn-reset __action umb-outline"
                                    localize="title"
                                    title="general_remove"
                                    ng-click="vm.removeMedia(media); $event.stopPropagation();"
                                    ng-disabled="media.$uploadProgress < 100">
                                    <umb-icon icon="icon-trash" class="icon"></umb-icon>
                                </button>
                            </div>
                        </div>
                    </div>

                    <umb-media-card
                        ng-if="media.mediaKey"
                        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 ng-if="vm.allowRemoveMedia" 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="button_{{vm.model.alias}}"
                    type="button"
                    class="btn-reset umb-media-card-grid__create-button umb-outline"
                    ng-disabled="!vm.allowAddMedia"
                    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>
    </div>

    <div class="help" ng-repeat="invalidEntry in vm.invalidEntries track by invalidEntry.key">
        <span>{{ invalidEntry.name }}</span>
        <span ng-if="invalidEntry.error" class="text-error">{{ invalidEntry.errorText }}</span>
    </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>
