<!DOCTYPE html>

<html lang="en">
    <!-- BEGIN: Head -->
    <head>
        <meta charset="utf-8">
        <link href="/static/dist/images/logo_main.png" rel="shortcut icon">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="author" content="">
        <title>Dashboard - TurboАpply</title>
        <!-- BEGIN: CSS Assets-->
        <link rel="stylesheet" href="/static/dist/css/app.css" />
        <!-- END: CSS Assets-->
    </head>
    <!-- END: Head -->
    <body class="app">
        <!-- BEGIN: Mobile Menu -->
        
        <!-- END: Mobile Menu -->
        <div class="flex">
            <!-- BEGIN: Side Menu -->
            <nav class="side-nav">
                <a href="/product" class="intro-x flex items-center pl-5 pt-4">
                    <img alt="Midone Tailwind HTML Admin Template" class="w-6" src="/static/dist/images/logo_main.png">
                    <span class="hidden xl:block text-white text-lg ml-3"> Turbo<span class="font-medium">Аpply</span> </span>
                </a>
                <div class="side-nav__devider my-6"></div>
                <ul>
                    
                    <li>
                        <a href="/product" class="side-menu {% if current_path.startswith('/product') %}side-menu--active{% endif %}">
                            <div class="side-menu__icon"> <i data-feather="credit-card"></i> </div>
                            <div class="side-menu__title"> Work </div>
                        </a>
                    </li>
                    {% if role == "admin" %}
                    <li>
                         <a href="/users"  class="side-menu {% if current_path.startswith('/users') %}side-menu--active{% endif %}">
                            <div class="side-menu__icon"> <i data-feather="users"></i> </div>
                            <div class="side-menu__title"> Users </div>
                        </a>
                        <ul class="">
                    </li>
                    {% endif %}
                          
                </ul>
            </nav>
            <!-- END: Side Menu -->
            <!-- BEGIN: Content -->
            
            <div class="content">
                <div class="top-bar">
                 <!-- BEGIN: Breadcrumb -->
                    <div class="-intro-x breadcrumb mr-auto hidden sm:flex"> </div>
                    <!-- END: Breadcrumb -->

                     <h2 class="text-lg font-medium mr-auto">
                        {{size}}
                    </h2>
                    
               {% set current_path = request.url.path %}

                {% if size == "Work" %}
                    <a href="/productuj">
                        <button class="button text-white shadow-md mr-2 {% if current_path == '/productuj' %}bg-red-700{% else %}bg-theme-1{% endif %}">
                            Unassigned Jobs
                        </button>
                    </a>

                    <a href="/productmj">
                        <button class="button text-white shadow-md mr-2 {% if current_path == '/productmj' %}bg-red-700{% else %}bg-theme-1{% endif %}">
                            My Jobs
                        </button>
                    </a>

                    <a href="/product">
                        <button class="button text-white shadow-md mr-2 {% if current_path == '/product' %}bg-red-700{% else %}bg-theme-1{% endif %}">
                            All Jobs
                        </button>
                    </a>

                    <a href="/productoj">
                        <button class="button text-white shadow-md mr-2 {% if current_path == '/productoj' %}bg-red-700{% else %}bg-theme-1{% endif %}">
                            Outstanding Jobs
                        </button>
                    </a>
                {% endif %}
                                    <!-- BEGIN: Account Menu -->
                    <div class="intro-x dropdown w-8 h-8 relative">
                        <div class="dropdown-toggle w-8 h-8 rounded-full overflow-hidden shadow-lg image-fit zoom-in">
                            <img alt="Midone Tailwind HTML Admin Template" src="/static/dist/images/333.png">
                        </div>
                        <div class="dropdown-box mt-10 absolute w-56 top-0 right-0 z-20">
                            <div class="dropdown-box__content box bg-theme-38 text-white">
                                <div class="p-4 border-b border-theme-40">
                                    <div class="font-medium">{{username}}</div>
                                    <div class="text-xs text-theme-41">{{role}}</div>
                                </div>
                                 <!--  -->
                                <!-- <div class="p-2">
                                    <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1 rounded-md"> <i data-feather="user" class="w-4 h-4 mr-2"></i> Profile </a>
                                    <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1 rounded-md"> <i data-feather="edit" class="w-4 h-4 mr-2"></i> Add Account </a>
                                    <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1 rounded-md"> <i data-feather="lock" class="w-4 h-4 mr-2"></i> Reset Password </a>
                                    <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1 rounded-md"> <i data-feather="help-circle" class="w-4 h-4 mr-2"></i> Help </a>
                                </div>-->
                                <div class="p-2 border-t border-theme-40">
                                    <a href="/logout" class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1 rounded-md"> <i data-feather="toggle-right" class="w-4 h-4 mr-2"></i> Logout </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END: Account Menu -->
                </div>
                
                   
                    {% block content %}{% endblock %}
                    
                    
            </div>
            <!-- END: Content -->
        </div>
        <!-- BEGIN: JS Assets-->
        <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=["your-google-map-api"]&libraries=places"></script>
        <script src="/static/dist/js/app.js"></script>
        <!-- END: JS Assets-->
    </body>
</html>