<template>
    <nav class="navbar navbar-light navbar-expand shadow mb-4 topbar static-top navigation" >
        <div class="container-fluid">
            <h1 style="color: #ffffff;"><img :src="urlImage"><strong>&nbsp;{{title}}</strong></h1>
            <ul class="navbar-nav flex-nowrap ml-auto">
                <li class="nav-item dropdown d-sm-none no-arrow"><a class="dropdown-toggle nav-link" aria-expanded="false" data-toggle="dropdown" href="#"><i class="fas fa-search"></i></a>
                    <div class="dropdown-menu dropdown-menu-right p-3 animated--grow-in" aria-labelledby="searchDropdown">
                        <form class="form-inline mr-auto navbar-search w-100">
                            <div class="input-group"><input class="bg-light form-control border-0 small" type="text" placeholder="Search for ...">
                                <div class="input-group-append"><button class="btn btn-primary py-0" type="button"><i class="fas fa-search"></i></button></div>
                            </div>
                        </form>
                    </div>
                </li>
                <li class="nav-item dropdown no-arrow mx-1">
                    <Notifications></Notifications>
                </li>
                <li class="nav-item dropdown no-arrow mx-1">
                    <div class="shadow dropdown-list dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown"></div>
                </li>
                <div class="d-none d-sm-block topbar-divider"></div>
                <li class="nav-item dropdown no-arrow">
                    <div class="nav-item dropdown no-arrow"><a class="dropdown-toggle nav-link" aria-expanded="false" data-toggle="dropdown" href="#"><span class="d-none d-lg-inline mr-2 small" style="color: #ffffff;">User</span><i class="fa fa-user-circle-o" style="font-size: 24px;color: #ffffff;"></i></a>
                        <div class="dropdown-menu shadow dropdown-menu-right animated--grow-in"><a class="dropdown-item" href="#"><i class="fas fa-stopwatch fa-sm fa-fw mr-2 text-gray-400"></i>&nbsp;Feature not yet available</a></div>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
</template>
<script lang="ts">
import '@/assets/bootstrap/css/bootstrap.min.css';
import Notifications from '@/lib-components/component/Notifications/Notifications.vue'
export default {
    name: 'Header',
    components:{
        Notifications
    },
    props: {
    title: String,
    urlImage: String,
    }
}
</script>