<div class="umb-tags-editor">
    <ng-form name="vm.tagEditorForm">

        <div ng-if="vm.isLoading">
            <localize key="loading">Loading</localize>...
        </div>

        <div ng-if="!isLoading">

            <input type="hidden" name="tagCount" ng-model="vm.viewModel.length" val-property-validator="vm.validateMandatory" />

            <span ng-repeat="tag in vm.viewModel track by $index" class="label label-primary tag" ng-keyup="vm.onKeyUpOnTag(tag, $event)" tabindex="0">
                <span ng-bind-html="tag"></span>

                <umb-icon
                    ng-if="!vm.readonly"
                    icon="icon-trash"
                    class="btn-icon"
                    ng-click="vm.showPrompt($index, tag)"
                    localize="title"
                    title="@buttons_deleteTag">
                </umb-icon>

                <umb-confirm-action 
                    ng-if="vm.promptIsVisible === $index"
                    direction="left"
                    on-confirm="vm.removeTag(tag)"
                    on-cancel="vm.hidePrompt()">
                </umb-confirm-action>
            </span>

            <input type="text"
                   id="{{vm.inputId}}"
                   class="typeahead tags-{{vm.inputId}}"
                   ng-model="vm.tagToAdd"
                   ng-keydown="vm.addTagOnEnter($event)"
                   ng-blur="vm.addTag()"
                   ng-maxlength="200"
                   maxlength="200"
                   localize="placeholder"
                   placeholder="@placeholders_enterTags"
                   aria-labelledby="{{vm.inputId}}"
                   ng-readonly="vm.readonly" />

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