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

{% block parent %}
<!--
<div id="parent">
<a href="{{ object.parent.links.html }}"><span class="label label-default">{{ object.parent.id }}</span></a>
<a href="{{ object.parent.links.html }}">{{ object.parent.title }}</a>
</div>
-->
{% endblock %}

{% block title %}
{{ object.id }} {% if object.title %}&mdash;{% endif %} {{ object.title }} &mdash; Objects
{% endblock %}

{% block pagetitle %}
<span class="label label-default">{{ object.id }}</span>
{{ object.title }} &mdash; Objects
{% endblock %}

{% block breadcrumbs %}{{ block.super }}
{% breadcrumbs object.breadcrumbs True %}
<li>Objects</li>
{% endblock breadcrumbs %}

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

<h2>{{ object.title }} <small>{{ object.id }}</small></h2>

  <p>
     <a class="btn btn-primary btn-sm" href="{% url "ui-object-detail" object.id %}"><i class="fa fa-arrow-circle-left"></i> Back to collection detail</a>
  </p>

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


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

  <div class="row">
    <div class="col-sm-10 col-md-10">
      <div class="input-group">
        {{ form.fulltext }}
        <span class="input-group-btn">
          <button class="btn btn-primary"><i class="fa fa-search"></i></button>
        </span>
      </div>
    </div><!-- .col -->
  </div><!-- .row -->

  <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>Facilities</b><br />{{ form.facility }}
                            </div>
                            <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>
                          <div class="row">
                            <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 request.session.liststyle == "gallery" %}active{% endif %}">
                <a href="#gallery_tab" data-toggle="tab">
                  <i class="fa fa-th"></i> Gallery view
                </a>
              </li>
              <li class="list {% if request.session.liststyle == "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 request.session.liststyle == "gallery" %}active{% endif %}">
                <div id="item-count">
                  {{ paginator.count }} item{{ paginator.count|pluralize }}<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 request.session.liststyle == "list" %}active{% endif %}">
                <div id="item-count">
                  {{ paginator.count }} item{{ paginator.count|pluralize }}<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 #}

  <p>
     <a class="btn btn-primary btn-sm" href="{% url "ui-object-detail" object.id %}"><i class="fa fa-arrow-circle-left"></i> Back to collection detail</a> 
  </p>

    </div><!-- .col-sm-12 col-md-12 -->
  </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-fluid -->
{% endblock content %}

{% block footer %}
{% endblock footer %}