{% extends "ui/browse/base.html" %}

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

{% block breadcrumbs %}{{ block.super }}
<li>{{ facet.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">
  <div class="row">
	<div class="col-sm-10 col-md-10">

<h1>{{ facet.title }}</h1>
<!--
{% if facet.description %}
<p>
{{ facet.description }}
</p>
{% endif %}
-->

<p>
  {% for t in terms %}
  {% 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>

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