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

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

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

{% block pagetitle %}
<span class="label label-default">{{ object.id }}</span>
{{ object.title|safe }}
{% endblock %}

{% block breadcrumbs %}{{ block.super }}
{% breadcrumbs object.breadcrumbs %}
{% endblock breadcrumbs %}

{% block pagecss %}
<link href="https://vjs.zencdn.net/7.0.5/video-js.css" rel="stylesheet">
{% endblock %}

{% block javascript %}
<script src="https://vjs.zencdn.net/7.0.5/video.js"></script>
{% endblock javascript %}


{% block content %}

<section id="shop" class="container">

    <div class="row">

        <!-- left content -->
        <div id="left-col" class="col-sm-7 col-md-7">

            <h2>{{ object.title|safe }}</h2>

            <div id="object-display">
<!--
templatekey: {{ templatekey }}
template:    {{ template }}
IA metadata: {{ object.ia_meta|safe }}
-->
<!-- begin VideoJS player -->
<video id="clip" class="embed-responsive embed-responsive-16by9 video-js vjs-big-play-centered vjs-fluid" controls preload="auto" width="560" height="384" poster="" data-setup="{}">
  <source src="{{ object.ia_meta.files.mp4.url }}" type="video/mp4">
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>
<!-- end VideoJS player-->
            </div><!-- #object-display -->

            {% if signature %}
            <div id="object-download" style="padding-top: 5px;">
              {% if transcripts.interview %}
              <a href="{{ transcripts.interview.links.download }}" class="btn btn-default btn-xs">
                <i class="fa fa-download"></i>
                Download transcript
              </a>
              {% endif %}
{% if object.ia_meta.files.mp4.url %}
              <a href="{{ object.ia_meta.files.mp4.url }}" class="btn btn-default btn-xs">
                <i class="fa fa-download"></i>
                Download MP4
                ({{ signature.size|filesizeformat }})
              </a>
{% endif %}
            </div><!-- #object-download -->
            {% endif %}

            <div id="object-rights">
{% rightspanel object.rights %}
            </div><!-- #object-rights -->

        </div><!-- #left-col .col-sm-7 .col-md-7 -->

        <!-- right meta -->
        <div id="right-col" class="col-sm-5 col-md-5">

            {% addthis %}

            <div class="desc productDescription">
                <!-- entity.partner -->
                <h3 class="page-header">PARTNER</h3>
                    {% include "ui/partnerlogolink.html" %}
                    <!-- entity.entity_id -->
                    <h3 class="page-header">OBJECT ID</h3>
                    <p>
                    {{ object.id }}
                    {% if object.alternate_id != None %}
                      {% if "denshouid" in object.alternate_id %}
                      <span class="small">(Legacy UID: {{ object.alternate_id|legacydenshouid }})</span>
                      {% else %}
                      <span class="small">({{ object.alternate_id }})</span>
                      {% endif %}
                    {% endif %}

                    </p>
                    <!-- entity.collection -->
                    <h3 class="page-header">PARENT COLLECTION</h3>
                    <p>
                    <a href="{{ parent.links.html }}">{{ parent.title }}</a>
                    </p>
                    <!-- entity.description -->
                    <h3 class="page-header">DESCRIPTION</h3>
                    {{ object.description|safe|linebreaks }}
                    <p>
                    {{ object.extent }}
                    </p>

                    <!-- core meta -->
                    <div class="row">
                        <div class="col-md-5 col-sm-5">
                            <!-- entity.creation -->
                            <h3 class="page-header">DATE</h3>
                            <p>
                                {{ object.creation }}
                            </p>
                        </div>
                        <div class="col-md-7 col-sm-7">
                            <!-- entity.location -->
                            <h3 class="page-header">LOCATION</h3>
                            <p>
                              <a href="{% url "ui-search-results" %}?{{ object_location }}">
                                {{ object.location }}
                              </a>
                            </p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5 col-sm-5">
                            <!-- entity.genre -->
                            <h3 class="page-header">OBJECT GENRE</h3>
                            <p>
                              {{ object.genre.label }}
                            </p>
                        </div>
                        <div class="col-md-7 col-sm-7">
                            <!-- entity.format -->
                            <h3 class="page-header">OBJECT FORMAT</h3>
                            <p>
                              {{ object.format.label }}
                            </p>
                        </div>
                    </div><!-- .row -->
                    <div class="row">
                        <div class="col-md-12 col-sm-12">

                            <!-- entity.topic_terms -->
                            <h3 class="page-header">TOPICS</h3>

                            <div id="topics-partial">
                              {% if len_topics > 10 %}
                              <small>
                                <a class="topics-toggle" style="float:right;">
                                  <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                                  show all {{ len_topics }}
                                </a>
                              </small>
                              {% endif %}
                              <ul class="list-unstyled">
                                {% for item in object.topics|slice:":10" %}
                                <li>
                                  <a href="{% url "ui-browse-term" "topics" item.id %}">{{ item.term_node }}</a>
                                </li>
                                {% endfor %}
                                {% if len_topics > 10 %}<li>...</li>{% endif %}
                              </ul>
                            </div>
                            <div id="topics-all" style="display:none;">
                              {% if object.topics %}
                              <small>
                                <a class="topics-toggle" style="float:right;">
                                  <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
                                  show less
                                </a>
                              </small>
                              {% endif %}
                              <ul class="list-unstyled">
                                {% for item in object.topics|slice:":10" %}
                                <li>
                                  <a href="{% url "ui-browse-term" "topics" item.id %}">{{ item.term_node }}</a>
                                </li>
                                {% endfor %}
                              </ul>
                            </div>

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

                            <!-- entity.facility -->
                            <h3 class="page-header">FACILITY</h3>
                            <ul class="list-unstyled">
                              {% for item in object.facility %}
                              <li>
                                <a href="{% url "ui-browse-term" "facility" item.id %}">{{ item.term }}</a>
                              </li>
                              {% endfor %}
                            </ul>

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

                            <!-- entity.creators -->
                            <h3 class="page-header">CREATORS</h3>

                            <div id="creators-partial">
                              {% if len_creators > 10 %}
                              <small>
                                <a class="creators-toggle" style="float:right;">
                                  <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                                  show all {{ len_persons }}
                                </a>
                              </small>
                              {% endif %}
                              <ul class="list-unstyled">
                                {% for p in object.creators|slice:":10" %}
                                  <li>{% person p %}</li>
                                {% endfor %}
                                {% if len_creators > 10 %}<li>...</li>{% endif %}
                              </ul>
                            </div>
                            <div id="creators-all" style="display:none;">
                              {% if object.creators %}
                              <small>
                                <a class="creators-toggle" style="float:right;">
                                  <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
                                  show less
                                </a>
                              </small>
                              {% endif %}
                              <ul class="list-unstyled">
                                {% for p in object.creators %}
                                  <li>{% person p %}</li>
                                {% endfor %}
                              </ul>
                            </div>

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

                            <!-- entity.persons -->
                            <h3 class="page-header">PERSONS/ORGANIZATIONS</h3>

                            <div id="persons-partial">
                              {% if len_persons > 10 %}
                              <small>
                                <a class="persons-toggle" style="float:right;">
                                  <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                                  show all {{ len_persons }}
                                </a>
                              </small>
                              {% endif %}
                              <ul class="list-unstyled">
                                {% for p in object.persons|slice:":10" %}
                                  <li>{% person p %}</li>
                                {% endfor %}
                                {% if len_persons > 10 %}<li>...</li>{% endif %}
                              </ul>
                            </div>
                            <div id="persons-all" style="display:none;">
                              {% if object.persons %}
                              <small>
                                <a class="persons-toggle" style="float:right;">
                                  <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
                                  show less
                                </a>
                              </small>
                              {% endif %}
                              <ul class="list-unstyled">
                                {% for p in object.persons %}
                                  <li>{% person p %}</li>
                                {% endfor %}
                              </ul>
                            </div>

                        </div>
                    </div>
                    <!-- /core meta -->
                    <h3 class="page-header">CONTRIBUTOR</h3>
                    <p>
                        {{ object.contributor }}
                    </p>
                    <!-- entity.credit -->
                    <h3 class="page-header">PREFERRED CITATION</h3>
                    <p>
                        {{ object.credit }}
                    </p>
                    <!-- entity.rights -->
                    <h3 class="page-header">RIGHTS</h3>
                    <p>
                      {% rightsbadge object.rights %}
                    </p>

                </div>
            </div>
    </div>

{% if children_page.object_list %}
    <div class="row">
        <div class="col-sm-12 col-md-12">
          <h3>
            <a href="{% url "ui-object-children" object.id %}">
              {{ children_paginator.count }} Objects
            </a>
          </h3>

          {% for file in children_page.object_list %}
          {% document file %}
          {% endfor %}

          {% if children_paginator.count > 10 %}
          <br />
          <p>
            <a class="btn btn-primary btn-md" href="{% url "ui-object-children" object.id %}">See all objects <i class="fa fa-arrow-circle-right"></i></a>
          </p>
          {% endif %}
        </div><!-- end list col -->
    </div><!-- .row -->
{% endif %}{# children_page.object_list #}

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

{% block footer %}
{% if object.backend_url %}&bull; <a href="{{ object.backend_url }}">json</a>{% endif %}
{% endblock footer %}