<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ options.title }}</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./kss-assets/kss.css">
{{ styles|raw }}
</head>
<body id="kss-node" {% if template.isItem %} class="kss-fullscreen-mode" {% endif %}>

{% include "sidebar.twig" %}

<!-- kss-main -->
<div class="kss-main-wrap">
<article role="main" class="kss-main">
{#
Display each section, in order.

The "root" element comes first in this loop, and can be detected using the
"loop.first" variable as seen below.
#}
{% for section in sections %}

  <!-- Section -->
  {% set sectionElement = loop.first
  ? 'div'
  : 'section' %}
  <{{ sectionElement }} id="" class="kss-section kss-section--depth-{{ section.depth }} {% if template.isItem %}is-fullscreen{% endif %}">
  <a name="kssref-{{ section.referenceURI }}"></a>
        <div class="kss-pattern"><!-- kss-pattern -->
          <!-- Header -->
          <div class="kss-pattern__header"><!-- kss-pattern__header -->
            <a class="kss-code-toggle" href="#{{ section.referenceURI }}">Info</a>
            {% set headerElement = (section.depth > 6)
              ? 'h6'
              : 'h' ~ section.depth %}
            <{{ headerElement }} class="kss-title">
              {% if ("Design" in section.reference) == true and section.depth != 1 %}
                <a class="kss-link" href="item-{{ section.referenceURI }}.html">{{ section.referenceNumber }}
                {% else %}
                  <a class="kss-link" href="#kssref-{{ section.referenceURI }}">{{ section.referenceNumber }}
                  {% endif %}
                  {{ section.header }}
                </a>
              </{{ headerelement }}>
              <!-- Description -->
              {% if section.description %}
                <div class="kss-description">
                  {{ section.description|raw }}
                </div>
              {% endif %}
            </div><!-- kss-pattern__header -->
            <!-- Parameters -->
            {% for parameter in section.parameters %}
              {% if loop.first %}
                <div class="kss-parameters__title">Parameters:</div>
                <ul class="kss-parameters">
                {% endif %}
                <li class="kss-parameters__item">
                  <div class="kss-parameters__name">
                    <code>{{ parameter.name }}</code>
                  </div>
                  <div class="kss-parameters__description">
                    {{ parameter.description|raw }}
                    {% if parameter.defaultValue %}
                      <div class="kss-parameters__default-value">Defaults to:
                        <code>{{ parameter.defaultValue }}</code>
                      </div>
                    {% endif %}
                  </div>
                </li>
                {% if loop.last %}
                </ul>
              {% endif %}
            {% endfor %}

            {% if ("Design" in section.reference) == false %}
              <!-- Example -->
              {% if section.example %}
                <div class="kss-modifier__wrapper">
                  {% if section.modifiers is not empty %}
                    <div class="kss-modifier__default-name kss-style">Default styling</div>
                  {% endif %}
                  <div class="kss-modifier__example">
                    {{ section.example|raw }}
                  </div>
                  {% for modifier in section.modifiers %}
                    <div class="kss-modifier__name kss-style">{{ modifier.name }}
                      <span class="kss-modifier__description kss-style">{{ modifier.description|raw }}</span>
                    </div>
                    <div class="kss-modifier__example">{{ modifier.markup|raw }}</div>
                  {% endfor %}
                </div>
              {% endif %}
            {% endif %}
          <div id="{{ section.referenceURI }}" class="kss-pattern-code"><!-- kss-pattern-code -->
            <a class="kss-code-toggle" href="#{{ section.referenceURI }}">Close</a>
            <!-- Source -->
            {% if section.source.filename %}
              <div class="kss-source kss-style">
                <b>Source</b><br>
                <code>{{ section.source.filename }}</code>, line
                {{ section.source.line }}
              </div>
            {% endif %}
            <!-- Markup -->
            {% if ("Design" in section.reference) == false %}
              {% if section.markup %}
                <div class="kss-markup kss-style">
                  <b>Markup</b><br>
                  <code>{{ section.markupFile }}</code>
                  <pre class="prettyprint linenums lang-html"><code data-language="html">{{ section.markup|escape('html') }}</code></pre>
                </div>
              {% endif %}
            {% endif %}
          </div><!-- kss-pattern-code -->
      </div><!-- kss-pattern -->

  </{{ sectionelement }}>

{% endfor %}
</article>
</div>

{{ scripts|raw }}
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
<script>
  $(document).ready(function() {
    $(".kss-code-toggle").on("click tap", function(e) {
      e.preventDefault();
      var url = $(this).attr('href')
      var objRef = url.substring(url.indexOf('#') + 1);
      $("#" + objRef).toggleClass('active');
    });
  });
</script>
</body>
</html>
