{% 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 -->

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


<form action="" method="get">

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

          <div class="panel-group" id="filters_accordion">
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title">
                          <a id="searchfilters" data-toggle="collapse" data-parent="#filters_accordion" href="#acordion1">
                              <i class="fa fa-filter"></i> Filters
                          </a>
                      </h4>
                  </div>
                  <div id="acordion1" class="collapse {% if request.session.searchfilters == "open" %}in{% endif %}">
                      <div class="panel-body">
                          <div class="row">
                            <div class="col-sm-12 col-md-12">
                              <b>Topics</b><br />
                              {{ form.topics }}
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-sm-3 col-md-3">
                              <b>Format</b><br />{{ form.format }}
                            </div>
                            <div class="col-sm-3 col-md-3">
                              <b>Genre</b><br />{{ form.genre }}
                            </div>
                            <div class="col-sm-3 col-md-3">
                              <b>Usage</b><br />{{ form.rights }}
                            </div>
                          </div>
                          <p>
                            <button class="btn btn-sm btn-primary"><i class="fa fa-filter"></i> Apply filters</button> <span class="muted small" style="padding-left:20px;">Use &lt;Ctrl&gt; or (⌘) keys to select multiple terms</span>
                          </p>
                      </div>
                  </div>
              </div>
          </div>

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


{% 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 %}