<div class="row">
  <div class="col-md-4">
    <div class="well well-3d">
      <form name="tagForm" novalidate>
        <p class="input-group" ng-class="{ 'has-error': !tagForm.name.$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>
          <input type="text" name="name" ng-attr-placeholder="{{ 'tag.new_tag' | translate }}" class="form-control"
            ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1' }">
          <span class="input-group-addon btn btn-primary" ng-disabled="!tagForm.$valid" ng-click="addTag()">{{ 'add' | translate }}</span>
        </p>
        <span class="help-block" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</span>
      </form>

      <p class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
        <input type="search" class="form-control" ng-attr-placeholder="{{ 'tag.search' | translate }}" ng-model="search.name">
      </p>

      <table class="row table table-hover table-tags">
        <tbody>
          <tr ng-repeat="tag in tags | filter:search" class="pointer"
              ng-class="{ active: $stateParams.id == tag.id }" ng-click="viewTag(tag.id)">
            <td>
              <span class="glyphicon glyphicon-tag"></span>&nbsp;
              <span class="label label-info" ng-style="{ 'background': tag.color }">{{ tag.name }}</span>
            </td>
            <td class="col-xs-1">
              <a href="#/tag/{{ tag.id }}" class="btn btn-primary pull-right" title="{{ 'tag.edit_tag' | translate }}">
                <span class="glyphicon glyphicon-pencil"></span>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="col-md-8">
    <div ui-view="tag"></div>
  </div>
</div>