{% extends "ui/facets/base-facility.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 content %}
<section class="container" id="portfolio">
  <div class="row">
    <div class="col-sm-10 col-md-10">

<ol class="breadcrumb">
{% for t in term.breadcrumbs %}
  <li><a href="{{ t.url }}">{{ t.title }}</a></li>
{% endfor %}
</ol>

<h1>
  {{ term.title }}
</h1>

{% if term.type or term.location_geopoint %}
<p>
  {% if term.type %}<b>{{ term.type }}</b>{% endif %}
  {% if term.type and term.location_geopoint %}</p><p>{% endif %}
  {% if term.location_geopoint.geopoint %}
  Location: <a target="_blank" href="https://www.google.com/maps/@{{ term.location_geopoint.geopoint.lat }},{{ term.location_geopoint.geopoint.lng }},14z">{{ term.location_geopoint.label }} <i class="fa fa-map-marker"></i></a> 
  {% endif %}
</p>
{% endif %}

{% if term.elinks %}
<!-- topic.encycarticles {{term.elinks.url }}-->
<p>
<a target="encyc" href="{{ term.elinks.0.url }}">More information in the Densho Encyclopedia <i class="fa fa-external-link"></i></a>...
</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 %}