<div class="pull-right" ng-show="tag.writable">
  <button class="btn btn-danger" ng-click="deleteTag(tag)"><span class="fas fa-trash"></span> {{ 'delete' | translate }}</button>
</div>

<div class="page-header">
  <h1>{{ tag.name }}&nbsp;</h1>
</div>

<div class="well col-lg-8" ng-show="tag.writable">
  <form class="form-horizontal" name="editTagForm" novalidate>
    <div class="form-group" ng-class="{ 'has-error': !editTagForm.name.$valid, success: editTagForm.name.$valid }">
      <label class="col-sm-2 control-label" for="inputName">{{ 'tag.edit.name' | translate }}</label>

      <div class="col-sm-6">
        <input type="text" name="name" class="form-control" id="inputName"
          ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1 && $value.indexOf(\':\') == -1' }">
      </div>
    </div>

    <div class="form-group" ng-class="{ 'has-error': !editTagForm.color.$valid, success: editTagForm.color.$valid }">
      <label class="col-sm-2 control-label" for="inputColor">{{ 'tag.edit.color' | translate }}</label>

      <div class="col-sm-2">
        <div class="input-group" id="inputColor" ng-class="{ 'has-error': !editTagForm.color.$valid && tagForm.$dirty }">
          <span colorpicker class="input-group-addon btn btn-default" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span>
          <button class="btn btn-default" ng-click="hexaField = true" ng-show="!hexaField"><span class="fas fa-microchip"></span></button>
          <input type="text" name="color" class="form-control" ng-maxlength="7" ng-model="tag.color" ng-show="hexaField">
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label" for="inputParent">{{ 'tag.edit.parent' | translate }}</label>

      <div class="col-sm-6">
        <select class="form-control" ng-model="tag.parent" id="inputParent">
          <option value="" ng-selected="!tag.parent"></option>
          <option ng-repeat="tag0 in tags"
                  ng-if="tag0.id != tag.id"
                  ng-selected="tag.parent == tag0.id"
                  value="{{ tag0.id }}">{{ tag0.name }}</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-primary" ng-click="edit()" ng-disabled="!editTagForm.$valid">
          <span class="fas fa-pencil-alt"></span> {{ 'save' | translate }}
        </button>
      </div>
    </div>
  </form>
</div>

<div class="well col-lg-8">
  <p translate="tag.edit.info" translate-values="{ name: tag.name, color: tag.color }"></p>

  <acl-edit source="tag.id"
            acls="tag.acls"
            writable="tag.writable"
            creator="tag.creator"></acl-edit>
</div>