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

  <div class="sermon-background">
    <div class="w-container sermon-container">
      <div class="player-controls" style="height:56px;color:#000;">
        {{ theme:partial src="audio/player-controls" }}
      </div>
      
      {{ 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 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-6 w-col-small-6">
                          <div>
                              Series Name
                          </div>
                        </div>
                        <div class="w-col w-col-4 w-col-small-4">
                          <div>Speaker</div>
                        </div>
                        <div class="w-col w-col-2 w-col-small-2">
                          <div>Date</div>
                        </div>
                      </div>
                    </li>
                    {{ pages:listing folder="{segment_1}/{segment_2}" }}
                      <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" href="{{ url }}">{{ title }}</a>
                          </div>
                          <div class="w-col w-col-4 w-col-small-4">
                            <div class="sermon-meta">{{ 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">
                            <div class="sermon-meta">{{ series_date format="M, Y" or "--" }}</div>
                          </div>
                        </div>
                      </li>
                    {{ /pages:listing }}
                    
                  </ul>
                </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>