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

.directive 'mopidyNextButton', ->
  restrict: 'E'
  replace: true
  template: '
    <button class="button button-icon icon ion-ios7-skipforward"
      ng-click="playback.next()"></button>'

.directive 'mopidyPreviousButton', ->
  restrict: 'E'
  replace: true
  template: '
    <button class="button button-icon icon ion-ios7-skipbackward"
      ng-click="playback.previous()"></button>'

.directive 'mopidySeekSlider', ->
  restrict: 'E'
  replace: true
  scope: true
  template: '
    <div class="range">
      <i>{{slider.position | time}}</i>
      <input integer type="range"

        ng-mousedown="startSeek()"
        ng-mouseup="endSeek()">
      <i>{{slider.length | time}}</i>
    </div>
    '''
  controller: ['$scope', ($scope) ->
    seeking = false

