{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template theme_boost/admin_setting_styleguide

    Style guide present in theme settings.

    Example context (json): {}
}}
<div class="container box large bordered">
    <header class="major special"><h2>Elements</h2>
        <p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p></header>
    <section><h3>Text</h3>
        <p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is
            <em>emphasized</em>. This is <sup>superscript</sup> text and this is <sub>subscript</sub> text. This is <u>underlined</u>
            and this is code: <code>for (;;) { ... }</code>. Finally, <a style="cursor: pointer;" href="#">this is a
                link</a>.
        </p>
        <hr>
        <h2>Heading Level 2</h2>
        <h3>Heading Level 3</h3>
        <h4>Heading Level 4</h4>
        <h5>Heading Level 5</h5>
        <h6>Heading Level 6</h6>
        <hr>
        <h4>Blockquote</h4>
        <blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod.
            Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac
            adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam
            adipiscing eu felis.
        </blockquote>
        <h4>Preformatted</h4>
        <pre><code>i = 0;
while (!deck.isInOrder()) {
print 'Iteration ' + i;
deck.shuffle();
i++;
}
print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
    </section>
    <section><h3>Lists</h3>
        <div class="row">
            <div class="col-6 col-12-xsmall"><h4>Unordered</h4>
                <ul>
                    <li>Dolor pulvinar etiam magna etiam.</li>
                    <li>Sagittis adipiscing lorem eleifend.</li>
                    <li>Felis enim feugiat dolore viverra.</li>
                </ul>
                <h4>Alternate</h4>
                <ul class="alt">
                    <li>Dolor pulvinar etiam magna etiam.</li>
                    <li>Sagittis adipiscing lorem eleifend.</li>
                    <li>Felis enim feugiat dolore viverra.</li>
                </ul>
            </div>
            <div class="col-6 col-12-xsmall"><h4>Ordered</h4>
                <ol>
                    <li>Dolor pulvinar etiam magna etiam.</li>
                    <li>Etiam vel felis at lorem sed viverra.</li>
                    <li>Felis enim feugiat dolore viverra.</li>
                    <li>Dolor pulvinar etiam magna etiam.</li>
                    <li>Etiam vel felis at lorem sed viverra.</li>
                    <li>Felis enim feugiat dolore viverra.</li>
                </ol>
            </div>
        </div>
        <h4>Icons</h4>
        <ul class="d-inline list-unstyled">
            <li class="d-inline m-r-1"><a class="fa fa-2x fa-twitter" style="cursor: pointer;"></a></li>
            <li class="d-inline m-r-1"><a class="fa fa-2x fa-facebook" style="cursor: pointer;"></a></li>
            <li class="d-inline m-r-1"><a class="fa fa-2x fa-instagram" style="cursor: pointer;"></a></li>
            <li class="d-inline m-r-1"><a class="fa fa-2x fa-github" style="cursor: pointer;"></a></li>
            <li class="d-inline m-r-1"><a class="fa fa-2x fa-dribbble" style="cursor: pointer;"></a></li>
            <li class="d-inline m-r-1"><a class="fa fa-2x fa-tumblr" style="cursor: pointer;"></a></li>
        </ul>
        <h4>Actions</h4>
        <ul class="actions">
            <li><a class="btn btn-primary" style="cursor: pointer;">Default</a></li>
            <li><a class="btn" style="cursor: pointer;">Default</a></li>
            <li><a class="btn btn-secondary" style="cursor: pointer;">Default</a></li>
        </ul>
        <ul class="actions small">
            <li><a class="btn btn-primary small" style="cursor: pointer;">Small</a></li>
            <li><a class="btn small" style="cursor: pointer;">Small</a></li>
            <li><a class="btn btn-secondary small" style="cursor: pointer;">Small</a></li>
        </ul>
        <h3>Buttons</h3>
        <ul class="actions">
            <li><a class="btn btn-primary large" style="cursor: pointer;">Large</a></li>
            <li><a class="btn" style="cursor: pointer;">Default</a></li>
            <li><a class="btn btn-secondary small" style="cursor: pointer;">Small</a></li>
        </ul>
        <div class="row">
            <div class="col-6 col-12-xsmall">
                <ul class="actions fit small">
                    <li><a class="btn fit small" style="cursor: pointer;">Fit + Small</a></li>
                    <li><a class="btn btn-secondary fit small" style="cursor: pointer;">Fit + Small</a></li>
                </ul>
            </div>
        </div>
        <ul class="actions">
            <li><a class="btn btn-primary fa fa-download" style="cursor: pointer;">Icon</a></li>
            <li><a class="btn fa fa-download" style="cursor: pointer;">Icon</a></li>
            <li><a class="btn btn-secondary fa fa-download" style="cursor: pointer;">Icon</a></li>
        </ul>
        <ul class="actions">
            <li><span class="btn primary disabled">Primary</span></li>
            <li><span class="btn disabled">Default</span></li>
            <li><span class="btn btn-secondary disabled">Alternate</span></li>
        </ul>
    </section>
    <section><h3>Table</h3><h4>Default</h4>
        <div class="table-wrapper">
            <table class="table">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Price</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Item 1</td>
                    <td>Ante turpis integer aliquet porttitor.</td>
                    <td>29.99</td>
                </tr>
                <tr>
                    <td>Item 2</td>
                    <td>Vis ac commodo adipiscing arcu aliquet.</td>
                    <td>19.99</td>
                </tr>
                <tr>
                    <td>Item 3</td>
                    <td> Morbi faucibus arcu accumsan lorem.</td>
                    <td>29.99</td>
                </tr>
                <tr>
                    <td>Item 4</td>
                    <td>Vitae integer tempus condimentum.</td>
                    <td>19.99</td>
                </tr>
                <tr>
                    <td>Item 5</td>
                    <td>Ante turpis integer aliquet porttitor.</td>
                    <td>29.99</td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="2">Total</td>
                    <td>100.00</td>
                </tr>
                </tfoot>
            </table>
        </div>
        <h4>Alternate</h4>
        <div class="table-wrapper table">
            <table class="table table-bordered table-hover table-striped">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Price</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Item 1</td>
                    <td>Ante turpis integer aliquet porttitor.</td>
                    <td>29.99</td>
                </tr>
                <tr>
                    <td>Item 2</td>
                    <td>Vis ac commodo adipiscing arcu aliquet.</td>
                    <td>19.99</td>
                </tr>
                <tr>
                    <td>Item 3</td>
                    <td>Morbi faucibus arcu accumsan lorem.</td>
                    <td>29.99</td>
                </tr>
                <tr>
                    <td>Item 4</td>
                    <td>Vitae integer tempus condimentum.</td>
                    <td>19.99</td>
                </tr>
                <tr>
                    <td>Item 5</td>
                    <td>Ante turpis integer aliquet porttitor.</td>
                    <td>29.99</td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="2">Total</td>
                    <td>100.00</td>
                </tr>
                </tfoot>
            </table>
        </div>
    </section>
    <section><h3>Form</h3>
        <form method="post" action="#" class="mform">
            <fieldset class="clearfix collapsible" id="id_moodle">
                <div class="fcontainer clearfix">
                    <div id="fitem_id_username" class="form-group row  fitem   ">
                        <div class="col-md-3">
                        <span class="float-sm-right text-nowrap">
                            <a class="btn btn-link p-0" role="button" data-container="body" data-toggle="popover"
                               data-placement="right"
                               data-content="<div class=&quot;no-overflow&quot;><p>Vis ac commodo adipiscing arcu aliquet...</p></div>"
                               data-html="true"
                               tabindex="0" data-trigger="focus">
                              <i class="icon fa fa-question-circle text-info fa-fw " aria-hidden="true"></i>
                            </a>
                        </span>
                            <label class="col-form-label d-inline " for="id_username">
                                {{#str}}username{{/str}}
                            </label>
                        </div>
                        <div class="col-md-9 form-inline felement" data-fieldtype="text">
                            <input type="text" class="form-control " name="username" id="id_username" value="admin"
                                   size="20">
                            <div class="form-control-feedback invalid-feedback" id="id_error_username"></div>
                        </div>
                    </div>
                    <div id="fitem_id_newpassword" class="form-group row  fitem   ">
                        <div class="col-md-3">
                            <label class="col-form-label d-inline " for="id_newpassword">
                                {{#str}}newpassword{{/str}}
                            </label>
                        </div>
                        <div class="col-md-9 form-inline felement" data-fieldtype="passwordunmask">
                            <span data-passwordunmask="wrapper" data-passwordunmaskid="id_newpassword">
                                <span data-passwordunmask="editor">
                                    <input type="password" name="newpassword" id="id_newpassword" value=""
                                           class="form-control d-inline-block" data-size="20">
                                </span>
                            </span>
                        </div>
                    </div>
                    <div class="form-group row  fitem">
                        <div class="col-md-3">
                        </div>
                    </div>
                    <div id="fitem_id_maildisplay" class="form-group row  fitem   ">
                        <div class="col-md-3">
                            <label class="col-form-label d-inline " for="id_maildisplay">
                                {{#str}}emaildisplay{{/str}}
                            </label>
                        </div>
                        <div class="col-md-9 form-inline felement" data-fieldtype="select">
                            <select class="custom-select" name="maildisplay" id="id_maildisplay">
                                <option value="0">{{#str}}emaildisplayno{{/str}}</option>
                                <option value="1" selected="">{{#str}}emaildisplayyes{{/str}}</option>
                                <option value="2">{{#str}}emaildisplaycourse{{/str}}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </section>
</div>