<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" ng-if="ctrl.canEditPlaylists">
      <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 ng-if="ctrl.canEditPlaylists" style="width: 78px"></th>
      </thead>
      <tr ng-repeat="playlist in ctrl.playlists">
        <td ng-class="{'link-td': ctrl.canEditPlaylists}">
          <a ng-if="ctrl.canEditPlaylists" href="playlists/edit/{{playlist.id}}">{{playlist.name}}</a>
          <span ng-if="!ctrl.canEditPlaylists">{{playlist.name}}</span>
        </td>
        <td class="dropdown">
          <button class="btn btn-inverse btn-small" data-toggle="dropdown">
            Start playlist
            <icon name="'angle-down'"></icon>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="{{playlist.startUrl}}">
                <icon name="'play'"></icon> In Normal mode</span>
              </a>
              <a href="{{playlist.startUrl}}?kiosk=tv">
                <icon name="'play'"></icon> In TV mode</span>
              </a>
              <a href="{{playlist.startUrl}}?kiosk=tv&autofitpanels">
                <icon name="'play'"></icon> In TV mode <span class="muted">(with auto fit panels)</span>
              </a>
              <a href="{{playlist.startUrl}}?kiosk">
                <icon name="'play'"></icon> In Kiosk mode</span>
              </a>
              <a ng-href="{{playlist.startUrl}}?kiosk&autofitpanels">
                <icon name="'play'"></icon> In Kiosk mode <span class="muted">(with auto fit panels)</span>
              </a>
            </li>
          </ul>
        </td>
        <td ng-if="ctrl.canEditPlaylists" class="text-right">
          <a ng-click="ctrl.removePlaylist(playlist)" class="btn btn-danger btn-small">
            <icon name="'times'"></icon>
          </a>
        </td>
      </tr>
    </table>
  </div>
  <div ng-if="ctrl.playlists.length === 0">
    <div ng-if="ctrl.canEditPlaylists">
      <empty-list-cta
        title="'There are no playlists created yet'"
        buttonIcon="'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 class="grafana-info-box" ng-if="!ctrl.canEditPlaylists">
      <h5>There are no playlists created yet</h5>
      <p>Unfortunately you don't have permission to create playlists.</p>
    </div>
  </div>
  
</div>

<footer />
