<!DOCTYPE html>
<html class="no-js">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>{{ entry.title }}</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <script src="{{ url_for('static', filename='js/libs/jquery.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/libs/soundmanager2.js') }}"></script>
  <script src="{{ url_for('static', filename='js/libs/bar-ui.js') }}"></script>

  <link rel="apple-touch-icon" sizes="140x140" href="{{ url_for('static', filename='favicon.ico') }}">
  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
  <link href="{{ url_for('static', filename='css/libs/bootstrap.min.css') }}" rel="stylesheet" media="screen">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/libs/bar-ui.css') }}" />

  <script>
    "use strict";
  </script>

</head>

<body>

<div class="sm2-bar-ui full-width fixed">

 <div class="bd sm2-main-controls">

  <div class="sm2-inline-texture"></div>
  <div class="sm2-inline-gradient"></div>

  <div class="sm2-inline-element sm2-button-element">
   <div class="sm2-button-bd">
    <a href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / Pause</a>
   </div>
  </div>

  <div class="sm2-inline-element sm2-inline-status">

   <div class="sm2-playlist">
    <div class="sm2-playlist-target">
     <noscript><p>JavaScript Required.</p></noscript>
    </div>
   </div>

   <div class="sm2-progress">
    <div class="sm2-row">
    <div class="sm2-inline-time">0:00</div>
     <div class="sm2-progress-bd">
      <div class="sm2-progress-track">
       <div class="sm2-progress-bar"></div>
       <div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
      </div>
     </div>
     <div class="sm2-inline-duration">0:00</div>
    </div>
   </div>

  </div>

  <div class="sm2-inline-element sm2-button-element sm2-volume">
   <div class="sm2-button-bd">
    <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
    <a href="#volume" class="sm2-inline-button sm2-volume-control">Volume</a>
   </div>
  </div>

  <div class="sm2-inline-element sm2-button-element">
   <div class="sm2-button-bd">
    <a href="#prev" title="Previous" class="sm2-inline-button sm2-icon-previous">&lt; Previous</a>
   </div>
  </div>

  <div class="sm2-inline-element sm2-button-element">
   <div class="sm2-button-bd">
    <a href="#next" title="Next" class="sm2-inline-button sm2-icon-next">&gt; Next</a>
   </div>
  </div>

  <div class="sm2-inline-element sm2-button-element">
   <div class="sm2-button-bd">
    <a href="#repeat" title="Repeat playlist" class="sm2-inline-button sm2-icon-repeat">&infin; Repeat</a>
   </div>
  </div>

  <div class="sm2-inline-element sm2-button-element sm2-menu">
   <div class="sm2-button-bd">
    <a href="#menu" class="sm2-inline-button sm2-icon-menu">Menu</a>
   </div>
  </div>

 </div>

 <div class="bd sm2-playlist-drawer sm2-element">

  <div class="sm2-inline-texture">
   <div class="sm2-box-shadow"></div>
  </div>

  <!-- playlist content is mirrored here -->

  <div class="sm2-playlist-wrapper">
    <ul class="sm2-playlist-bd">
      <li><a href="{{ url_for('web.serve_book', book_id=mp3file,book_format=audioformat)}}"><b>{% for author in entry.authors %}{{author.name.replace('|',',')}}
        {% if not loop.last %} & {% endif %} {% endfor %}</b> - {{entry.title}}</a></li>
    </ul>
  </div>

 </div>

</div>

<script>
soundManager.setup({
  useHTML5Audio: true,
  preferFlash: false,
  url: '/path/to/swf-files/',
  onready: function() {
    var mySound = soundManager.createSound({
      // id: 'aSound',
      // url: "{{ url_for('web.serve_book', book_id=mp3file,book_format=audioformat)}}"
    });
    mySound.play();
  },
  ontimeout: function() {
    // Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
  }
});
window.calibre = {
        filePath: "{{ url_for('static', filename='js/libs/') }}",
        cssPath: "{{ url_for('static', filename='css/') }}",
        bookUrl: "{{ url_for('static', filename=mp3file) }}/",
        bookmarkUrl: "{{ url_for('web.bookmark', book_id=mp3file, book_format=audioformat.upper()) }}",
        bookmark: "{{ bookmark.bookmark_key if bookmark != None }}",
        useBookmarks: "{{ g.user.is_authenticated | tojson }}"
            };
</script>
</body>

</html>