<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-90680653-2"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            
            gtag('config', 'UA-90680653-2');
        </script>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Twitter -->
        <!-- <meta name="twitter:site" content="@bootstrapdash">
            <meta name="twitter:creator" content="@bootstrapdash">
            <meta name="twitter:card" content="summary_large_image">
            <meta name="twitter:title" content="Azia">
            <meta name="twitter:description" content="Responsive Bootstrap 4 Dashboard Template">
            <meta name="twitter:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png"> -->
        <!-- Facebook -->
        <!-- <meta property="og:url" content="https://www.bootstrapdash.com/azia">
            <meta property="og:title" content="Azia">
            <meta property="og:description" content="Responsive Bootstrap 4 Dashboard Template">
            
            <meta property="og:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
            <meta property="og:image:secure_url" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
            <meta property="og:image:type" content="image/png">
            <meta property="og:image:width" content="1200">
            <meta property="og:image:height" content="600"> -->
        <!-- Meta -->
        <meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
        <meta name="author" content="BootstrapDash">
        <title>Azia Responsive Bootstrap 4 Dashboard Template</title>
        <!-- vendor css -->
        <link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
        <!-- azia CSS -->
        <link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
    </head>
    <body>
        <div class="az-header">
            <div class="container">
                <div class="az-header-left">
                    <a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
                    <a href="" id="azMenuShow" class="az-header-menu-icon d-lg-none"><span></span></a>
                </div>
                <!-- az-header-left -->
                <div class="az-header-menu">
                    <div class="az-header-menu-header">
                        <a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
                        <a href="" class="close">&times;</a>
                    </div>
                    <!-- az-header-menu-header -->
                    <ul class="nav">
                        <li class="nav-item">
                            <a href="{{ path('app_demo_index') }}" class="nav-link"><i class="typcn typcn-chart-area-outline"></i> Dashboard</a>
                        </li>
                        <li class="nav-item">
                            <a href="" class="nav-link with-sub"><i class="typcn typcn-document"></i> Pages</a>
                            <nav class="az-menu-sub">
                                <a href="{{ path('app_demo_signin') }}" class="nav-link">Sign In</a>
                                <a href="{{ path('app_demo_signup') }}" class="nav-link">Sign Up</a>
                            </nav>
                        </li>
                        <li class="nav-item">
                            <a href="{{ path('app_demo_chart') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Charts</a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ path('app_demo_elements') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Forms</a>
                        </li>
                        <li class="nav-item active">
                            <a href="" class="nav-link with-sub"><i class="typcn typcn-book"></i> Components</a>
                            <div class="az-menu-sub">
                                <div class="container">
                                    <div>
                                        <nav class="nav">
                                            <a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
                                            <a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
                                            <a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
                                            <a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
                                        </nav>
                                    </div>
                                </div>
                                <!-- container -->
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- az-header-menu -->
                <div class="az-header-right">
                    <a href="https://www.bootstrapdash.com/demo/azia-free/docs/documentation.html" target="_blank" class="az-header-search-link"><i class="far fa-file-alt"></i></a>
                    <a href="" class="az-header-search-link"><i class="fas fa-search"></i></a>
                    <div class="az-header-message">
                        <a href="#"><i class="typcn typcn-messages"></i></a>
                    </div>
                    <!-- az-header-message -->
                    <div class="dropdown az-header-notification">
                        <a href="" class="new"><i class="typcn typcn-bell"></i></a>
                        <div class="dropdown-menu">
                            <div class="az-dropdown-header mg-b-20 d-sm-none">
                                <a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
                            </div>
                            <h6 class="az-notification-title">Notifications</h6>
                            <p class="az-notification-text">You have 2 unread notification</p>
                            <div class="az-notification-list">
                                <div class="media new">
                                    <div class="az-img-user"><img src="{{ asset('assets/img/faces/face2.jpg') }}" alt=""></div>
                                    <div class="media-body">
                                        <p>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</p>
                                        <span>Mar 15 12:32pm</span>
                                    </div>
                                    <!-- media-body -->
                                </div>
                                <!-- media -->
                                <div class="media new">
                                    <div class="az-img-user online"><img src="{{ asset('assets/img/faces/face3.jpg') }}" alt=""></div>
                                    <div class="media-body">
                                        <p><strong>Joyce Chua</strong> just created a new blog post</p>
                                        <span>Mar 13 04:16am</span>
                                    </div>
                                    <!-- media-body -->
                                </div>
                                <!-- media -->
                                <div class="media">
                                    <div class="az-img-user"><img src="{{ asset('assets/img/faces/face4.jpg') }}" alt=""></div>
                                    <div class="media-body">
                                        <p><strong>Althea Cabardo</strong> just created a new blog post</p>
                                        <span>Mar 13 02:56am</span>
                                    </div>
                                    <!-- media-body -->
                                </div>
                                <!-- media -->
                                <div class="media">
                                    <div class="az-img-user"><img src="{{ asset('assets/img/faces/face5.jpg') }}" alt=""></div>
                                    <div class="media-body">
                                        <p><strong>Adrian Monino</strong> added new comment on your photo</p>
                                        <span>Mar 12 10:40pm</span>
                                    </div>
                                    <!-- media-body -->
                                </div>
                                <!-- media -->
                            </div>
                            <!-- az-notification-list -->
                            <div class="dropdown-footer"><a href="">View All Notifications</a></div>
                        </div>
                        <!-- dropdown-menu -->
                    </div>
                    <!-- az-header-notification -->
                    <div class="dropdown az-profile-menu">
                        <a href="" class="az-img-user"><img src="{{ asset('assets/img/faces/face1.jpg') }}" alt=""></a>
                        <div class="dropdown-menu">
                            <div class="az-dropdown-header d-sm-none">
                                <a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
                            </div>
                            <div class="az-header-profile">
                                <div class="az-img-user">
                                    <img src="{{ asset('assets/img/faces/face1.jpg') }}" alt="">
                                </div>
                                <!-- az-img-user -->
                                <h6>Aziana Pechon</h6>
                                <span>Premium Member</span>
                            </div>
                            <!-- az-header-profile -->
                            <a href="" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
                            <a href="" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
                            <a href="" class="dropdown-item"><i class="typcn typcn-time"></i> Activity Logs</a>
                            <a href="" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
                            <a href="{{ path('app_demo_signin') }}" class="dropdown-item"><i class="typcn typcn-power-outline"></i> Sign Out</a>
                        </div>
                        <!-- dropdown-menu -->
                    </div>
                </div>
                <!-- az-header-right -->
            </div>
            <!-- container -->
        </div>
        <!-- az-header -->
        <div class="az-content pd-y-20 pd-lg-y-30 pd-xl-y-40">
            <div class="container">
                <div class="az-content-left az-content-left-components">
                    <div class="component-item">
                        <label>UI Elements</label>
                        <nav class="nav flex-column">
                            <a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
                            <a href="{{ path('app_demo_dropdown') }}" class="nav-link active">Dropdown</a>
                            <a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
                        </nav>
                        <label>Forms</label>
                        <nav class="nav flex-column">
                            <a href="{{ path('app_demo_elements') }}" class="nav-link">Form Elements</a>
                        </nav>
                        <label>Charts</label>
                        <nav class="nav flex-column">
                            <a href="{{ path('app_demo_chart') }}" class="nav-link">ChartJS</a>
                        </nav>
                        <label>Tables</label>
                        <nav class="nav flex-column">
                            <a href="{{ path('app_demo_table') }}" class="nav-link">Basic Tables</a>
                        </nav>
                    </div>
                    <!-- component-item -->
                </div>
                <!-- az-content-left -->
                <div class="az-content-body pd-lg-l-40 d-flex flex-column">
                    <div class="az-content-breadcrumb">
                        <span>Components</span>
                        <span>UI Elements</span>
                        <span>Dropdown</span>
                    </div>
                    <h2 class="az-content-title">Dropdown</h2>
                    <div class="az-content-label mg-b-5">Basic Example</div>
                    <p class="mg-b-20">Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position relative. Dropdowns can be triggered from link or button elements to better fit your potential needs.</p>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown Menu
                        </button>
                        <div class="dropdown-menu tx-13" 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>
                    <hr class="mg-y-40">
                    <div class="az-content-label mg-b-5">Dropup</div>
                    <p class="mg-b-20">Trigger dropdown menus above elements by adding dropup class to the parent element.</p>
                    <div class="dropdown dropup">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropup Menu
                        </button>
                        <div class="dropdown-menu tx-13">
                            <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>
                    <hr class="mg-y-40">
                    <div class="az-content-label mg-b-5">Dropright</div>
                    <p class="mg-b-20">Trigger dropdown menus above elements by adding dropright class to the parent element.</p>
                    <div class="dropdown dropright">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="droprightMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropright Menu
                        </button>
                        <div class="dropdown-menu tx-13" aria-labelledby="droprightMenuButton">
                            <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>
                    <hr class="mg-y-40">
                    <div class="az-content-label mg-b-5">Dropleft</div>
                    <p class="mg-b-20">Trigger dropdown menus above elements by adding dropleft class to the parent element.</p>
                    <div class="dropdown dropleft">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropright Menu
                        </button>
                        <div class="dropdown-menu tx-13" aria-labelledby="dropleftMenuButton">
                            <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>
                    <hr class="mg-y-40">
                    <div class="az-content-label mg-b-5">Active Menu Item</div>
                    <p class="mg-b-20">Add active class to items in the dropdown to style them as active.</p>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown Menu
                        </button>
                        <div class="dropdown-menu tx-13">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item active" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </div>
                    <hr class="mg-y-40">
                    <div class="az-content-label mg-b-5">Disabled Menu Item</div>
                    <p class="mg-b-20">Add disabled class to items in the dropdown to style them as disabled.</p>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown Menu
                        </button>
                        <div class="dropdown-menu tx-13">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item disabled" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </div>
                    <hr class="mg-y-40">
                    <div class="az-content-label mg-b-5">Dropdown Header</div>
                    <p class="mg-b-20">Add a header to label sections of actions in any dropdown menu.</p>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown Menu
                        </button>
                        <div class="dropdown-menu tx-13">
                            <h6 class="dropdown-header tx-uppercase tx-11 tx-bold tx-inverse tx-spacing-1">Dropdown header</h6>
                            <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>
                    <hr class="mg-y-40">
                    <div class="az-content-label mg-b-5">Dropdown Divider</div>
                    <p class="mg-b-20">Separate groups of related menu items with a divider.</p>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown Menu
                        </button>
                        <div class="dropdown-menu tx-13">
                            <h6 class="dropdown-header tx-uppercase tx-11 tx-bold tx-inverse tx-spacing-1">Dropdown header</h6>
                            <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 class="ht-40"></div>
                    <div class="az-footer mg-t-auto">
                        <div class="container">
                            <span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
                            <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/bootstrap-admin-template/" target="_blank">Bootstrap admin templates</a> from Bootstrapdash.com</span>
                        </div>
                        <!-- container -->
                    </div>
                    <!-- az-footer -->
                </div>
                <!-- az-content-body -->
            </div>
            <!-- container -->
        </div>
        <!-- az-content -->
        <script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
        <script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
        <script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
        <script src="{{ asset('assets/js/azia.js') }}"></script>
        <script>
            $(function(){
              'use strict'
            
            });
        </script>
    </body>
</html>

