{% extends "base.html" %}

{% block scripts %}
<script type="text/javascript">
function activate_tab(selector) {
  $(selector).addClass("ui-tabs-selected ui-state-active");
}

$(function() {
  var url = window.location.pathname;
  if (url == "/") {
    activate_tab("#tab-index");
  } else if (url.substr(1, 3) == "key") {
    activate_tab("#tab-keys");
  } else if (url.substr(1, 4) == "repo") {
    activate_tab("#tab-repos");
  } else if (url.substr(1, 5) == "group") {
    activate_tab("#tab-groups");
  }
});
</script>
{% endblock %}

{% block body %}
  <div id="menu" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
      <li id="tab-index" class="ui-state-default ui-corner-top">
        <a href="{% url sewer:index %}">home</a>
      </li>
      <li id="tab-keys" class="ui-state-default ui-corner-top">
        <a href="{% url sewer:key-index %}">keys</a>
      </li>
      <li id="tab-repos" class="ui-state-default ui-corner-top">
        <a href="{% url sewer:repo-index %}">repos</a>
      </li>
      <li id="tab-groups" class="ui-state-default ui-corner-top">
        <a href="{% url sewer:group-index %}">groups</a>
      </li>
    </ul>
    <div id="content" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
      {% include "messages.html" %}
      {% block content %}{% endblock %}
    </div>
  </div>
{% endblock %}