{% extends 'podcast/base.html' %}
{% load url from future %}
{% load script_tags %}
{% load core_tags %}
{% block title %}Podcast: {{ podcast.title }}{% endblock %}
{% block custom_meta %}
{% open_graph_meta_tags podcast %}
{% endblock %}
{% block custom_css %}
<link type="text/css" href="{{ STATIC_URL }}js/jplayer/skins/blue.monday/jplayer.blue.monday.css" rel="stylesheet" />
{% endblock %}
{% block custom_js %}
<script type="text/javascript" src="{{ STATIC_URL }}js/jplayer/jquery.jplayer.min.js"></script>

<script type="text/javascript">
//<![CDATA[
    var jplayer_media = {{ jplayer_media|safe }};
    $(document).ready(function(){
      $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", jplayer_media);
        },
        swfPath: "{{ STATIC_URL }}js/jplayer",
        supplied: "{{ jplayer_supplied }}"
      });
    });
//]]>
</script>
{% script_tags "social" %}
{% endblock %}
{% block podcast-content %}
<div class="breadcrumbs">
   <a href="{% url 'podcast.views.index' %}">Podcast Index</a> &gt;&gt; {{ podcast.title }}
</div>
<h3>{{ podcast.pubdate|date:"F d, Y" }} &bull; {{ podcast.title }}</h3>
<h4>{{ podcast.subtitle }}</h4>
{{ podcast.summary|linebreaks }}

<p>Listen:</p>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
  <div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
      <div class="jp-gui jp-interface">
        <ul class="jp-controls">
          <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
          <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
          <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
          <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
          <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
          <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
        <div class="jp-time-holder">
          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
          <ul class="jp-toggles">
            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
          </ul>
        </div>
      </div>
      <div class="jp-title">
        <ul>
          <li>{{ podcast.title }} - {{ podcast.subtitle }}</li>
        </ul>
      </div>
      <div class="jp-no-solution">
        <span>Update Required</span>
        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
      </div>
    </div>
  </div>

<br />
<p> Or download:</p>
<ul>
   <li>
   <a href="{{ podcast.enclosure_url }}">Download Now ({{ ext }})</a> &bull;
   {{ podcast.enclosure_length|filesizeformat }} &bull; {{ podcast.duration }}
   </li>
   {% if alt_ext %}
   <li>
      <a href="{{ podcast.alt_enclosure_url }}">Download Now ({{ alt_ext }})</a>
   </li>
   {% endif %}
</ul>
{% social_sharing podcast.search_title podcast.get_absolute_url %}
{% endblock %}