{{ 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">{{ segment_2|deslugify|title or "Browse" }}</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 {{ if get:tab == "overview" || get:tab == "" }} w--current {{ else }} {{ /if}} w-inline-block sermon-subcat-link" data-w-tab="overview">
                <div>Overview</div>
              </a>
              <a class="w-tab-link {{ if get:tab == "recent" }} w--current {{ else }} {{ /if}} w-inline-block sermon-subcat-link" data-w-tab="recent">
                <div>Recent</div>
              </a>
          </div>
          <div class="w-tab-content minfix">
            <div class="w-tab-pane" data-w-tab="recent" >
              <ul class="w-list-unstyled sermon-listing">
                <li class="sermon-list-titles">
                  <div class="w-row">

                    <div class="w-col w-col-6 w-col-small-6 w-col-tiny-6">
                      <div>Date - Sermon Name - Reference</div>
                    </div>
                    <div class="w-col w-col-3 w-col-small-3 w-col-tiny-3">
                      <div>Speaker</div>
                    </div>
                    <div class="w-col w-col-3 w-col-small-3 w-col-tiny-3">
                      <div>Save/Read/Share</div>
                    </div>
                  </div>
                </li>
                <li>

                  <ul class="w-list-unstyled playlist">
                    {{ entries:listing folder="sermons*" since="-6 months"  }}
                      <li class="sermon-detail">
                        <div class="w-row detail-lines">

                          <div class="w-col w-col-6 w-col-small-6">

                            <a
                              class     = "sermon-name date"
                              href      = "#top"
                              data-src  = "{{ audio:0:url }}"
                            >
                            <span style="color: #878787; font-size: 12px; line-height:18px; font-weight: 600; position: absolute; left: 0px;">{{ date format="m/y" }}&nbsp; </span> {{ title|title }} - <span class="sermon-meta">{{ ref_verse }}</span>
                            </a>
                          </div>

                          <div class="w-col w-col-3 w-col-small-3">
                            <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 }}"
                            >
                              {{ speaker }}<a class="sermon-meta" href="/sermons/speaker/{{ name|slugify }}">{{ name|title }}{{ /speaker }}</a>

                            </div>
                          </div>

                          <div class="w-col w-col-3 w-col-small-3">
                            <a
                              href     = "{{ audio:0:url }}"
                              download = "{{ title|slugify }}.{{ audio:0:extension }}"
                              class    = "icon player"
                               style="font-size: 30px;padding-left: 3px;padding-right: 3px;"
                            >📥</a>
                            {{ if pdf:0:url }}
                              <a
                                href     = "{{ pdf:0:url }}"
                                download = "{{ title|slugify }}.{{ pdf:0:extension }}"
                                class    = "icon player"
                                target   = "_blank"
                                 style="font-size: 30px;padding-left: 3px;padding-right: 3px;"
                              >📄</a>
                            {{ /if }}
                              <a href="{{permalink}}?autoplay=true" class="icon player" style="font-size: 30px;padding-left: 3px;padding-right: 3px;">🔗</a>

                             <span class='st_facebook' st_title='{{ title |title}}' st_url='{{permalink}}?autoplay=true'></span>
                              <span class='st_twitter' st_title='{{ title |title}}' st_url='{{permalink}}?autoplay=true'></span>

                          </div>
                        </div>
                      </li>
                    {{ /entries:listing }}
                  </ul>


                </li>

              </ul>
            </div>


            <div class="w-tab-pane w--active center-grid-fix" data-w-tab="overview">
              {{ pages:listing from="/sermons" limit="6" }}
                <a class="w-inline-block ministry-block sermon" href="{{ url }}">
                  <div class="ministry-category-title">{{ title|title }}
                    <br><span class="see-more">see more</span>
                  </div><img class="ministry-category-img" src="{{ top_img }}" alt="{{ title }}" >
                </a>
              {{ /pages:listing }}

            </div>


          </div>
        </div>
      </div>
    </div>
  </div>