{{ theme:partial src="audio/now-playing" }}

<div class="sermon-background">
  <div class="w-container sermon-container">
    {{ theme:partial src="audio/player-controls" }}

    {{ theme:partial src="audio/side-nav"}}

    <div class="sermon-content-scroll">
      <div class="sermon-sorting">
          <div class="breadcrumbs sermon-crumb">
            {{ nav:breadcrumbs include_home="no" }}
              {{ if is_current }}
                  {{ title }}
              {{ else }}
                  <a class="sermon-crumb" href="{{ url }}">{{ title }}</a>
                  >
              {{ endif }}
            {{ /nav:breadcrumbs }}
          </div>
        <div class="current-category-title">{{ title }}</div>
        <div class="breadcrumbs">All sermons that cover the book of {{ title }}</div>
      </div>
      <div class="w-tabs" data-duration-in="300" data-duration-out="100">
        <div class="w-tab-menu sermon-subcat-tabs">
          <a class="w-tab-link w--current" style="display:none" data-w-tab="all">
            <div> </div>
          </a>
        </div>
        <div class="w-tab-content minfix">
          <div class="w-tab-pane" data-w-tab="all">
            <ul class="w-list-unstyled sermon-listing">
              <li class="sermon-list-titles">
                <div class="w-row">
                  <!-- <div class="w-col w-col-1 w-col-small-1 w-col-tiny-1">
                    <div>Date</div>
                  </div> -->
                  <div class="w-col w-col-3 w-col-small-2 w-col-tiny-2">
                    <div>Chapter/Verse</div>
                  </div>
                  <div class="w-col w-col-5 w-col-small-6 w-col-tiny-6">
                    <div>Sermon Name</div>
                  </div>
                  <div class="w-col w-col-2 w-col-small-2 w-col-tiny-2">
                    <div>Speaker</div>
                  </div>
                  <div class="w-col w-col-2 w-col-small-2 w-col-tiny-2">
                    <div>Save/Reads</div>
                  </div>
                </div>
              </li>
              <li>

<ul class="w-list-unstyled playlist">
  {{ entries:listing folder="/sermons*" taxonomy="true" sort="ref_verse asc" }}
    <li class="sermon-detail">
      <div class="w-row detail-lines">

        <div class="w-col w-col-3 w-col-small-2">
          <div
            class        = "sermon-meta"
            data-title   = "{{ title }}"
            data-speaker = "{{ speaker:0|title }}"
            data-date    = "{{ if date|format:y == "10" }}{{ else }}|&nbsp;{{ date format='l M. j, Y' }} {{ /if }}"
            data-ref     = "{{ ref_verse }}"
          >
            {{ ref_verse }}
          </div>
        </div>


        <div class="w-col w-col-5 w-col-small-6">
          
          <a
            class     = "sermon-name"
            style     = "padding-left:0px;margin-left:-6px"
            href      = "#top"
            data-src  = "{{ audio:0:url }}"
          >
          {{ title|title }}
          </a>
        </div>


        <div class="w-col w-col-2 w-col-small-2">
          <div
            class        = "sermon-meta"
            style        = "padding-left:0px;"
            data-title   = "{{ title }}"
            data-speaker = "{{ speaker:0|title }}"
            data-ref     = "{{ ref_verse }}"
          >
           {{ speaker }} <a class="sermon-meta" href="/sermons/speaker/{{ name|slugify }}">{{ name|title }}{{ /speaker }}</a>
          </div>
        </div>


        <div class="w-col w-col-2 w-col-small-2">
          <a
            href     = "{{ audio:0:url }}"
            download = "{{ title|slugify }}.{{ audio:0:extension }}"
            class    = "icon player"
          >📥</a>
          {{ if pdf:0:url }}
          <a
            href     = "{{ pdf:0:url }}"
            download = "{{ title|slugify }}.{{ pdf:0:extension }}"
            class    = "icon player"
          >📄</a>
          {{ /if }}
        </div>
      </div>
    </li>
  {{ /entries:listing }}
</ul>



              </li>
            </ul>
          </div>

        </div>
      </div>
      <a href="#top" class="backtoplink">Back To Top</a>
    </div>
  </div>
</div>