<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="vm.dialog.cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{vm.title | translate}}</h1>
</div>
<div class="modal-body link-collection-content wizdom-link-collection">
    <form name="form" role="form" novalidate>
        <div class="container-fluid">
            <div class="form-group">
                <label class="control-label">
                    {{'Name' | translate}}
                </label>
                <input type="text" class="form-control" required ng-model="vm.link.name" ng-disabled="vm.link.isSystemLink" />
            </div>
            <div class="form-group">
                <label class="control-label">
                    {{'URL' | translate}}
                </label>
                <input type="text"
                       class="form-control"
                       ng-model="vm.link.url"
                       DISABLEDvalidate="{ required: true,
                                           smarturl: true }"
                       ng-change="vm.validateUrl()"
                       required
                       name="url"
                       show-validation-messages="false"
                       ng-disabled="vm.link.isSystemLink" />

                <p>
                    <div class="alert alert-warning" ng-show="form.url.$touched && form.url.$valid && vm.showUrlWarning">{{"The url address does not look right, are you sure it's correct?" | translate}}</div>
                </p>
            </div>
            <div class="form-group">
                <label class="control-label">
                    {{'Description' | translate}}
                </label>
                <textarea rows="4" type="text" class="form-control" ng-model="vm.link.description"></textarea>
            </div>
            <div ng-if="vm.link.type != 1" class="form-group">
                <label class="control-label">
                    {{'Category' | translate}}
                </label>
                <select class='form-control' ng-model='vm.selectedCategory'>
                    <option ng-repeat="category in vm.categories" ng-if="category.name == 'Uncategorized'" ng-selected="category == vm.selectedCategory" ng-value="category">
                        {{category.name | translate}}
                    </option>
                    <option ng-repeat="category in vm.categories" ng-if="category.name != 'Uncategorized'" ng-selected="category == vm.selectedCategory" ng-value="category">
                        {{category.name}}
                    </option>
                </select>
            </div>
            <div class="form-group">

                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="vm.link.openInNewWindow" />
                        {{"Open in new window" | translate}}
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="vm.link.useIcon" />
                        {{"Use icon" | translate}}
                    </label>
                </div>
            </div>
            <div class="form-group" ng-if="vm.link.useIcon">
                <label class="control-label">
                    {{'Icon' | translate}}
                </label>
                <wizdom365-ui-fabric-icon-picker ng-mouseleave="vm.validateIcon()" hide-color-selector="true" value="{{vm.link.iconName}}" ng-model="vm.link.iconName"></wizdom365-ui-fabric-icon-picker>
                <p>
                    <div class="alert alert-warning" ng-show="vm.showIconWarning">{{"Select an icon to use" | translate}}</div>
                </p>
            </div>
            <div class="form-group" ng-if="!vm.link.useIcon">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="vm.link.isRound" />
                        {{"Round image" | translate}}
                    </label>
                </div>
            </div>
            <div class="form-group" ng-if="!vm.link.useIcon">
                <label class="control-label">
                    {{'Image' | translate}}
                </label>
                <wizdom365-image-picker ng-model="vm.link.imageUrl"></wizdom365-image-picker>
                <img ng-src="{{vm.link.imageUrl}}"
                     style="max-height: 200px; max-width: 200px;"
                     ng-show="vm.link.imageUrl" />
                <a class="glyphicon glyphicon-trash"
                   aria-hidden="true"
                   ng-show="vm.link.imageUrl"
                   ng-click="vm.deleteImage()">
                </a>
            </div>
            <div class="form-group" style="position: relative">
                <label class="control-label">
                    {{'Background color' | translate}}
                </label>
                <div class="input-group">
                    <span class="input-group-addon" style="background-color: {{vm.link.backgroundColor}};"></span>
                    <input class="form-control" type="text" ng-model="vm.link.backgroundColor" colorpicker-with-input="true" colorpicker-parent="true" colorpicker>
                </div>
            </div>
            <div class="form-group" style="position: relative">
                <label class="control-label">
                    {{'Font color' | translate}}
                </label>
                <div class="input-group">
                    <span class="input-group-addon" style="background-color: {{vm.link.fontColor}};"></span>
                    <input class="form-control" type="text" ng-model="vm.link.fontColor" colorpicker-with-input="true" colorpicker-parent="true" colorpicker>
                </div>
            </div>
            <div ng-if="vm.link.type != 3" class="form-group">
                <label class="control-label">
                    {{'Visible for' | translate}}:
                </label>
                <div class="radio"
                     ng-repeat="group in vm.visibilityGroups">
                    <label>
                        <input type="radio"
                               name="visibleFor"
                               ng-model="vm.visibleFor"
                               ng-value="group.value">
                        {{group.name | translate}}
                    </label>
                </div>
                <div ng-repeat="principal in vm.authorizedPrincipals"
                     ng-show="vm.visibleFor == 'selected'">
                    {{(principal.category? '('+principal.category+') ':'')}}{{principal.displayName}}<span ng-if="principal.loginName">&nbsp;&lt;{{principal.loginName}}&gt;</span>
                    <b class="text-danger pointer"
                       ng-click="vm.removeLinkViewer(principal);">
                        {{'Remove' | translate}}
                    </b>
                </div>
                <input type="text"
                       ng-disabled="vm.visibleFor != 'selected'"
                       ng-model="vm.visiblePrincipalSearchTerm"
                       placeholder="{{'Add group or person' | translate}}"
                       typeahead-on-select="vm.addLinkViewer($model);"
                       typeahead="user as (user.category? '('+user.category+') ':'')+user.displayName + (user.loginName ? ' - ' + user.loginName : '') for user in vm.searchForPrincipal($viewValue,true) | limitTo:10"
                       typeahead-loading="loadingLocations"
                       class="form-control"
                       typeahead-min-length="2">
                <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-default wiz-btn-padding"
            ng-click="vm.dialog.cancel();">
        {{'Cancel' | translate}}
    </button>
    <button class="btn btn-primary wiz-btn-padding"
            ng-disabled="form.$invalid || vm.saving || (vm.link.useIcon && vm.link.iconName.icon === '')"
            ng-click="vm.dialog.save();">
        {{'Save' | translate}}
    </button>
</div>