{% extends "ui/facets/base-topics.html" %}
{% load bootstrap_pagination ui_tags %}

{% block title %}{{ term.title }}{% endblock %}
{% block pagetitle %}{{ term.title }}{% endblock %}

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

{% block pagecss %}
<style type="text/css">
.indent0 { padding-left:0px; }
.indent1 { padding-left:30px; }
.indent2 { padding-left:60px; }
.indent3 { padding-left:90px; }
.indent4 { padding-left:120px; }
.indent5 { padding-left:150px; }
</style>
{% endblock pagecss %}

{% block content %}
<section class="container" id="portfolio">
  <div class="row">
    <div class="col-sm-10 col-md-10">

<ol class="breadcrumb">
  <li><a href="{% url "ui-browse-facet" "topics" %}">Topics</a></li>
{% for t in term.breadcrumbs %}
  <li><a href="{{ t.url }}">{{ t.title }}</a></li>
{% endfor %}
</ol>

<h1>{{ term.title }}</h1>
{% if term.description %}
<p>
{{ term.description }}
</p>
{% endif %}

<p>
  {% for t in term.tree %}
  {% if t.id == term.id %}
  <span class="indent{{ t.depth }}">{{ t.title }}</span>
  {% else %}
  <a class="indent{{ t.depth }}" href="{{ t.links.html }}">{{ t.title }}</a>
  {% endif %}
  {% if t.doc_count %}<span class="text-muted">({{ t.doc_count }})</span>{% endif %}
  <br/>
  {% endfor %}
</p>

{% if term.encyc_urls %}
<!-- topic.encycarticles -->
<p>
Related articles from the
<a target="encyc" href="//encyclopedia.densho.org/">Densho Encyclopedia <i class="fa fa-external-link"></i></a>:<br />
<span class="indent1">
{% for article in term.encyc_urls %}
  <a target="encyc" href="{{ article.url }}">{{ article.title }}</a>{% if not forloop.last %},{% endif %}
{% endfor %}
</span>
</p>
{% endif %}

</div><!-- row -->

<!-- --------------------------------------------------------------- -->

{% if page.object_list %}
      <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 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>
              <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 }} items<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 object in page.object_list %}
{% galleryitem object %}
{% endfor %}
                  </ul>
                </div><!-- /.masonry-container -->

{% 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 }} items<br/>
                </div>

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

{% for object in page.object_list %}
{% listitem object %}
{% 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 -->

{% endif %}{# if page.object_list #}

<!-- --------------------------------------------------------------- -->

    </div><!-- .col-sm-10 col-md-10 -->
  </div><!-- .row -->

  <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 #portfolio -->

{% endblock content %}