{{#extend "layout" title="Light Blue HTML5 Dashboard - Search"}}
    {{#content "sidebar"}}
        {{> sidebar active="search"}}
    {{/content}}
    {{#content "content" mode="replace"}}
        <ol class="breadcrumb">
            <li class="breadcrumb-item">YOU ARE HERE</li>
            <li class="breadcrumb-item active">Search Results</li>
        </ol>
        <h1 class="page-title">Matching - <span class="fw-semi-bold">Results</span></h1>
        <div class="clearfix">
            <div class="btn-toolbar">
                <div class="btn-group">
                    <a href="#" data-toggle="dropdown" class="btn dropdown-toggle btn-default">
                        Popular
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">All</a></li>
                        <li><a class="dropdown-item" href="#">Popular</a></li>
                        <li><a class="dropdown-item" href="#">Interesting</a></li>
                        <li><a class="dropdown-item" href="#">Latest</a></li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a href="#" data-toggle="dropdown" class="btn dropdown-toggle btn-default">
                        All Time
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Last 24h</a></li>
                        <li><a class="dropdown-item" href="#">Last Month</a></li>
                        <li><a class="dropdown-item" href="#">Last Year</a></li>
                    </ul>
                </div>
                <div class="btn-group ml-auto">
                    <button class="btn btn-default active" type="button"><i class="fa fa-th-list"></i></button>
                    <button class="btn btn-default" type="button"><i class="fa fa-th-large"></i></button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-3 order-xl-2">
                <h4>Results <span class="fw-semi-bold">Filtering</span></h4>
                <p class="text-muted">Listed content is categorized by the following groups:</p>
                <ul class="nav nav-pills nav-stacked flex-column search-result-categories mt">
                    <li class="nav-item">
                        <a  class="nav-link" href="#">
                            Hot Ideas
                            <span class="badge badge-pill badge-danger float-right">34</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            Latest Pictures
                            <span class="badge badge-pill badge-success float-right">9</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Labels of Day
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            Recent Movies
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            Globals <span class="badge badge-pill badge-info float-right">18</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-xl-9 order-xl-1">
                <p class="search-results-count">About 94 700 000 (0.39 sec.) results</p>
                <section class="search-result-item">
                    <a class="image-link" href="#">
                        <img class="image" src="../demo/img/pictures/1.jpg">
                    </a>
                    <div class="search-result-item-body">
                        <div class="row">
                            <div class="col-md-10">
                                <h4 class="search-result-item-heading">
                                <a href="#">Next generation admin template</a>
                            </h4>
                                <p class="info">
                                    New York, NY 20188
                                </p>
                                <p class="description">
                                    Not just usual Metro. But something bigger. Not just usual widgets, but real
                                    widgets. Not just yet another admin template, but next generation admin template.
                                </p>
                            </div>
                            <div class="col-md-2 text-center">
                                <p class="value4 mt-sm">
                                    $9, 700
                                </p>
                                <p class="text-muted">
                                    PER WEEK
                                </p>
                                <a class="btn btn-primary btn-info btn-sm" href="#">Learn More</a>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="search-result-item">
                    <a class="image-link" href="#">
                        <img class="image" src="../demo/img/pictures/5.jpg">
                    </a>
                    <div class="search-result-item-body">
                        <div class="row">
                            <div class="col-md-10">
                                <h4 class="search-result-item-heading">
                                    <a href="#">Try. Posted by Okendoken</a>
                                    <span class="badge badge-pill bg-danger fw-normal float-right">Best Deal!</span>
                                </h4>
                                <p class="info">
                                    Los Angeles, NY 20188
                                </p>
                                <p class="description">
                                    You will never know exactly how something will go until you try it. You can
                                    think three hundred times and still have no precise result.
                                </p>
                            </div>
                            <div class="col-md-2 text-center">
                                <p class="value4 mt-sm">
                                    $10, 300
                                </p>
                                <p class="text-muted">
                                    PER WEEK
                                </p>
                                <a class="btn btn-primary btn-info btn-sm" href="#">Learn More</a>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="search-result-item">
                    <a class="image-link" href="#">
                        <img class="image" src="../demo/img/pictures/13.jpg">
                    </a>
                    <div class="search-result-item-body">
                        <div class="row">
                            <div class="col-md-10">
                                <h4 class="search-result-item-heading">
                                    <a href="#">Vitaut the Great</a>
                                </h4>
                                <p class="info">
                                    New York, NY 20188
                                </p>
                                <p class="description">
                                    The Great Prince of the Grand Duchy of Lithuania he had stopped the invasion to
                                    Europe of Timur (Tamerlan) from Asia heading a big Army of Belarusians, Lithuanians.
                                </p>
                            </div>
                            <div class="col-md-2 text-center">
                                <p class="value4 mt-sm">
                                    $3, 200
                                </p>
                                <p class="text-muted">
                                    PER WEEK
                                </p>
                                <a class="btn btn-info btn-sm" href="#">Learn More</a>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="search-result-item">
                    <a class="image-link" href="#">
                        <img class="image" src="../demo/img/pictures/3.jpg">
                    </a>
                    <div class="search-result-item-body">
                        <div class="row">
                            <div class="col-md-10">
                                <h4 class="search-result-item-heading">
                                    <a href="#">Can I use CSS3 Radial-Gradient?</a>
                                </h4>
                                <p class="info">
                                    Minsk, NY 20188
                                </p>
                                <p class="description">
                                    Yes you can! Further more, you should! It let's you create really beautiful images
                                    either for elements or for the entire background.
                                </p>
                            </div>
                            <div class="col-md-2 text-center">
                                <p class="value4 mt-sm">
                                    $2, 400
                                </p>
                                <p class="text-muted">
                                    PER MONTH
                                </p>
                                <a class="btn btn-info btn-sm" href="#">Learn More</a>
                            </div>
                        </div>
                    </div>
                </section>
                <ul class="pagination pagination-sm justify-content-center">
                    <li class="page-item disabled"><a class="page-link" href="#">Prev</a></li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></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="#">Next</a></li>
                </ul>
            </div>
        </div>
    {{/content}}
{{/extend}}