<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
      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>

<footer />
