{% extends "ui/browse/base.html" %}
{% load bootstrap_pagination thumbnail ui_tags %}

{% block title %}Narrators{% endblock %}
{% block pagetitle %}Narrators{% endblock %}

{% block breadcrumbs %}{{ block.super }}
<li>Narrators</li>
{% endblock breadcrumbs %}

{% block content %}
<section class="container" id="portfolio">

  <div class="row">
	<div class="col-sm-10 col-md-10">

      <h1>
        Narrators
      </h1>
      <p>
        Narrators are the interview subjects of oral histories contained in the Densho Digital Repository. Our interviewees, or narrators, share their life histories to preserve history, educate the public, and promote tolerance. We urge our users to approach these materials in the same spirit.
      </p>

    </div>
  </div> <!-- .row header -->

  <div class="row"> <!-- results content -->
    <div class="col-sm-12 col-md-12">
      <!--  view selection tabs -->
      <div class="tabs no-margin-top" style="margin:10px 0;">

        <ul id="narrator-tabs" class="nav nav-tabs">
          <li class="gallery {% if tab == "gallery" %}active{% endif %}">
            <a href="#gallery_tab" data-toggle="tab">
              <i class="fa fa-th"></i> Gallery view
            </a>
          </li>
          <li class="list {% if tab == "list" %}active{% endif %}">
            <a href="#list_tab" data-toggle="tab">
              <i class="fa fa-list"></i> List view
            </a>
          </li>
        </ul>

        <div class="tab-content">

          <div id="gallery_tab" class="tab-pane {% if tab == "gallery" %}active{% endif %}">

            <div id="item-count">
              {{ paginator.count }} narrators<br/>
            </div>

{% if paginator.num_pages > 1 %}
{% bootstrap_paginate page range=10 show_first_last="true" %}
{% endif %}

            <div class="row">
              <ul class="sort-destination isotope fullwidth" data-sort-id="isotope-list">

{% for narrator in page.object_list %}
<li class="isotope-item"><!-- slide item -->
  <div class="item-box">
    <figure>
      <!-- narrator.id -->
      <a class="item-hover" href="{{ narrator.links.html }}" data-plugin-options='{"type":"image"}'>
        <span class="overlay color2"></span>
        <span class="inner">
          <span class="block fa fa-user fsize40"></span>
          <span class="fsize16" style="line-height:1;">{{ narrator.display_name }}</span>
        </span>
      </a>
      <!-- narrator.image_url -->
      <img src="{{ narrator.links.img }}" class="img-responsive" width="260" height="260" alt="">
    </figure>
  </div>
</li>
{% endfor %}

              </ul>
            </div><!-- /.row gallery -->

{% if paginator.num_pages > 1 %}
{% bootstrap_paginate page range=10 show_first_last="true" %}
{% endif %}

          </div> <!-- end gallery_tab -->
          <div id="list_tab" class="tab-pane {% if tab == "list" %}active{% endif %}">

            <div id="item-count">
              {{ paginator.count }} narrators<br/>
            </div>

{% if paginator.num_pages > 1 %}
{% bootstrap_paginate page range=10 show_first_last="true" %}
{% endif %}

{% for narrator in page.object_list %}
{% if forloop.first or forloop.counter0|divisibleby:2 %}
            <!-- begin list row -->
            <div class="row">
{% endif %}
<!-- begin list col -->
<div class="col-md-6 col-sm-6">
  <div class="media ">
    <a class="pull-left" href="{{ narrator.links.html }}">
      <img class="media-object" src="{{ narrator.links.img }}" class="img-responsive" width="110px" />
    </a>
    <div class="media-body">
      <h4 class="media-heading">
        <!-- narrator.display_name -->
        <a href="{{ narrator.links.html }}">{{ narrator.display_name }}</a>
      </h4>
      <div class="source muted">
        {{ narrator.bio|truncatewords_html:25 }}
      </div>
    </div><!-- .media-body -->
  </div><!-- .media -->
</div><!-- .col list-col -->

{% if not forloop.counter0|divisibleby:2 %}
            </div> <!-- .row -->
{% endif %}
{% endfor %}

{% if paginator.num_pages > 1 %}
{% bootstrap_paginate page range=10 show_first_last="true" %}
{% endif %}

          </div> <!-- end list_tab -->
        </div> <!-- end tabs content -->

      </div> <!-- end tabs -->
    </div>
  </div> <!-- .row results content -->

  <div class="row">
    <div class="col-sm-12 col-md-12 text-muted text-right">
      <small><a class="api" href="{{ api_url }}">API</a></small>
    </div>
  </div><!-- .row -->

</section><!-- .container-fluid -->
{% endblock content %}