{% extends '/layouts/default.twig' %}

{% block frontend %}


    <script src="{{ mix('js/app.js') }}"></script>
    <script src="/core/js/pattern_browser.js?{{ random() }}" defer></script>
    <script src="/core/js/css_browser.js?{{ random() }}" defer></script>

    <style>

        .cssBrowserMenuWrap {
            top: 160px;
        }
        .siteInnerWrapper .darkBg, .siteInnerWrapper .lightBg {
            padding: 24px;
        }

    </style>

{% endblock %}

{% block before_header %}

    <div class="cssBrowserMenuWrap">

        <a class="cssBrowserMenuTrigger" href="#">
            <span>CSS Browser</span>
        </a>

        <ul>
            <li><a href="/css">Style Guide</a></li>
            <li><a href="/css?patterns=true">Patterns</a></li>
            {% include('chop/includes/navigation.twig') %}
        </ul>

    </div>

{% endblock %}




{% block content %}

    <div class="styleGuideWrap">
        <div class="styleGuideSectionMainTitle">
            <h1>Style Guide</h1>
        </div>

        <div class="styleGuideColumn">

            <section class="siteInformation">

                <h5 class="styleGuideSectionTitle">Grid Information</h5>
                <script>
                    $('document').ready(function () {
                        $('#wrapperWidth').text($('.wrapper').css('max-width'));
                        $('#gutterWidth').text($('.wrapper').css('min-width'));
                    });
                </script>
                <p>
                    Wrapper Width - <span id="wrapperWidth"></span><br />
                    Gutter Width - <span id="gutterWidth"></span>
                </p>
            </section>

            <section class="styleGuideColors">

                <h5 class="styleGuideSectionTitle">Colours</h5>

                <div class="colourSwatchWrap">
                    <ul>
                        <li><span>@primary_color</span></li>
                        <li><span>@secondary_color</span></li>
                        <li><span>@dark_color</span></li>
                        <li><span>@light_color</span></li>
                        <li><span>@border_color<br />@border_radius</span></li>
                        <li><span>@alert_color</span></li>
                        <li><span>@information_color</span></li>
                        <li><span>@success_color</span></li>
                        <li><span>@text_color</span></li>
                        <li><span>@highlight_color</span></li>
                        <li><span>@med_color</span></li>
                    </ul>
                </div>

            </section>

            <section class="styleGuideType pageContent lightBg wysiwyg">

                <h5 class="styleGuideSectionTitle">Type</h5>


                <h4 class="subtitle1">Subtitle 1</h4>
                <h4 class="subtitle2">Subtitle 2</h4>

                <h1>Header 1</h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex.</p>

                <h2>Header 2</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex.</p>

                <h3>Header 3</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex.</p>

                <h4>Header 4</h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex.</p>

                <h5>Header 5</h5>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex.</p>

                <h6>Header 6</h6>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex. Proin consequat diam ut tincidunt elementum. Ut quis libero ac mi placerat placerat ac et nulla. Curabitur orci urna, dictum sit amet dui a, finibus sollicitudin risus. Aliquam convallis massa ligula, <small>Small</small> sit amet tristique eros gravida a. Quisque varius ut sem eget sagittis. Praesent id vehicula <em>Italic Text</em> elit.</p>

                <blockquote>
                    <p>
                        Blockquote ac mi placerat placerat ac et nulla. Curabitur orci urna, dictum sit amet dui a, finibus sollicitudin risus. Aliquam convallis massa ligula, sit amet tristique eros gravida a. Quisque varius ut sem eget sagittis. Praesent id vehicula elit.
                    </p>
                    <footer>
                        <cite>
                            <a href="http://www.mtcmedia.co.uk/" target="_blank">
                                Blockquote Citation, Creative Director
                            </a>
                        </cite>
                    </footer>
                </blockquote>

                <p>Etiam fringilla diam eu quam commodo posuere sit amet sit amet arcu. Fusce id faucibus lacus. Suspendisse hendrerit, turpis et suscipit feugiat, tellus diam fringilla diam, sed posuere ipsum ligula non erat. Morbi at purus sed turpis efficitur ultrices et eleifend nibh. <a href="#">Link styles in text</a> Cras et nunc et nunc sagittis pretium et a purus. Aenean in dapibus magna, luctus molestie leo. Integer vitae facilisis tellus. Proin vel <strong>Bold Text</strong> tempor mauris, eu sodales enim. Sed et nulla id sem molestie tempor sed eu nibh. Etiam pellentesque posuere eros, facilisis finibus ex pulvinar eu.</p>

                <p>
                    <a href="#">Link style</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <strong>Bold Text</strong>&nbsp;&nbsp;&nbsp;&nbsp;
                    <em>Italic Text</em>&nbsp;&nbsp;&nbsp;&nbsp;
                    <small>Small</small>
                </p>

            </section>

            <section class="styleGuideLists pageContent lightBg wysiwyg">

                <h5>Unordered List</h5>

                <ul>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                </ul>

                <h5>Ordered List</h5>

                <ol>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                </ol>

            </section>

            <section class="styleGuidePageContent pageContent lightBg wysiwyg">

                <h5 class="styleGuideSectionTitle">"pageContent" Styles</h5>

                <img src="https://via.placeholder.com/290x199" alt="Content Image" style="float: left;" />

                <p>Etiam fringilla diam eu quam commodo posuere sit amet sit amet arcu. Fusce id faucibus lacus. Suspendisse hendrerit, turpis et suscipit feugiat, tellus diam fringilla diam, sed posuere ipsum ligula non erat. Morbi at purus sed turpis efficitur ultrices et eleifend</p>

                <p>Etiam fringilla diam eu quam commodo posuere sit amet sit amet arcu. Fusce id faucibus lacus. Suspendisse hendrerit, turpis et suscipit feugiat, tellus diam fringilla diam, sed posuere ipsum ligula non erat. Morbi at purus sed turpis efficitur ultrices et eleifend</p>

                <img src="https://via.placeholder.com/290x199" alt="Content Image" style="float: right;" />

                <p>Etiam fringilla diam eu quam commodo posuere sit amet sit amet arcu. Fusce id faucibus lacus. Suspendisse hendrerit, turpis et suscipit feugiat, tellus diam fringilla diam, sed posuere ipsum ligula non erat. Morbi at purus sed turpis efficitur ultrices et eleifend</p>

                <p>Etiam fringilla diam eu quam commodo posuere sit amet sit amet arcu. Fusce id faucibus lacus. Suspendisse hendrerit, turpis et suscipit feugiat, tellus diam fringilla diam, sed posuere ipsum ligula non erat. Morbi at purus sed turpis efficitur ultrices et eleifend</p>

            </section>


            <section class="styleGuideType pageContent darkBg wysiwyg">

                <h5 class="styleGuideSectionTitle">Type</h5>


                <h4 class="subtitle1">Subtitle 1</h4>
                <h4 class="subtitle2">Subtitle 2</h4>

                <h1>Header 1</h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex.</p>

                <h2>Header 2</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex.</p>

                <h3>Header 3</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex.</p>

                <h4>Header 4</h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex.</p>

                <h5>Header 5</h5>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex.</p>

                <h6>Header 6</h6>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex. Proin consequat diam ut tincidunt elementum. Ut quis libero ac mi placerat placerat ac et nulla. Curabitur orci urna, dictum sit amet dui a, finibus sollicitudin risus. Aliquam convallis massa ligula, <small>Small</small> sit amet tristique eros gravida a. Quisque varius ut sem eget sagittis. Praesent id vehicula <em>Italic Text</em> elit.</p>

                <blockquote>
                    <p>
                        Blockquote ac mi placerat placerat ac et nulla. Curabitur orci urna, dictum sit amet dui a, finibus sollicitudin risus. Aliquam convallis massa ligula, sit amet tristique eros gravida a. Quisque varius ut sem eget sagittis. Praesent id vehicula elit.
                    </p>
                    <footer>
                        <cite>
                            <a href="http://www.mtcmedia.co.uk/" target="_blank">
                                Blockquote Citation, Creative Director
                            </a>
                        </cite>
                    </footer>
                </blockquote>

                <p>Etiam fringilla diam eu quam commodo posuere sit amet sit amet arcu. Fusce id faucibus lacus. Suspendisse hendrerit, turpis et suscipit feugiat, tellus diam fringilla diam, sed posuere ipsum ligula non erat. Morbi at purus sed turpis efficitur ultrices et eleifend nibh. <a href="#">Link styles in text</a> Cras et nunc et nunc sagittis pretium et a purus. Aenean in dapibus magna, luctus molestie leo. Integer vitae facilisis tellus. Proin vel <strong>Bold Text</strong> tempor mauris, eu sodales enim. Sed et nulla id sem molestie tempor sed eu nibh. Etiam pellentesque posuere eros, facilisis finibus ex pulvinar eu.</p>

                <p>
                    <a href="#">Link style</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <strong>Bold Text</strong>&nbsp;&nbsp;&nbsp;&nbsp;
                    <em>Italic Text</em>&nbsp;&nbsp;&nbsp;&nbsp;
                    <small>Small</small>
                </p>

            </section>

            <section class="styleGuideLists pageContent darkBg wysiwyg">

                <h5>Unordered List</h5>

                <ul>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                </ul>

                <h5>Ordered List</h5>

                <ol>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                    <li>Placerat placerat</li>
                </ol>

            </section>

            <section class="styleGuidePageContent pageContent darkBg wysiwyg">

                <h5 class="styleGuideSectionTitle">"pageContent" Styles</h5>

                <img src="https://via.placeholder.com/290x199" alt="Content Image" style="float: left;" />

                <p>Etiam fringilla diam eu quam commodo posuere sit amet sit amet arcu. Fusce id faucibus lacus. Suspendisse hendrerit, turpis et suscipit feugiat, tellus diam fringilla diam, sed posuere ipsum ligula non erat. Morbi at purus sed turpis efficitur ultrices et eleifend</p>

                <p>Etiam fringilla diam eu quam commodo posuere sit amet sit amet arcu. Fusce id faucibus lacus. Suspendisse hendrerit, turpis et suscipit feugiat, tellus diam fringilla diam, sed posuere ipsum ligula non erat. Morbi at purus sed turpis efficitur ultrices et eleifend</p>

                <img src="https://via.placeholder.com/290x199" alt="Content Image" style="float: right;" />

                <p>Etiam fringilla diam eu quam commodo posuere sit amet sit amet arcu. Fusce id faucibus lacus. Suspendisse hendrerit, turpis et suscipit feugiat, tellus diam fringilla diam, sed posuere ipsum ligula non erat. Morbi at purus sed turpis efficitur ultrices et eleifend</p>

                <p>Etiam fringilla diam eu quam commodo posuere sit amet sit amet arcu. Fusce id faucibus lacus. Suspendisse hendrerit, turpis et suscipit feugiat, tellus diam fringilla diam, sed posuere ipsum ligula non erat. Morbi at purus sed turpis efficitur ultrices et eleifend</p>

            </section>

            <section class="styleGuideAccordions lightBg noMargin">

                <h5 class="styleGuideSectionTitle">Accordion</h5>

                {% set example_list = [
                    {Title: {value: 'Example Title'}, Content: {value: '<h2>h2 Title</h2><h3>h3 Title</h3><h4>h4 Title</h4><h5>h5 Title</h5><h6>h6 Title</h6><p>This is some example <a href="#">content</a></p><ul><li>Item 1</li><li>Item 1</li><li>Item 1</li></ul><ol><li>Item 1</li><li>Item 1</li><li>Item 1</li></ol>'}},
                    {Title: {value: 'Example Title'}, Content: {value: '<p>This is some example content.</p>'}},
                    {Title: {value: 'Example Title'}, Content: {value: '<p>This is some example content.</p>'}},
                    {Title: {value: 'Example Title'}, Content: {value: '<p>This is some example content.</p>'}}
                ] %}


                {% include 'includes/elements/accordion.twig' with {
                    list: example_list,
                    open_first: true
                } %}

            </section>

            <section class="styleGuideAccordions darkBg">

                <h5 class="styleGuideSectionTitle">Accordion</h5>


                {% set example_list = [
                    {Title: {value: 'Example Title'}, Content: {value: '<h2>h2 Title</h2><h3>h3 Title</h3><h4>h4 Title</h4><h5>h5 Title</h5><h6>h6 Title</h6><p>This is some example <a href="#">content</a></p><ul><li>Item 1</li><li>Item 1</li><li>Item 1</li></ul><ol><li>Item 1</li><li>Item 1</li><li>Item 1</li></ol>'}},
                    {Title: {value: 'Example Title'}, Content: {value: '<p>This is some example content.</p>'}},
                    {Title: {value: 'Example Title'}, Content: {value: '<p>This is some example content.</p>'}},
                    {Title: {value: 'Example Title'}, Content: {value: '<p>This is some example content.</p>'}}
                ] %}



                {% include 'includes/elements/accordion.twig' with {
                    list: example_list,
                    open_first: true
                } %}

            </section>

        </div> <!-- .styleGuideColumn -->

        <div class="styleGuideColumn last">

            <section class="styleGuideButtons">


                <div class="whiteBg" style="width: calc(100% + 16px);margin: 0 -8px;padding:24px;">

                    <h5 class="styleGuideSectionTitle">Standard Buttons</h5>

                    <div class="buttonGroup">
                        <a href="#" class="button">Primary Button</a>
                        <a href="#" class="button iconLeft"><i class="fal fa-plus"></i> Primary Button Icon</a>
                        <a href="#" class="button buttonDark">Primary Button</a>
                    </div>

                    <h5 class="styleGuideSectionTitle">Text Buttons</h5>

                    <div class="buttonGroup">
                        <a href="#" class="button buttonText">Button Text</a>
                        <a href="#" class="button buttonText iconLeft"><i class="fal fa-plus"></i> Button Text Icon</a>
                    </div>

                    <h5 class="styleGuideSectionTitle">Small Buttons</h5>

                    <div class="buttonGroup">
                        <a href="#" class="button buttonSmall">Small Button</a>
                        <a href="#" class="button buttonSmall iconLeft"><i class="fal fa-plus"></i> Button Small Icon</a>
                        <a href="#" class="button buttonSmall buttonText">Small Button Text</a>
                        <a href="#" class="button buttonSmall buttonDark">Small Button</a>
                    </div>



                    <h5 class="styleGuideSectionTitle">Outlined Buttons</h5>

                    <div class="buttonGroup">
                        <a href="#" class="button buttonOutlined">Button Outlined</a>
                        <a href="#" class="button buttonSmall buttonOutlined">Small Button Outlined</a>
                    </div>


                    <h5 class="styleGuideSectionTitle">Button Disabled</h5>

                    <div class="buttonGroup">


                        <a href="#" class="button" disabled>Disabled Button</a>
                        <a href="#" class="button" disabled>Disabled Button <i class="fal fa-plus"></i> </a>

                        <a href="#" class="button buttonOutlined" disabled>Disabled Button</a>
                        <a href="#" class="button buttonOutlined" disabled>Disabled Button <i class="fal fa-plus"></i> </a>

                        <a href="#" class="button buttonText" disabled>Button Text</a>
                        <a href="#" class="button buttonText" disabled>Button Text <i class="fal fa-plus"></i> </a>


                    </div>

                    <h5 class="styleGuideSectionTitle">Toggle Buttons</h5>


                    <div class="buttonGroup">
                        <a href="#" class="toggleButtonWrap">
                            <span class="toggleButton"></span>
                        </a>

                        <a href="#" class="toggleButtonWrap open">
                            <span class="toggleButton"></span>
                        </a>

                        <a href="#" class="toggleButtonWrap">
                            <span class="toggleButton toggleAlt"></span>
                        </a>

                        <a href="#" class="toggleButtonWrap open">
                            <span class="toggleButton toggleAlt"></span>
                        </a>

                        <a href="#" class="toggleButtonWrap">
                            <span class="toggleButton toggleBordered"></span>
                        </a>

                        <a href="#" class="toggleButtonWrap open">
                            <span class="toggleButton toggleBordered"></span>
                        </a>
                    </div>


                </div><!-- .lightBackground -->


                <div class="darkBg">


                    <h5 class="styleGuideSectionTitle">Alt Buttons</h5>

                    <div class="buttonGroup">
                        <a href="#" class="buttonAlt">Alt Button</a>
                        <a href="#" class="buttonAlt">Alt Button Icon <i class="fal fa-plus"></i> </a>
                    </div>


                    <h5 class="styleGuideSectionTitle">Alt Text Buttons</h5>

                    <div class="buttonGroup">
                        <a href="#" class="buttonAlt buttonText">Button Text</a>
                        <a href="#" class="buttonAlt buttonText">Button Text Icon <i class="fal fa-plus"></i> </a>
                    </div>

                    <h5 class="styleGuideSectionTitle">Alt Small Buttons</h5>

                    <div class="buttonGroup">
                        <a href="#" class="buttonAlt buttonSmall">Small Button</a>
                        <a href="#" class="buttonAlt buttonSmall">Button Small Icon <i class="fal fa-plus"></i> </a>
                        <a href="#" class="buttonAlt buttonSmall buttonText">Small Button Text</a>
                    </div>



                    <h5 class="styleGuideSectionTitle">Alt Outlined Buttons</h5>

                    <div class="buttonGroup">
                        <a href="#" class="buttonAlt buttonOutlined">Button Outlined</a>
                        <a href="#" class="buttonAlt buttonSmall buttonOutlined">Small Button Outlined</a>
                    </div>


                    <h5 class="styleGuideSectionTitle">Button Disabled</h5>

                    <div class="buttonGroup">


                        <a href="#" class="buttonAlt" disabled>Disabled Button</a>
                        <a href="#" class="buttonAlt" disabled>Disabled Button <i class="fal fa-plus"></i> </a>

                        <a href="#" class="buttonAlt buttonOutlined" disabled>Disabled Button</a>
                        <a href="#" class="buttonAlt buttonOutlined" disabled>Disabled Button <i class="fal fa-plus"></i> </a>

                        <a href="#" class="buttonAlt buttonText" disabled>Button Text</a>
                        <a href="#" class="buttonAlt buttonText" disabled>Button Text <i class="fal fa-plus"></i> </a>

                    </div>

                    <h5 class="styleGuideSectionTitle">Toggle Buttons</h5>


                    <div class="buttonGroup">
                        <a href="#" class="toggleButtonWrap">
                            <span class="toggleButton"></span>
                        </a>

                        <a href="#" class="toggleButtonWrap open">
                            <span class="toggleButton"></span>
                        </a>

                        <a href="#" class="toggleButtonWrap">
                            <span class="toggleButton toggleAlt"></span>
                        </a>

                        <a href="#" class="toggleButtonWrap open">
                            <span class="toggleButton toggleAlt"></span>
                        </a>

                        <a href="#" class="toggleButtonWrap">
                            <span class="toggleButton toggleBordered"></span>
                        </a>

                        <a href="#" class="toggleButtonWrap open">
                            <span class="toggleButton toggleBordered"></span>
                        </a>
                    </div>

                </div> <!-- .darkBackground -->


                <script>
                    {# included here just for demo #}
                    $('document').ready(function () {
                        timer = setInterval(function () {
                            $('.js_buttonActive').toggleClass('busy');
                        }, 4000);

                        $('.button,.buttonAlt, .buttonGroup a').on('click', function(e) {
                            e.preventDefault();
                        })
                    });
                </script>

            </section>

            <section class="styleGuideNotifications lightBg noMargin">

                <h5 class="styleGuideSectionTitle">Notifications</h5>

                <div class="error">This is an alert for a form</div>

                <div class="alert">This is an information message <a href="#">with a link</a></div>

                <div class="success">This is a success message <a href="#">with a link</a></div>

                <div class="info">This is an info message <a href="#">with a link</a></div>

                <div class="info">
                    <h4>Alert with title</h4>
                    This is an info message <a href="#">with a link</a>
                </div>

            </section>

            <section class="styleGuideNotifications darkBg">

                <h5 class="styleGuideSectionTitle">Notifications</h5>

                <div class="error">This is an alert for a form</div>

                <div class="alert">This is an information message <a href="#">with a link</a></div>

                <div class="success">This is a success message <a href="#">with a link</a></div>

                <div class="info">This is an info message <a href="#">with a link</a></div>

                <div class="info">
                    <h4>Alert with title</h4>
                    This is an info message <a href="#">with a link</a>
                </div>

            </section>

            <section class="styleGuideForms darkToggle lightBg">

                <div class="toggleWrapper">
                    <div class="row">
                        <input type="checkbox" id="checkToggle" class="toggleSwitch">
                        <label for="checkToggle">Dark Background <i class="hoverFX"></i></label>
                    </div>
                    <div class="row">
                        <input type="checkbox" id="checkToggleForm" class="toggleSwitch" checked>
                        <label for="checkToggleForm">Form Inline <i class="hoverFX"></i></label>
                    </div>
                </div> <!-- .toggleWrapper -->
                <script>
                    $(document).ready(function(){

                        if($('#checkToggle').is(':checked')) {
                            $('.darkToggle').addClass('darkBg');
                            $('.darkToggle').removeClass('lightBg');
                        }else{
                            $('.darkToggle').removeClass('darkBg');
                            $('.darkToggle').addClass('lightBg');
                        }

                        $('#checkToggle').on('change', function(){

                            if($('#checkToggle').is(':checked')) {
                                $('.darkToggle').addClass('darkBg');
                                $('.darkToggle').removeClass('lightBg');
                            }else{
                                $('.darkToggle').removeClass('darkBg');
                                $('.darkToggle').addClass('lightBg');
                            }
                        });


                        var $form = $('#formexample');

                        if($('#checkToggleForm').is(':checked')) {
                            $form.addClass('formInline');
                        }else{
                            $form.removeClass('formInline');
                        }

                        $('#checkToggleForm').on('change', function(){

                            if($('#checkToggleForm').is(':checked')) {
                                $form.addClass('formInline');
                            }else{
                                $form.removeClass('formInline');
                            }

                        });

                    });
                </script>

                <form id="formexample" method="post" class="formInline">

                    <fieldset>

                        <h5>Input Fields</h5>

                        <div class="row">
                            <label for="input1">Input</label>
                            <div class="inputWrap">
                                <input type="text" id="input1" name="input1" placeholder="This is placeholder text"/>
                                <div class="assistiveText">Assistive text</div>
                            </div>
                        </div>

                        <div class="row">
                            <label for="inputDisabled">Input (Disabled)</label>
                            <div class="inputWrap">
                                <input type="text" id="inputDisabled" name="input_disabled" value="Input disabled text" disabled />
                                <div class="assistiveText">Assistive text</div>
                            </div>
                        </div>


                        <div class="row requiredField">
                            <label for="inputWithFocus">Input (Required)</label>
                            <div class="inputWrap">
                                <input type="text" id="inputWithFocus" name="input_with_focus" value="Input field text" />
                            </div>
                        </div>

                        <div class="row errorWrap showError">
                            <label for="inputWithErrors">Input (Error)</label>
                            <div class="inputWrap">
                                <input type="text" id="inputWithErrors" class="text inputError" name="input_with_errors" />
                            </div>
                            <div class="validationMessage">Input error example.</div>
                        </div>
                        <script>
                            {# included here just for demo #}
                            $('document').ready(function () {
                                $('#inputWithErrors').on('click', function () {
                                    $(this).parents('.row').toggleClass('errorWrap');
                                });
                            });
                        </script>

                        <div class="row successWrap showSuccess">
                            <label for="inputWithResolvedErrors">Input (Success)</label>
                            <div class="inputWrap">
                                <input type="text" id="inputWithResolvedErrors" class="text" name="input_with_errors" />
                            </div>
                        </div>
                        <script>
                            {# included here just for demo #}
                            $('document').ready(function () {
                                $('#inputWithResolvedErrors').on('click', function () {
                                    $(this).parents('.row').toggleClass('successWrap');
                                });
                            });
                        </script>

                        <div class="row">

                            <label for="input7">Button Inline</label>

                            <div class="inputWrap buttonInline">
                                <input type="text" id="input7" name="input7" />
                                <button type="submit" class="button">Button Inline</button>
                                <div class="assistiveText">Assistive text</div>
                            </div>

                        </div>


                        <div class="row errorWrap">

                            <label for="input8">Button Inline (Errors)</label>

                            <div class="inputWrap buttonInline">
                                <input type="text" id="input8" name="input8" />
                                <button type="submit" class="buttonAlt">Button Inline</button>
                            </div>

                            <div class="validationMessage">
                                This is an error message showing beside an inline button.
                            </div>

                        </div>

                    </fieldset>

                    <fieldset>

                        <h5>Textareas</h5>

                        <div class="row">
                            <label for="textarea1">Textarea</label>
                            <div class="inputWrap">
                                <textarea type="text" id="textarea1" name="textarea1" placeholder="This is placeholder text"></textarea>
                            </div>
                            <div class="assistiveText">Assistive text</div>
                        </div>

                        <div class="row">
                            <label for="textarea2">Textarea (Disabled)</label>
                            <div class="inputWrap">
                                <textarea type="text" id="textarea2" name="textarea2" placeholder="This is placeholder text" disabled></textarea>
                            </div>
                        </div>

                        <div class="row requiredField">
                            <label for="textarea3">Textarea (Required)</label>
                            <div class="inputWrap">
                                <textarea type="text" id="textarea3" name="textarea3" placeholder="This is placeholder text"></textarea>
                            </div>
                        </div>


                        <div class="row errorWrap showError">
                            <label for="textarea4">Textarea (Error)</label>
                            <div class="inputWrap">
                                <textarea type="text" id="textarea4" name="textarea4" placeholder="This is placeholder text"></textarea>
                            </div>
                            <div class="validationMessage">Input error example.</div>
                        </div>
                        <script>
                            {# included here just for demo #}
                            $('document').ready(function () {
                                $('#textarea4').on('click', function () {
                                    $(this).parents('.row').toggleClass('errorWrap');
                                });
                            });
                        </script>

                        <div class="row successWrap showSuccess">
                            <label for="textarea5">Textarea (Success)</label>
                            <div class="inputWrap">
                                <textarea type="text" id="textarea5" name="textarea5" placeholder="This is placeholder text"></textarea>
                            </div>
                            <div class="validationMessage">Input error example.</div>
                        </div>
                        <script>
                            {# included here just for demo #}
                            $('document').ready(function () {
                                $('#textarea5').on('click', function () {
                                    $(this).parents('.row').toggleClass('successWrap');
                                });
                            });
                        </script>


                    </fieldset>

                    <fieldset>

                        <h5>Password</h5>

                        <div class="row">
                            <label for="password">Password Toggle</label>
                            <div class="inputWrap">
                                <input type="password" id="password" name="password" class="passwordToggle">
                            </div>
                        </div>

                    </fieldset>

                    <fieldset>

                        <h5>Select Boxes</h5>


                        <div class="row">
                            <label for="selectNoSearch">Select</label>

                            <div class="inputWrap">
                                <select id="selectNoSearch">
                                    <option>Please select</option>
                                    {% for i in i..3 %}
                                        <option value="option{{ i }}">Option {{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <label for="multiSelect">Multiple Select</label>

                            <div class="inputWrap">
                                <select multiple id="multiSelect">
                                    {% for i in i..10 %}
                                        <option value="option{{ i }}">Option {{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>


                        <fieldset>

                            <h5>File Selection</h5>

                            <div class="row fileUpload">
                                <label for="fileUpload">Choose File</label>
                                <input type="file"
                                       name="attached_file"
                                       class="js_fileUpload"
                                       id="fileUpload"
                                />
                                <div class="fileName js_fileName"></div>
                            </div> <!-- .row.fileUpload -->

                        </fieldset>

                        <fieldset>

                            <h5>Date Picker</h5>

                            <div class="row">
                                <label>Datepicker</label>

                                <div class="datepickerWrap">
                                    <input type="text" class="datePicker text" readonly>
                                </div>
                            </div>

                        </fieldset>


                        <fieldset>

                            <h5>Checkboxes</h5>

                            <div class="row">
                                <input type="checkbox" id="check1" name="check1" checked>
                                <label for="check1">
                                    Checkbox (Selected)
                                    <i class="hoverFX"></i>
                                </label>
                            </div>

                            <div class="row">
                                <input type="checkbox" id="check2" name="check2">
                                <label for="check2">Checkbox (Deselected) <i class="hoverFX"></i></label>
                            </div>

                            <div class="row errorWrap showError">
                                <input type="checkbox" id="check3" name="check3">
                                <label for="check3">Checkbox (Error) <i class="hoverFX"></i></label>
                                <div class="validationMessage">This is a checkbox with an error message.</div>
                            </div>

                            <div class="row">
                                <input type="checkbox" id="checkDisabled" name="check1" checked disabled>
                                <label for="checkDisabled">
                                    Checkbox (Disabled/Checked)
                                    <i class="hoverFX"></i>
                                </label>
                            </div>
                            <div class="row">
                                <input type="checkbox" id="checkDisabled2" name="check1" disabled>
                                <label for="checkDisabled2">
                                    Checkbox (Disabled)
                                    <i class="hoverFX"></i>
                                </label>
                            </div>

                        </fieldset>

                        <fieldset>

                            <h5>Radios</h5>

                            <div class="row">
                                <input type="radio" id="radio1" name="radios2" checked>
                                <label for="radio1">Radio (Selected) <i class="hoverFX"></i></label>
                            </div>

                            <div class="row">
                                <input type="radio" id="radio2" name="radios2">
                                <label for="radio2">Radio (Deselected) <i class="hoverFX"></i></label>
                            </div>

                            <div class="row errorWrap showError">
                                <input type="radio" id="radio3" name="radios_error">
                                <label for="radio3">Radio (Error) <i class="hoverFX"></i></label>
                                <div class="validationMessage">This is a radio with an error message.</div>
                            </div>

                            <div class="row">
                                <input type="radio" id="radio8" name="radios" checked disabled>
                                <label for="radio8">Radio (Disabled/Checked) <i class="hoverFX"></i></label>
                            </div>

                            <div class="row">
                                <input type="radio" id="radio9" name="radios" disabled>
                                <label for="radio8">Radio (Disabled) <i class="hoverFX"></i></label>
                            </div>

                        </fieldset>

                        <fieldset>

                            <h5>Toggle Switches</h5>

                            <div class="row">
                                <input type="checkbox" id="toggleSwitch1" name="switch1" class="toggleSwitch" checked>
                                <label for="toggleSwitch1">Toggle (Selected) <i class="hoverFX"></i></label>
                            </div>

                            <div class="row">
                                <input type="checkbox" id="toggleSwitch2" name="switch2" class="toggleSwitch">
                                <label for="toggleSwitch2">Toggle (Deselected) <i class="hoverFX"></i></label>
                            </div>

                            <div class="row errorWrap showError">
                                <input type="checkbox" id="toggleSwitch3" name="switch3" class="toggleSwitch">
                                <label for="toggleSwitch3">Toggle (Error) <i class="hoverFX"></i></label>
                                <div class="validationMessage">This is a switch with an error message.</div>
                            </div>

                            <div class="row">
                                <input type="checkbox" id="toggleSwitch8" class="toggleSwitch" checked disabled>
                                <label for="toggleSwitch8">Toggle (Disabled/Selected) <i class="hoverFX"></i></label>
                            </div>

                            <div class="row">
                                <input type="checkbox" id="toggleSwitch9" class="toggleSwitch" disabled>
                                <label for="toggleSwitch9">Toggle (Disabled) <i class="hoverFX"></i></label>
                            </div>


                        </fieldset>


                        <fieldset>

                            <h5>Range Slider</h5>

                            {% include 'shop/browse/range_slider.twig' with {
                                min_value: 0,
                                max_value: 500,
                                current_min_value: 100,
                                current_max_value: 400
                            }%}

                            {% include 'shop/browse/range_slider.twig' with {
                                min_value: 0,
                                max_value: 500,
                                current_min_value: 100,
                                current_max_value: 400,
                                class: 'disabled'
                            }%}

                        </fieldset>


                        <fieldset>

                            <h5>Input Icons</h5>

                            <div class="row fieldIcon iconId">
                                <label for="inputA">ID Number</label>
                                <div class="inputWrap">
                                    <input type="text" id="inputA" placeholder="123456789">
                                </div>
                            </div>

                            <div class="row fieldIcon iconAddress">
                                <label for="inputB">Address</label>
                                <div class="inputWrap">
                                    <input type="text" id="inputB" placeholder="5 Address Field Lane">
                                </div>
                            </div>

                            <div class="row fieldIcon iconPostcode">
                                <label for="inputC">Postcode</label>
                                <div class="inputWrap">
                                    <input type="text" id="inputC" placeholder="TE5 4ER">
                                </div>
                            </div>

                            <div class="row fieldIcon iconPassword">
                                <label for="inputD">Password</label>
                                <div class="inputWrap">
                                    <input type="password" id="inputD">
                                </div>
                            </div>

                            <div class="row fieldIcon iconUser">
                                <label for="inputE">User</label>
                                <div class="inputWrap">
                                    <input type="text" id="inputE">
                                </div>
                            </div>

                            <div class="row fieldIcon iconPhone">
                                <label for="inputF">Phone</label>
                                <div class="inputWrap">
                                    <input type="text" id="inputF" placeholder="01234 123456">
                                </div>
                            </div>

                            <div class="row fieldIcon iconEmail">
                                <label for="inputG">Email</label>
                                <div class="inputWrap">
                                    <input type="text" id="inputG" placeholder="email@example.com">
                                </div>
                            </div>

                        </fieldset>


                        <div class="buttonGroup">
                            <button type="submit" class="button buttonActive js_buttonClick">Submit button</button>
                            <script>
                                {# included here just for demo #}
                                $('document').ready(function () {
                                    $('.js_buttonClick').on('click', function (e) {
                                        e.preventDefault();
                                        $('.js_buttonClick').toggleClass('busy');
                                    });
                                });
                            </script>
                        </div>

                    </fieldset>

                </form>

            </section>

            <section class="styleGuideTables lightBg noMargin" style="background: #fff">

                <h3>Tables</h3>

                <h5 class="styleGuideSectionTitle">Standard Table</h5>

                <table>
                    <tr>
                        <th>Table header</th>
                        <th>Table header</th>
                        <th>Table header</th>
                    </tr>

                    {% for i in 1..4 %}
                        <tr>
                            <td>Table contents</td>
                            <td>Table contents</td>
                            <td>Table contents</td>
                        </tr>
                    {% endfor %}
                </table>

            </section>

            <section class="styleGuideTables darkBg noMargin">


                <h5 class="styleGuideSectionTitle">Standard Table Dark</h5>

                <table>
                    <tr>
                        <th>Table header</th>
                        <th>Table header</th>
                        <th>Table header</th>
                    </tr>

                    {% for i in 1..4 %}
                        <tr>
                            <td>Table contents</td>
                            <td>Table contents</td>
                            <td>Table contents</td>
                        </tr>
                    {% endfor %}
                </table>

            </section>

            <section class="styleGuideTables lightBg noMargin" style="background: #fff">

                <h5 class="styleGuideSectionTitle">Table Alternating</h5>

                <table class="alternating">
                    <tr>
                        <th>Table header</th>
                        <th>Table header</th>
                        <th>Table header</th>
                    </tr>

                    {% for i in 1..4 %}
                        <tr>
                            <td>Table contents</td>
                            <td>Table contents with longer text content</td>
                            <td>Table contents</td>
                        </tr>
                    {% endfor %}
                </table>

            </section> <!-- .styleGuideTables -->

            <section class="styleGuideTables darkBg noMargin">

                <h5 class="styleGuideSectionTitle">Table Alternating Dark</h5>

                <table class="alternating">
                    <tr>
                        <th>Table header</th>
                        <th>Table header</th>
                        <th>Table header</th>
                    </tr>

                    {% for i in 1..4 %}
                        <tr>
                            <td>Table contents</td>
                            <td>Table contents with longer text content</td>
                            <td>Table contents</td>
                        </tr>
                    {% endfor %}
                </table>

            </section> <!-- .styleGuideTables -->

            <section class="styleGuideTables lightBg noMargin" style="background: #fff">


                <h5 class="styleGuideSectionTitle">Responsive Table</h5>

                <table class="responsiveTitles">
                    <tr>
                        <th>Table header</th>
                        <th>Table header</th>
                        <th class="opts">Options</th>
                    </tr>

                    {% for i in 1..4 %}
                        <tr>
                            <td>Table contents</td>
                            <td>Table contents</td>
                            <td class="opts">
                                <div class="row">
                                    <input type="checkbox" id="toggleSwitch1_{{ loop.index }}" class="toggleSwitch" {% if loop.index is odd %}checked{% endif %}>
                                    <label for="toggleSwitch1_{{ loop.index }}"><i class="hoverFX"></i></label>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </table>

            </section>

            <section class="styleGuideTables darkBg">


                <h5 class="styleGuideSectionTitle">Responsive Table Dark</h5>

                <table class="responsiveTitles">
                    <tr>
                        <th>Table header</th>
                        <th>Table header</th>
                        <th class="opts">Options</th>
                    </tr>

                    {% for i in 1..4 %}
                        <tr>
                            <td>Table contents</td>
                            <td>Table contents</td>
                            <td class="opts">
                                <div class="row">
                                    <input type="checkbox" id="toggleSwitch2_{{ loop.index }}" class="toggleSwitch" {% if loop.index is odd %}checked{% endif %}>
                                    <label for="toggleSwitch2_{{ loop.index }}"><i class="hoverFX"></i></label>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </table>

            </section>

            <section class="styleGuidePagination lightBg noMargin">

                <h5 class="styleGuideSectionTitle">Pagination</h5>

                <div class="paginationWrap">
                    <ul class="pagination">
                        <li class="prev">
                            <a href="?page=1" rel="prev">First</a>
                        </li>
                        <li class="active">
                            <a href="">1</a>
                        </li>
                        <li>
                            <a href="?page=2" rel="next">2</a>
                        </li>
                        <li>
                            <a href="?page=3" rel="next">3</a>
                        </li>
                        <li class="dots">
                            <i class="fal fa-ellipsis-h"></i>
                        </li>
                        <li>
                            <a href="?page=7" rel="next">7</a>
                        </li>
                        <li>
                            <a href="?page=7" rel="next">8</a>
                        </li>
                        <li>
                            <a href="?page=7" rel="next">9</a>
                        </li>
                        <li class="next">
                            <a href="?page=7" rel="next">Last</a>
                        </li>
                    </ul>
                </div>

                <div class="paginationWrap">
                    <ul class="pagination">
                        <li class="prev arrows">
                            <a href="?page=2" rel="prev"></a>
                        </li>
                        <li class="pageXOfY">
                            Page 1 of 10
                        </li>
                        <li class="next arrows">
                            <a href="?page=2" rel="next"></a>
                        </li>
                    </ul>
                </div>

            </section>

            <section class="styleGuidePagination darkBg">

                <h5 class="styleGuideSectionTitle">Pagination Dark</h5>

                <div class="paginationWrap">
                    <ul class="pagination">
                        <li class="prev">
                            <a href="?page=1" rel="prev">First</a>
                        </li>
                        <li class="active">
                            <a href="">1</a>
                        </li>
                        <li>
                            <a href="?page=2" rel="next">2</a>
                        </li>
                        <li>
                            <a href="?page=3" rel="next">3</a>
                        </li>
                        <li class="dots">
                            <i class="fal fa-ellipsis-h"></i>
                        </li>
                        <li>
                            <a href="?page=7" rel="next">7</a>
                        </li>
                        <li>
                            <a href="?page=7" rel="next">8</a>
                        </li>
                        <li>
                            <a href="?page=7" rel="next">9</a>
                        </li>
                        <li class="next">
                            <a href="?page=7" rel="next">Last</a>
                        </li>
                    </ul>
                </div>

                <div class="paginationWrap">
                    <ul class="pagination">
                        <li class="prev arrows">
                            <a href="?page=2" rel="prev"></a>
                        </li>
                        <li class="pageXOfY">
                            Page 1 of 10
                        </li>
                        <li class="next arrows">
                            <a href="?page=2" rel="next"></a>
                        </li>
                    </ul>
                </div>

            </section>

            <section class="styleGuideBreadcrumbs lightBg noMargin">

                <h5 class="styleGuideSectionTitle">Breadcrumbs</h5>

                {% include 'navigation/breadcrumbs.twig' %}

            </section>

            <section class="styleGuideBreadcrumbs darkBg">

                <h5 class="styleGuideSectionTitle">Breadcrumbs Dark</h5>

                {% include 'navigation/breadcrumbs.twig' %}

            </section>

            <section class="styleGuideTooltips lightBg noMargin">

                <h5 class="styleGuideSectionTitle">Tooltips</h5>

                <div class="row">
                    {% include 'includes/elements/tooltip.twig' with {
                        tip_side: 'top',
                        tip_title: 'Tooltip Top',
                        tip_content: 'Top tooltip text lives in here.'
                    } %}
                </div>

                <div class="row">
                    {% include 'includes/elements/tooltip.twig' with {
                        tip_side: 'right',
                        tip_title: 'Tooltip Right',
                        tip_content: 'Tooltip text lives in here.'
                    } %}
                </div>

                <div class="row">
                    {% include 'includes/elements/tooltip.twig' with {
                        tip_side: 'bottom',
                        tip_title: 'Tooltip Bottom',
                        tip_content: 'Tooltip text lives in here.'
                    } %}
                </div>

                <div class="row">
                    {% include 'includes/elements/tooltip.twig' with {
                        tip_side: 'left',
                        tip_title: 'Tooltip Left',
                        tip_content: 'Tooltip text lives in here.'
                    } %}
                </div>

            </section>

            <section class="styleGuideTooltips darkBg">

                <h5 class="styleGuideSectionTitle">Tooltips Dark</h5>

                <div class="row">
                    {% include 'includes/elements/tooltip.twig' with {
                        tip_side: 'top',
                        tip_title: 'Tooltip Top',
                        tip_content: 'Top tooltip text lives in here.'
                    } %}
                </div>

                <div class="row">
                    {% include 'includes/elements/tooltip.twig' with {
                        tip_side: 'right',
                        tip_title: 'Tooltip Right',
                        tip_content: 'Tooltip text lives in here.'
                    } %}
                </div>

                <div class="row">
                    {% include 'includes/elements/tooltip.twig' with {
                        tip_side: 'bottom',
                        tip_title: 'Tooltip Bottom',
                        tip_content: 'Tooltip text lives in here.'
                    } %}
                </div>

                <div class="row">
                    {% include 'includes/elements/tooltip.twig' with {
                        tip_side: 'left',
                        tip_title: 'Tooltip Left',
                        tip_content: 'Tooltip text lives in here.'
                    } %}
                </div>

            </section>

        </div> <!-- .styleGuideColumn -->

    </div> <!-- .wrapper -->

{% endblock %}
