energylink/public/app/features/playlist/partials/playlist.html

<navbar title="Playlists" title-url="playlists" icon="fa fa-fw fa-list" subnav="true">
	<ul class="nav">
		<li ng-class="{active: ctrl.isNew()}" ng-show="ctrl.isNew()"><a href="datasources/create">New</a></li>
		<li class="active" ng-show="!ctrl.isNew()"><a href="playlists/edit/{{ctrl.playlist.id}}">{{ctrl.playlist.name}}</a></li>
	</ul>
</navbar>

<div class="page-container" ng-form="playlistEditForm">
  <div class="page">
    <h2 ng-show="ctrl.isNew()">New playlist</h2>
    <h2 ng-show="!ctrl.isNew()">Edit playlist</h2>

    <h4>Name and interval</h4>

    <div style="margin-bottom: 10px;">
      <div>
        <div class="tight-form">
          <ul class="tight-form-list">
            <li class="tight-form-item" style="width: 100px">
              Name
            </li>
            <li>
              <input type="text" required ng-model="ctrl.playlist.name" class="input-xlarge tight-form-input">
            </li>
          </ul>
          <div class="clearfix"></div>
        </div>
        <div class="tight-form last">
          <ul class="tight-form-list">
            <li class="tight-form-item" style="width: 100px">
              Interval
            </li>
            <li>
              <input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="input-xlarge tight-form-input">
            </li>
          </ul>
          <div class="clearfix"></div>
        </div>
      </div>

      <br>

    </div>
  </div>

  <div class="row">
    <div class="span5 pull-left">
      <h5>Add dashboards</h5>
      <div style="">
        <playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="span5 pull-left" ng-if="ctrl.filteredDashboards.length > 0">
			<h5>Search results ({{ctrl.filteredDashboards.length}})</h5>
       <table class="grafana-options-table">
        <tr ng-repeat="playlistItem in ctrl.filteredDashboards">
          <td style="white-space: nowrap;">
            {{playlistItem.title}}
          </td>
          <td style="text-align: center">
            <button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
              <i class="fa fa-plus"></i>
              Add to playlist
            </button>
          </td>
        </tr>
      </table>
    </div>
    <div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0">
      <div class="row">
        <div class="span6 offset1">
          <div ng-repeat="tag in ctrl.filteredTags" class="pointer" style="width: 180px; float: left;"
            ng-class="{'selected': $index === selectedIndex }"
            ng-click="ctrl.addTagPlaylistItem(tag, $event)">
            <a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
              <i class="fa fa-tag"></i>
              <span>{{tag.term}} &nbsp;({{tag.count}})</span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="span5 pull-left">
      <h5>Added dashboards</h5>
      <table class="grafana-options-table">
        <tr ng-repeat="playlistItem in ctrl.playlistItems">
          <td style="white-space: nowrap;" ng-if="playlistItem.type === 'dashboard_by_id'">
            {{playlistItem.title}}
          </td>
          <td style="white-space: nowrap;"  ng-if="playlistItem.type === 'dashboard_by_tag'">
            <a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title">
              <i class="fa fa-tag"></i>
              <span>{{playlistItem.title}}</span>
            </a>
          </td>

          <td style="text-align: right">
            <button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
              <i class="fa fa-arrow-up"></i>
            </button>
            <button class="btn btn-inverse btn-mini" ng-hide="$last" ng-click="ctrl.movePlaylistItemDown(playlistItem)">
              <i class="fa fa-arrow-down"></i>
            </button>
            <button class="btn btn-inverse btn-mini" ng-click="ctrl.removePlaylistItem(playlistItem)">
              <i class="fa fa-remove"></i>
            </button>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <div class="clearfix"></div>

  <div class="pull-left" style="margin-top: 25px;">
    <!-- <div class="tight-form"> -->
      <button type="button"
              class="btn btn-success"
              ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
              ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</button>
      <button type="button"
              class="btn btn-inverse"
              ng-click="ctrl.backToList()">Cancel</button>
    <!-- </div> -->
  </div>

  <div class="clearfix"></div>
</div>