{% extends "layout.html" %}
{% block title %}Browse{% endblock %}
{% block content %}

<div class="browse-panel panel panel-default">
  <div class="panel panel-body">

    <ul class="nav nav-tabs" role="tablist">
      <li><a class="nav-link active" data-toggle="tab" href="#tab-content" role="tabpanel">Content</a></li>
      <li><a class="nav-link" data-toggle="tab" href="#tab-search" role="tabpanel">Search</a></li>
      <li><a class="nav-link" data-toggle="tab" href="#tab-revision" role="tabpanel">Revision</a></li>
      <li><a class="nav-link" data-toggle="tab" href="#tab-origin" role="tabpanel">Origin</a></li>
      <li><a class="nav-link" data-toggle="tab" href="#tab-directory" role="tabpanel">Directory</a></li>
    </ul>

    <div class="tab-content container-fluid">
      <!-- Content pane -->
      <div class="tab-pane active" id="tab-content" role="tabpanel">
        {% include 'includes/home-content.html' %}
      </div>

      <!-- Search Symbol pane -->
      <div class="tab-pane" id="tab-search" role="tabpanel">
        {% include 'includes/home-search-symbol.html' %}
      </div>

      <!-- Revision pane -->
      <div class="tab-pane" id="tab-revision" role="tabpanel">
        {% include 'includes/home-revision.html' %}
      </div>

      <!-- Origin pane -->
      <div class="tab-pane" id="tab-origin" role="tabpanel">
        {% include 'includes/home-origin.html' %}
      </div>

      <!-- Directory pane -->
      <div class="tab-pane" id="tab-directory" role="tabpanel">
        {% include 'includes/home-directory.html' %}
      </div>
    </div>

  </div>
</div>

<script>
    // Hash update on page load
    var hash = window.location.hash;
    hash && $('ul.nav a[href="' + hash + '"]').tab('show');
    // Hash update on nav-tab click
    $('.nav-tabs a').click(function(e) {
        window.location.hash = this.hash;
    })
</script>
{% endblock %}