{% extends "arctic/base.html" %}

{% block content %}
    <h4 id="form" data-magellan-target="form">Form with HTML5 input types</h4>
    <form class="content-block__flex-wrap float-label" data-abide novalidate>
        <fieldset type="get" class="fieldset-default arctic-card">
            <div class="form-size">
                <div data-abide-error class="alert callout" style="display: none;">
                    <p><i class="fi-alert"></i> There are some errors in your form.</p>
                </div>
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-3 col">
                        <div class="form-group">
                            <input class="form-control" id="text" type="text" required />
                            <label for="text">Text Input</label>
                        </div>
                    </div>

                    <div class="col-sm-12 col-md-6 col-lg-3 col">
                        <div class="form-group">
                            <input class="form-control" id="text_disabled" type="text" value="Some Value" required disabled />
                            <label for="text_disabled">Text Input Disabled</label>
                        </div>
                    </div>

                    <div class="col-sm-12 col-md-6 col-lg-3 col">
                        <div class="form-group">
                            <input class="form-control" id="password" type="password" required />
                            <label for="password">Password Input</label>
                        </div>
                    </div>

                    <div class="col-sm-12 col-md-6 col-lg-3 col">
                        <div class="form-group">
                            <input class="form-control" id="email" type="email" required />
                            <label for="email">Email Input</label>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12 col-md-6 col">
                        <div class="form-group">
                            <input class="form-control" id="datetime_local" type="datetime-local" pattern="[0-9]{2}-[0-9]{2}-[0-9]{4} [2]{2}:[2]{2}" js-datetimepicker />
                            <label for="datetime_local">DateTime-Local Input</label>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3 col">
                        <div class="form-group">
                            <input class="form-control" id="date" type="date" js-datepicker />
                            <label for="date">Date Input</label>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3 col">
                       <div class="form-group">
                            <input class="form-control" id="time" type="time" js-timepicker />
                            <label for="time">Time Input</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <textarea name="description" cols="40" rows="3" id="textarea"></textarea>
                            <label for="textarea">Textarea</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col">
                        <div class="form-group">
                            <input class="form-control" id="number" type="number" required />
                            <label for="number">Number Input</label>
                        </div>
                    </div>
                    <div class="col-sm-4 col">
                        <div class="form-group">
                            <input class="form-control" id="range" type="range" required />
                            <label for="range">Range Input</label>
                        </div>
                    </div>
                    <div class="col-sm-4 col">
                       <div class="form-group">
                            <input class="form-control" id="color" type="color" required />
                            <label for="color">Color Input</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col">
                        <div class="form-group">
                            <input class="form-control" id="url" type="url" required />
                            <label for="url">Url Input</label>
                        </div>
                    </div>
                    <div class="col-sm-6 col">
                        <div class="form-group">
                            <input class="form-control" id="file" type="file" required />
                            <label for="range">File Input</label>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-sm-6 col-md-3 col">
                        <div class="form-group styled-select">
                            <label for="styled-select">Option groups</label>
                            <select id="styled-select">
                                <option value="">Select gear...</option>
                                <optgroup label="Climbing">
                                    <option value="pitons">Pitons</option>
                                    <option value="cams">Cams</option>
                                    <option value="nuts">Nuts</option>
                                    <option value="bolts">Bolts</option>
                                    <option value="stoppers">Stoppers</option>
                                    <option value="sling">Sling</option>
                                </optgroup>
                                <optgroup label="Skiing">
                                    <option value="skis">Skis</option>
                                    <option value="skins">Skins</option>
                                    <option value="poles">Poles</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row button-group">
                    <div class="col-sm-6">
                        <button class="btn btn-secondary" type="reset" value="Reset">Reset</button>
                    </div>
                    <div class="col-sm-6 text-right">
                        <button class="btn btn-primary" type="submit" value="Submit">Submit</button>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>

    <hr class="clearfix"/>
    <h4>Selectize</h4>
    <div class="row">
        <div class="col-md-4 col">
            <div class="form-group">
                <label>Tags</label>
                <input type="text" js-selectize placeholder="Selectize tags" value="tags,test,arctic">
            </div>
        </div>
        <div class="col-md-4 col">
            <div class="form-group">
                <label for="select-gear">Option groups</label>
                <select id="select-gear" js-selectize placeholder="Select gear...">
                    <option value="">Select gear...</option>
                    <optgroup label="Climbing">
                        <option value="pitons">Pitons</option>
                        <option value="cams">Cams</option>
                        <option value="nuts">Nuts</option>
                        <option value="bolts">Bolts</option>
                        <option value="stoppers">Stoppers</option>
                        <option value="sling">Sling</option>
                    </optgroup>
                    <optgroup label="Skiing">
                        <option value="skis">Skis</option>
                        <option value="skins">Skins</option>
                        <option value="poles">Poles</option>
                    </optgroup>
                </select>
            </div>
        </div>
    </div>

    <hr class="clearfix"/>
    <h4 id="tooltips" data-magellan-target="tooltips">Tooltips</h4>
    <p>The <a href="#" data-toggle="tooltip" data-original-title="Fancy word for beetle" title="Fancy word for a beetle.">scarabaeus</a> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.</p>

    <hr class="clearfix"/>
    <h4 id="pagination" data-magellan-target="pagination">Pagination</h4>
    <nav aria-label="...">
        <ul class="pagination">
            <li class="page-item disabled">
                <span class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                </span>
            </li>
            <li class="page-item active">
                <span class="page-link">
                1
                    <span class="sr-only">(current)</span>
                </span>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">2</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">3</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">4</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">5</a>
            </li>
            <li class="page-item"><a class="page-link" href="#">6</a></li>
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&raquo;</span>
                    <span class="sr-only">Next</span>
                </a>
            </li>
        </ul>
    </nav>

    <hr class="clearfix"/>
    <h4 id="tables" data-magellan-target="tables">Tables</h4>
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a href="#panel1" class="nav-link active" data-toggle="tab" role="tab">Default table</a>
        </li>
        <li class="nav-item">
            <a href="#panel2" class="nav-link" data-toggle="tab" role="tab">Horizontal scroll table</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="panel1" role="tabpanel">
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th width="200">Table Header</th>
                            <th>Table Header</th>
                            <th width="150">Table Header</th>
                            <th width="150">Table Header</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Content Goes Here</td>
                            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
                            <td>Content Goes Here</td>
                            <td>Content Goes Here</td>
                        </tr>
                        <tr>
                            <td>Content Goes Here</td>
                            <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
                            <td>Content Goes Here</td>
                            <td>Content Goes Here</td>
                        </tr>
                        <tr>
                            <td>Content Goes Here</td>
                            <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
                            <td>Content Goes Here</td>
                            <td>Content Goes Here</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="tab-pane" id="panel2" role="tabpanel">
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>This is the description!</th>
                            <th>One</th>
                            <th>Two</th>
                            <th>Three</th>
                            <th>Four</th>
                            <th>Five</th>
                            <th>Six</th>
                            <th>Seven</th>
                            <th>Eight</th>
                            <th>Nine</th>
                            <th>Ten</th>
                            <th>Eleven</th>
                            <th>Twelve</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="display:block; width:400px;">These are all the words that people use to describe Foundation 6!</td>
                            <td>Cool</td>
                            <td>Swag</td>
                            <td>Chill</td>
                            <td>Killer</td>
                            <td>Rad</td>
                            <td>Baller</td>
                            <td>OMG</td>
                            <td>Sweet</td>
                            <td>Awesome</td>
                            <td>Beast</td>
                            <td>Dope</td>
                            <td>Tubular</td>
                        </tr>
                        <tr>
                            <td>These are some words that people use to describe other web frameworks.</td>
                            <td>Whatevs</td>
                            <td>Ugh.</td>
                            <td>LOL</td>
                            <td>K</td>
                            <td>Aight</td>
                            <td>Eh.</td>
                            <td>Grrr...</td>
                            <td>Meh.</td>
                            <td>TTYL</td>
                            <td>Bleh.</td>
                            <td>Really?</td>
                            <td>Why?</td>
                        </tr>
                        <tr>
                            <td>Here are some great super heros.</td>
                            <td>Batman</td>
                            <td>Superman</td>
                            <td>Spiderman</td>
                            <td>Wonder Woman</td>
                            <td>Hulk</td>
                            <td>Nicolas Cage</td>
                            <td>Antman</td>
                            <td>Aquaman</td>
                            <td>Captain America</td>
                            <td>Wolverine</td>
                            <td>Thor</td>
                            <td>Iron Man</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>Here's a footer, just in case</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    <hr class="clearfix">
    <h4 id="callouts" data-magellan-target="callouts">Callouts</h4>
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
    </div>
    <div class="alert alert-info alert-dismissible fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
    </div>
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
    </div>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
    </div>

    <hr class="clearfix"/>
    <h4 id="modal" data-magellan-target="modal">Modal</h4>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    I'm a Modal
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                Click me for a modal
            </button>
        </div>
    </div>

    <hr class="clearfix">
    <h4 id="progress" data-magellan-target="progress">Progress</h4>
    <div class="row">
        <div class="col-sm-12 col">
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div><br>
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
            </div><br>
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-info w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
            </div><br>
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    </div>

    <hr class="clearfix"/>
    <h4 id="labels" data-magellan-target="labels">Labels</h4>
    <div class="row">
        <div class="col">
            <span class="badge badge-default">Default</span>
            <span class="badge badge-primary">Primary</span>
            <span class="badge badge-success">Success</span>
            <span class="badge badge-info">Info</span>
            <span class="badge badge-warning">Warning</span>
            <span class="badge badge-danger">Danger</span>
        </div>
    </div>

    <hr class="clearfix"/>
    <h4 id="breadcrumbs" data-magellan-target="breadcrumbs">Breadcrumbs</h4>
    <div>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Features</a></li>
            <li class="breadcrumb-item active"><span class="show-for-sr">Current: </span> Cloning</li>
        </ul>
    </div>

{% endblock %}

{% block scripts_bottom %}
{{ block.super }}
{% endblock %}