{% extends "regulations/chrome.html" %}
{% load static from staticfiles %}
{% load macros render_nested %}

{% block title %}Preamble {{doc_number}}{% endblock %}

{% block sidebar-icons %}
<li>
  <a href="#table-of-contents" id="menu-link" class="toc-nav-link" title="Preamble Table of Contents">Pre</a>
</li>
<li>
  <a href="#table-of-contents-secondary" id="table-of-contents-secondary-link" class="toc-nav-link" title="CFR Changes">CFR</a>
</li>
<li>
  <a href="#search" id="search-link" class="toc-nav-link" title="Search">
    <span class="cf-icon cf-icon-search"></span>
  </a>
</li>

{% endblock %}

{% block sub-head-class %}preamble-sub-head{% endblock %}

{% block active_title %}
  <em class="header-label">
    {{ section_label }}
  </em>
{% endblock %}

{% block header-secondary %}
  {% include "regulations/preamble-header.html" %}
{% endblock %}

{% block whole-toc %}
<div id="menu" class="panel" data-page-type="preamble-section" data-doc-id="{{doc_number}}">
  <div class="toc-drawer toc-container current hidden diff-toc" id="table-of-contents">
    <div class="drawer-header">
      <h2 class="toc-type">Table of Contents</h2>
      <h3 class="toc-subheader">Preamble</h3>
    </div><!-- /.drawer-header -->
    <nav id="toc" class="toc-nav__base drawer-content toc-nav__fr-notice" role="navigation">
      {% include "regulations/toc-preamble.html" %}
    </nav>
  </div>

  <div id="table-of-contents-secondary" class="toc-container hidden">
    <div class="drawer-header">
      <h2 class="toc-type">Table of Contents</h2>
      <h3 class="toc-subheader">Amendments to the CFR</h3>
    </div>
    <nav id="cfr-toc" role="navigation"
         class="toc-nav__base drawer-content toc-nav__fr-notice
                toc-nav__cfr-changes"  >
      <ol>
        {% regroup cfr_change_toc by category as cfr_toc_by_category %}
        {% for category in cfr_toc_by_category %}
          <li>
            <h3 class="toc-nav__divider">{{category.grouper}}</h3>
          </li>
          {% for nav_item in category.list %}
            <li><a href="{{nav_item.url}}"
                   {% if nav_item.section_id %}
                   data-section-id="{{nav_item.section_id}}"
                   {% endif %}
                   >{{nav_item.title.full}}</a></li>
          {% endfor %}
        {% endfor %}
      </ol>
    </nav>
  </div>

  {% block drawer-search %}
  <div id="search" class="search-drawer toc-container hidden">
      <div class="drawer-header">
          <h2 class="toc-type">Search</h2>
      </div><!-- /.drawer-header -->
      <div class="drawer-content">
          <form method="GET" role="search" data-doc-type="preamble">
              <div class="search-box">
                  <input type="text" name="q" value="{{ q }}" id="search-input" title="Search term"/><button type="submit"><span class="cf-icon cf-icon-search"></span><strong class="icon-text">Search</strong></button>
              </div><!--/.search-box-->
          </form>
      </div><!-- /.drawer-content -->
  </div> <!--/#search-->
  {% endblock %}

</div> <!-- /.panel -->
{% endblock %}

{% block chrome-content %}{% endblock %}

{% block chrome-sidebar %}{% endblock %}
