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

{% block content %}

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

    <div class="styleGuideColumn">

        <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">

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

            <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">

            <h2>Unordered List</h2>

            <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">

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

            <img src="http://placehold.it/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="http://placehold.it/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>

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

    <div class="styleGuideColumn last">

        <section class="styleGuideButtons">

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

            <div class="buttonGroup">
                <a href="#" class="btn">Some button text</a>
                <a href="#" class="btn secondaryActionButton">Secondary Button</a>
            </div>

        </section>

        <section class="styleGuideNotifications">

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

            <div class="el error msg">
                Error Message <a href="#">with a link</a> <i class="fa fa-check-circle"></i>
            </div>

            <div class="el alert msg">
                Alert Message <a href="#">with a link</a> <i class="fa fa-check-circle"></i>
            </div>

            <div class="el success msg">
                Success Message <a href="#">with a link</a> <i class="fa fa-check-circle"></i>
            </div>

        </section>

        <section class="styleGuideForms">

            <form method="post" class="withBackground formInline styledForm">

                <fieldset>

                    <h5>Group Name</h5>

                    <div class="row">
                        <label for="input">Input</label>
                        <div class="inputWrap">
                            <input type="text" id="input" name="input" />
                        </div>
                    </div>

                    <div class="row">

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

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

                    </div>

                    <div class="row errorWrap">

                        <label for="input">Button inline with errors</label>

                        <div class="inputWrap buttonInline">
                            <input type="text" id="input" name="input" />
                            <button type="submit" class="btn secondaryActionButton">Inline</button>
                        </div>

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

                    </div>

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

                    <div class="row">
                        <label for="inputWithFocus">Input with focus</label>
                        <div class="inputWrap">
                            <input type="text" id="inputWithFocus" name="input_with_focus" value="Input field text" />
                        </div>
                    </div>

                </fieldset>

                <fieldset>

                    <h5>Group Name</h5>

                    <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>
                    </div>

                    <div class="row">
                        <label for="selectSearch">Select with search</label>

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

                    <div class="row">
                        <label for="selectNoSearch">Select with no search</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>

                    <div class="row">
                        <input type="checkbox" id="checkboxUnselected" name="checkbox_unselected" />
                        <label for="checkboxUnselected">Checkbox Unselected</label>
                    </div>

                    <div class="row">
                        <input type="checkbox" id="checkboxSelected" name="checkbox_selected" checked />
                        <label for="checkboxSelected">Checkbox Selected with a long label so it will run across a couple of lines.  Checkbox Selected with a long label so it will run across a couple of lines.</label>
                    </div>

                    <div class="row">
                        <input type="radio" id="radioUnselected" name="radio_buttons" />
                        <label for="radioUnselected">Radio Unselected</label>
                    </div>

                    <div class="row">
                        <input type="radio" id="radioSelected" name="radio_buttons" checked />
                        <label for="radioSelected">Radio Selected</label>
                    </div>

                    <div class="row errorWrap showError">
                        <input type="radio" id="radioWithError" name="radio_buttons" checked />
                        <label for="radioWithError">Checkbox with error message</label>

                        <div class="validationMessage">This is a checkbox with an error message.</div>
                    </div>

                    <div class="row errorWrap showError">
                        <label for="inputWithErrors">Input with errors</label>
                        <div class="inputWrap">
                            <input type="text" id="inputWithErrors" class="text inputError" name="input_with_errors" />
                        </div>
                        <div class="validationMessage">You have put text in a number field.  This message pushes content down.</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 with resolved errors</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>Datepicker</label>

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

                    <div class="buttonGroup">
                        <button type="submit" class="btn 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">

            <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">

            <h5 class="styleGuideSectionTitle">Table with alternating rows</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="styleGuidePagination">

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

            <ul class="pagination">
                <li class="pageXOfY">
                    Page 1 of 10
                </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>
                    <a href="?page=4" rel="next">4</a>
                </li>
                <li class="next">
                    <a href="?page=2" rel="next">Next</a>
                </li>
            </ul>

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

        </section>

        <section class="styleGuideBreadcrumbs">

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

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

        </section>


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

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

{% endblock %}
