 .directive 'mopidyNextButton', ->
   restrict: 'E'
   replace: true
-  template: '
+  template: '''
     <button class="button button-icon icon ion-ios7-skipforward"
-      ng-click="playback.next()"></button>'
+      ng-click="playback.next()">
+    </button>
+    '''
 
 .directive 'mopidyPreviousButton', ->
   restrict: 'E'
   replace: true
-  template: '
+  template: '''
     <button class="button button-icon icon ion-ios7-skipbackward"
-      ng-click="playback.previous()"></button>'
+      ng-click="playback.previous()">
+    </button>
+    '''
 
 .directive 'mopidySeekSlider', ->
   restrict: 'E'
   replace: true
   scope: true
-  template: '
+  template: '''
     <div class="range">
       <i>{{slider.position | time}}</i>
       <input integer type="range"

  replace: true
  scope:
    track: '='
  template: '
    <div>
      <h2>{{track.name}}</h2>
      <p>{{track.artists | pluck:"name" | join:", "}}</p>
    </div>'

# .directive('mopidyTrackList', function() {
#   return {

  restrict: 'E'
  replace: true
  scope: true
  template: '''
    <button class="button button-icon icon"
      ng-class="playing ? \'ion-ios7-pause\' : \'ion-ios7-play\'"
      ng-click="toggle()">
    </button>
    '''
  controller: ['$scope', ($scope) ->
    $scope.$watch ->
      $scope.playback.state is 'playing'
