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

<page-header model="ctrl.navModel"></page-header>

<div class="page-container page-body">
  <div ng-if="ctrl.playlists.length > 0">
    <div class="page-action-bar">
      <div class="page-action-bar__spacer"></div>
      <a class="btn btn-primary pull-right" href="playlists/create">
        New playlist
      </a>
    </div>

    <table class="filter-table filter-table--hover">
      <thead>
        <th><strong>Name</strong></th>
        <th style="width: 100px"></th>
        <th style="width: 78px"></th>
      </thead>
      <tr ng-repeat="playlist in ctrl.playlists">
        <td class="link-td">
          <a href="playlists/edit/{{playlist.id}}">{{playlist.name}}</a>
        </td>
        <td class="dropdown">
          <button class="btn btn-inverse btn-small" data-toggle="dropdown">
            Start playlist
            <i class="fa fa-caret-down"></i>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="{{playlist.startUrl}}">
                <i class="fa fa-play"></i> In Normal mode</span>
              </a>
              <a href="{{playlist.startUrl}}?kiosk=tv">
                <i class="fa fa-play"></i> In TV mode</span>
              </a>
              <a href="{{playlist.startUrl}}?kiosk=tv&autofitpanels">
                <i class="fa fa-play"></i> In TV mode <span class="muted">(with auto fit panels)</span>
              </a>
              <a href="{{playlist.startUrl}}?kiosk">
                <i class="fa fa-play"></i> In Kiosk mode</span>
              </a>
              <a ng-href="{{playlist.startUrl}}?kiosk&autofitpanels">
                <i class="fa fa-play"></i> In Kiosk mode <span class="muted">(with auto fit panels)</span>
              </a>
            </li>
          </ul>
        </td>
        <td  class="text-right">
          <a ng-click="ctrl.removePlaylist(playlist)" class="btn btn-danger btn-small">
            <i class="fa fa-remove"></i>
          </a>
        </td>
      </tr>
    </table>
  </div>
  <div ng-if="ctrl.playlists.length === 0">
    <empty-list-cta model="{
      title: 'There are no playlists created yet',
      buttonIcon: 'fa fa-plus',
      buttonLink: 'playlists/create',
      buttonTitle: ' Create Playlist',
      proTip: 'You can use playlists to cycle dashboards on TVs without user control',
      proTipLink: 'http://docs.grafana.org/reference/playlist/',
      proTipLinkTitle: 'Learn more',
      proTipTarget: '_blank'
    }" />
  </div>
</div>