{% extends "layouts/default.html" %}

{% block title %} Blank Page {% endblock title %}

{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <div class="row gap-20 masonry pos-r">
        <h4 class="c-grey-900">UI Elements</h4>
        <div class="masonry-sizer col-md-6"></div>
        <div class="masonry-item col-md-6">
        <div class="bgc-white p-20 bd">
            <h6 class="c-grey-900">Alerts</h6>
            <div class="mT-30">
            <div class="alert alert-primary" role="alert">
                This is a primary alert—check it out!
            </div>
            <div class="alert alert-secondary" role="alert">
                This is a secondary alert—check it out!
            </div>
            <div class="alert alert-success" role="alert">
                This is a success alert—check it out!
            </div>
            <div class="alert alert-danger" role="alert">
                This is a danger alert—check it out!
            </div>
            <div class="alert alert-warning" role="alert">
                This is a warning alert—check it out!
            </div>
            <div class="alert alert-info" role="alert">
                This is a info alert—check it out!
            </div>
            <div class="alert alert-light" role="alert">
                This is a light alert—check it out!
            </div>
            <div class="alert alert-dark" role="alert">
                This is a dark alert—check it out!
            </div>
            </div>
        </div>
        </div>
        <div class="masonry-item col-md-6">
        <div class="bgc-white p-20 bd">
            <h6 class="c-grey-900">Buttons</h6>
            <div class="mT-30">
            <div class="gap-10 peers">
                <div class="peer">
                <button type="button" class="btn cur-p btn-primary">Primary</button>
                </div>
                <div class="peer">
                <button type="button" class="btn cur-p btn-secondary">Secondary</button>
                </div>
                <div class="peer">
                <button type="button" class="btn cur-p btn-success">Success</button>
                </div>
                <div class="peer">
                <button type="button" class="btn cur-p btn-danger">Danger</button>
                </div>
                <div class="peer">
                <button type="button" class="btn cur-p btn-warning">Warning</button>
                </div>
                <div class="peer">
                <button type="button" class="btn cur-p btn-info">Info</button>
                </div>
                <div class="peer">
                <button type="button" class="btn cur-p btn-light">Light</button>
                </div>
                <div class="peer">
                <button type="button" class="btn cur-p btn-dark">Dark</button>
                </div>
            </div>

            <div class="w-100 gap-10 peers mY-20">
                <div class="peer">
                <button type="button" class="btn cur-p btn-outline-primary">Primary</button>
                </div>
                <div class="peer">
                <button type="button" class="btn cur-p btn-outline-secondary">Secondary</button>
                </div>
                <div class="peer">
                <button type="button" class="btn cur-p btn-outline-success">Success</button>
                </div>
                <div class="peer">
                <button type="button" class="btn cur-p btn-outline-danger">Danger</button>
                </div>
                <div class="peer">
                <button type="button" class="btn cur-p btn-outline-warning">Warning</button>
                </div>
                <div class="peer">
                <button type="button" class="btn cur-p btn-outline-info">Info</button>
                </div>
                <div class="peer">
                <button type="button" class="btn cur-p btn-outline-light">Light</button>
                </div>
                <div class="peer">
                <button type="button" class="btn cur-p btn-outline-dark">Dark</button>
                </div>
            </div>

            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                <div class="btn-group mr-2" role="group" aria-label="First group">
                <button type="button" class="btn btn-success">1</button>
                <button type="button" class="btn btn-success">2</button>
                <button type="button" class="btn btn-success">3</button>
                <button type="button" class="btn btn-success">4</button>
                </div>
                <div class="btn-group mr-2" role="group" aria-label="Second group">
                <button type="button" class="btn btn-success">5</button>
                <button type="button" class="btn btn-success">6</button>
                <button type="button" class="btn btn-success">7</button>
                </div>
                <div class="btn-group" role="group" aria-label="Third group">
                <button type="button" class="btn btn-success">8</button>
                </div>
            </div>
            </div>
        </div>
        </div>
        <div class="masonry-item col-md-6">
        <div class="bgc-white p-20 bd">
            <h6 class="c-grey-900">Dropdowns</h6>
            <div class="mT-30">
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown button
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </div>

            <!-- Example split danger button -->
            <div class="btn-group mT-20">
                <button type="button" class="btn btn-danger">Action</button>
                <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
                </button>
                <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
                </div>
            </div>
            </div>
        </div>
        </div>
        <div class="masonry-item col-md-6">
        <div class="bgc-white p-20 bd">
            <h6 class="c-grey-900">List Group</h6>
            <div class="mT-30">
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action actived">
                Cras justo odio
                </a>
                <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
                <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
            </div>
            </div>
        </div>
        </div>
        <div class="masonry-item col-md-6">
        <div class="bgc-white p-20 bd">
            <h6 class="c-grey-900">Modal</h6>
            <div class="mT-30">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                Launch demo modal
            </button>

            <!-- Modal -->
            <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">
                    ...
                    </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>
        </div>
        </div>
        <div class="masonry-item col-md-6">
        <div class="bgc-white p-20 bd">
            <h6 class="c-grey-900">Popover</h6>
            <div class="mT-30">
            <button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
            </div>
        </div>
        </div>
        <div class="masonry-item col-md-6">
        <div class="bgc-white p-20 bd">
            <h6 class="c-grey-900">Progress</h6>
            <div class="mT-30">
            <!-- Progress Bars -->
            <div class="layers">
                <div class="layer w-100">
                <h5 class="mB-5">100k</h5>
                <small class="fw-600 c-grey-700">Visitors From USA</small>
                <span class="pull-right c-grey-600 fsz-sm">50%</span>
                <div class="progress mT-10">
                    <div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50% Complete</span></div>
                </div>
                </div>
                <div class="layer w-100 mT-15">
                <h5 class="mB-5">1M</h5>
                <small class="fw-600 c-grey-700">Visitors From Europe</small>
                <span class="pull-right c-grey-600 fsz-sm">80%</span>
                <div class="progress mT-10">
                    <div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80% Complete</span></div>
                </div>
                </div>
                <div class="layer w-100 mT-15">
                <h5 class="mB-5">450k</h5>
                <small class="fw-600 c-grey-700">Visitors From Australia</small>
                <span class="pull-right c-grey-600 fsz-sm">40%</span>
                <div class="progress mT-10">
                    <div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40% Complete</span></div>
                </div>
                </div>
                <div class="layer w-100 mT-15">
                <h5 class="mB-5">1B</h5>
                <small class="fw-600 c-grey-700">Visitors From India</small>
                <span class="pull-right c-grey-600 fsz-sm">90%</span>
                <div class="progress mT-10">
                    <div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90% Complete</span></div>
                </div>
                </div>
            </div>
            </div>
        </div>
        </div>
        <div class="masonry-item col-md-6">
        <div class="bgc-white p-20 bd">
            <h6 class="c-grey-900">Tootips</h6>
            <div class="mT-30">
            <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
                Tooltip on top
            </button>
            <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
                Tooltip on right
            </button>
            <button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
                Tooltip on bottom
            </button>
            <button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
                Tooltip on left
            </button>
            </div>
        </div>
        </div>
    </div>

{% endblock content %}