<navbar icon="fa fa-fw fa-list" title="Playlists" title-url="playlists"></navbar><div class="page-container" ng-form="playlistEditForm"><div class="page-header"><h1 ng-show="ctrl.isNew()">New Playlist</h1><h1 ng-show="!ctrl.isNew()">Edit Playlist</h1></div><p class="playlist-description">A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.</p><div class="gf-form-group"><div class="gf-form"><span class="gf-form-label width-7">Name</span> <input type="text" required ng-model="ctrl.playlist.name" class="gf-form-input max-width-21"></div><div class="gf-form"><span class="gf-form-label width-7">Interval</span> <input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="gf-form-input max-width-21"></div></div><div class="gf-form-group"><h3 class="page-headering">Dashboards</h3></div><div class="row"><div class="col-md-6"><div class="playlist-search-containerwrapper"><div class="max-width-32"><h5 class="page-headering playlist-column-header">Available</h5><div style=""><playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search></div></div></div><div ng-if="ctrl.filteredDashboards.length > 0"><table class="grafana-options-table playlist-available-list"><tr ng-repeat="playlistItem in ctrl.filteredDashboards"><td><i class="icon-gf icon-gf-dashboard"></i> &nbsp;&nbsp;{{playlistItem.title}} <i class="fa fa-star" ng-show="playlistItem.isStarred"></i></td><td class="add-dashboard"><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;"><table class="grafana-options-table playlist-available-list"><tr ng-repeat="tag in ctrl.filteredTags"><td><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></td><td class="add-dashboard"><button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addTagPlaylistItem(tag)"><i class="fa fa-plus"></i> Add to playlist</button></td></tr></table></div></div><div class="col-md-6"><h5 class="page headering playlist-column-header">Selected</h5><table class="grafana-options-table playlist-available-list"><tr ng-repeat="playlistItem in ctrl.playlistItems"><td ng-if="playlistItem.type === 'dashboard_by_id'"><i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}</td><td 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 class="selected-playlistitem-settings"><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="gf-form-button-row"><a class="btn btn-success" ng-show="ctrl.isNew()" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Create new playlist</a> <a class="btn btn-success" ng-show="!ctrl.isNew()" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a> <a class="btn-text" ng-click="ctrl.backToList()">Cancel</a></div></div>