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

<head>
    <meta charset="utf-8">
    <title>
        {% if config.meta.name %}
            {{ config.meta.name }}
        {% else %}
            Pops Pattern Library
        {% endif %}
    </title>
    <style>
        .pops {
            color: #333333;
            padding: 0;
            margin: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        .pops-sideNav {
            background-color: #f0f0f0;
            border-right: 1px solid #9d9d9d;
            width: 20%;
            position: fixed;
            overflow-x: hidden;
            top: 0;
            bottom: 0;
        }

        .pops-sideNav__wrap {
            overflow-y: auto;
            overflow-x: hidden;
            height: 100%;
            margin-right: -10%;
            background: linear-gradient(#f0f0f0 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.47), transparent), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.47), transparent) 0 100%;
            background-repeat: no-repeat;
            background-color: #f0f0f0;
            background-size: 90% 40px, 90% 40px, 90% 14px, 90% 14px;
            background-attachment: local, local, scroll, scroll;
        }

        .pops-sideNav__list {
            list-style: none;
            padding: 0;
            margin: 0;
            width: calc(100% + 20px);
        }

        .pops-sideNav__list-item > * {
            padding: 10px calc(10% + 20px) 10px 20px;
            margin: 0;
        }

        .pops-sideNav__list-title {
            background-color: #333333;
            color: #f0f0f0;
            border-bottom: 1px solid #9d9d9d;
        }

        .pops-sideNav__list-title, .pops-sideNav__list-link {
            text-decoration: none;
            display: block;
            transition: all .1s ease;
        }

        .pops-sideNav__list-title:hover, .pops-sideNav__list-link:hover {
            transition: all .1s ease;
        }

        .pops-sideNav__list-link {
            color: #333333;
        }

        .pops-sideNav__list-link:hover {
            background-color: #333333;
            color: #f0f0f0;
        }

        .pops-styleguide {
            width: calc(80% - 1px);
            margin-left: calc(20% + 1px);
        }

        .pops-styleguide__section-title, .pops-styleguide__title {
            border-bottom: 1px solid #9d9d9d;
            margin: 0;
            padding: 1rem;
        }

        .pops-styleguide__item-title {
            color: #333333;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: .5em;
        }

        .pops-styleguide__description {
            padding: 1rem;
            margin: 0;
        }

        .pops-styleguide__item {
            position: relative;
            padding: 1rem;
            background: #fff;
        }

        .pops-styleguide__item:not(:last-child):after {
            content: '';
            position: relative;
            display: block;
            height: 1px;
            margin: 3rem auto 1rem;
            background: #9d9d9d;
        }

        .pops-styleguide__color-pallette {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 1em;
        }

        .pops-styleguide__color-pallette-item {
            flex-grow: 1;
            width: 25%;
            padding: 0 1em;
            overflow: hidden;
            margin-bottom: 1em;
        }

        .pops-styleguide__color-pallette-item-swatch {
            height: 2.5em;
            width: 2.5em;
            border: 1px solid #9d9d9d;
            border-radius: 100%;
            float: left;
            margin-right: 10px;
        }

        .pops-styleguide__color-pallette-item-text {
            overflow: hidden;
        }

        .pops-styleguide__color-pallette-item-val, .pops-styleguide__color-pallette-item-name {
            display: block;
            margin-bottom: 10px;
        }

        pre {
            padding: .5em 1em;
            margin-bottom: 14px;
            background-color: #f0f0f0;
            border: 1px solid #9d9d9d;
            white-space: pre-wrap;
        }

        code {
            background: #f0f0f0;
            padding: 0 .5em;
            line-height: 1.4;
            display: inline-block;
        }

        iframe {
            border: 1px solid #9d9d9d;
            display: initial;
            resize: both;
            overflow: auto;
            width: 100%;
        }

        .pops-styleguide__item-reload {
            background: #333333;
            color: #f0f0f0;
            border: none;
            padding: 6px 12px;
            cursor: pointer;
        }

        .pops-styleguide__item-reload:active, .pops-styleguide__item-reload:hover {
            outline: 1px solid #9d9d9d;
        }

        .pops-styleguide__item-reload:active, .pops-styleguide__item-reload:focus {
            outline: none;
        }

        .pops-styleguide__item h1, .pops-styleguide__item h2, .pops-styleguide__item h3, .pops-styleguide__item h4, .pops-styleguide__item h5, .pops-styleguide__item h6 {
            margin-top: 0;
            font-weight: normal;
        }

        .pops-styleguide__font-item {
            padding: 1em;
        }

        .pops-styleguide__font-item-swatch {
            padding: 1em;
            border: 1px solid #9d9d9d;
        }
    </style>
</head>

<body class="pops">
<div class="pops-sideNav">
    <div class="pops-sideNav__wrap">
        <ul class="pops-sideNav__list">
            {% if config.colors.length %}
                <li class="pops-sideNav__list-item">
                    <a class="pops-sideNav__list-title" href="#popsPalette">Color palette</a>
                </li>
            {% endif %}
            {% if config.fonts.length %}
                <li class="pops-sideNav__list-item">
                    <a class="pops-sideNav__list-title" href="#popsfonts">Fonts</a>
                </li>
            {% endif %}
            {% if components.length %}
                <li class="pops-sideNav__list-item">
                    <a class="pops-sideNav__list-title" href="#popsComponents">
                        Components
                    </a>
                </li>
                {% for component in components %}
                    <li class="pops-sideNav__list-item">
                        <a class="pops-sideNav__list-link"
                           href="#component-{{ component.name }}">{{ component.name }}</a>
                    </li>
                {% endfor %}
            {% endif %}
            {% if patterns.length %}
                <li class="pops-sideNav__list-item">
                    <a class="pops-sideNav__list-title" href="#popsPatterns">
                        Patterns
                    </a>
                </li>
                {% for pattern in patterns %}
                    <li class="pops-sideNav__list-item">
                        <a class="pops-sideNav__list-link" href="#pattern-{{ pattern.name }}">{{ pattern.name }}</a>
                    </li>
                {% endfor %}
            {% endif %}
            {% if pages.length %}
                <li class="pops-sideNav__list-item">
                    <span class="pops-sideNav__list-title">
                        Pages
                    </span>
                </li>
                {% for page in pages %}
                    <li class="pops-sideNav__list-item">
                        <a class="pops-sideNav__list-link" href="/pages/{{ page.name }}">{{ page.name }}</a>
                    </li>
                {% endfor %}
            {% endif %}
        </ul>
    </div>
</div>
<div class="pops-styleguide">
    {% if config.meta.name %}
        <h2 class="pops-styleguide__title">{{ config.meta.name }}</h2>
    {% endif %}
    {% if config.meta.summary %}
        <p class="pops-styleguide__description">{{ config.meta.summary }}</p>
    {% endif %}
    {% if config.colors.length %}
        <div class="pops-styleguide__section" id="popsPalette">
            <h3 class="pops-styleguide__section-title">Color Palette</h3>
            <div class="pops-styleguide__color-pallette">
                {% for color in config.colors %}
                    <div class="pops-styleguide__color-pallette-item">
                        <div class="pops-styleguide__color-pallette-item-swatch"
                             style="background: {{ color.color }}">
                        </div>
                        <div class="pops-styleguide__color-pallette-item-text">
                            <span class="pops-styleguide__color-pallette-item-name">{{ color.name }}</span>
                            <span class="pops-styleguide__color-pallette-item-val">{{ color.color }}</span>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}
    {% if config.fonts.length %}
        <div class="pops-styleguide__section" id="popsfonts">
            <h3 class="pops-styleguide__section-title">Fonts</h3>
            <div class="pops-styleguide__fonts">
                {% for font in config.fonts %}
                    <div class="pops-styleguide__font-item">
                        <link href='{{ font.font }}' rel='stylesheet' type='text/css'>
                        <p class="pops-styleguide__font-item-text">{{ font.name }}</p>
                        <p class="pops-styleguide__font-item-swatch" style="font-family: {{ font.name }}">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisl, eleifend eu
                            nunc id, tincidunt aliquam velit.
                        </p>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}
    {% if components.length %}
        <div class="pops-styleguide__section" id="popsComponents">
            <h3 class="pops-styleguide__section-title">Components</h3>
            {% for component in components %}
                <div class="pops-styleguide__item" id="component-{{ component.name }}">
                    <h4 class="pops-styleguide__item-title">
                        <a href="/components/{{ component.name }}">{{ component.name }}</a>
                    </h4>
                    <iframe class='pops-styleguide__item-example' src='/components/{{ component.name }}'
                            frameborder='0' scrolling='no' onload='resizeIframe(this)'></iframe>
                    <button class='pops-styleguide__item-reload'
                            onclick="reloadIframe(this)">Reload {{ component.name }}</button>
                </div>
            {% endfor %}
        </div>
    {% endif %}
    {% if patterns.length %}
        <div class="pops-styleguide__section" id="popsPatterns">
            <h3 class="pops-styleguide__section-title">Patterns</h3>
            {% for pattern in patterns %}
                <div class="pops-styleguide__item" id="pattern-{{ pattern.name }}">
                    <h4 class="pops-styleguide__item-title">
                        <a href="/patterns/{{ pattern.name }}">{{ pattern.name }}</a>
                    </h4>

                    <iframe class='pops-styleguide__item-example' src='/patterns/{{ pattern.name }}'
                            frameborder='0' scrolling='no' onload='resizeIframe(this)'></iframe>
                    <button class='pops-styleguide__item-reload' onclick="reloadIframe(this)">
                        Reload {{ pattern.name }}</button>
                </div>
            {% endfor %}
        </div>
    {% endif %}
</div>
<script language="javascript" type="text/javascript">
    function resizeIframe (obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'
    }

    function reloadIframe (el) {
        el.previousElementSibling.contentWindow.location.reload()
    }
</script>
</body>

</html>
