{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Django pattern library</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript" src="{% static 'pattern_library/dist/bundle.js' %}"></script>
</head>

<body class="body">
    <header class="header">
        <a class="button button--close-menu js-close-menu" href="#">
            <span class="sr-only">Close menu</span>
            <svg class="icon icon--close-menu" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z" fill-rule="nonzero"/></svg>
        </a>
        <h1 class="header__title">
            <span class="sr-only">Pattern Library</span>
            {# Set in _config.scss #}
        </h1>
    </header>
    <aside class="sidebar">
        <label for="js-pattern-search-input" class="is-hidden">Search pattern library</label>
        <input type="text" class="sidebar__search" id="js-pattern-search-input" placeholder="Search library...">
        <div class="sidebar__search-results" id="js-pattern-search-results-container"></div>
        <nav class="sidebar__nav" id="sidebar-nav">
            <ul class="list">
                {% for pattern_type_group, pattern_templates in pattern_templates.template_groups.items %}
                <li class="list__item">
                    <h2 class="list__item-heading js-toggle-pattern">
                        <svg class="list__item-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
                            <path d="M88 80l-48 48 16 16 64-64-64-64-16 16 48 48z" />
                        </svg>
                        {{ pattern_type_group|title }}
                    </h2>
                    {% include "pattern_library/pattern_group.html" with groups=pattern_templates.template_groups %}
                </li>
                {% endfor %}
            </ul>
        </nav>
    </aside>
    <main class="main">
        {% block content %}{% endblock %}
    </main>
</body>
</html>
