<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>@section('title')@show{{ config('project.title') }}</title>

    <meta content="" name="description">
    <meta content="" name="keywords">

    <!-- Favicons -->
    <link href="img/favicon.png" rel="icon">
    <link href="img/apple-touch-icon.png" rel="apple-touch-icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

    <!-- CSS Files -->
    @include('layouts.styles')
    
    <!-- Header Sitecodes -->
    @include('sitecodes.header')
    
</head>

<body>
    
    <!-- ======= Modal ======= -->
    @include('layouts.modal')

    <!-- ======= Header ======= -->
    <header id="header" class="fixed-top">
        <div class="container d-flex align-items-center justify-content-between">
            
            <h1 class="logo col-4"><a href="{{ route('home') }}">{{ config('project.name') }}</a></h1>
            
            <nav id="navbar" class="navbar">
                <ul>
                    @auth
                        @if(auth()->user()->hasVerifiedEmail())
                            <li class="dropdown"><a href="#"><span class="fw-bold">{{ auth()->user()->email }}</span> <i class="bi bi-chevron-down"></i></a>
                                <ul>
                                    <li><a href="{{ url('settings') }}">Налаштування</a></li>
                                    <li><a href="{{ route('logout') }}">Вийти</a></li>
                                </ul>
                            </li>
                        @else
                            <li>
                                <a class="getstarted" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">Увiйти</a>
                            </li>
                        @endif
                    @endauth
                    @guest
                        <li>
                            <a class="getstarted" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">Увiйти</a>
                        </li>
                    @endguest
                </ul>
            </nav><!-- .navbar -->
            
            @yield('head_content')

        </div>
    </header><!-- End Header -->
  
    <main id="main">

        <div class="container">
            @include('layouts.alerts')
        </div>
        
        @yield('content')

    </main><!-- End #main -->

    @include('layouts.footer')

    <!-- JS Files -->
    @include('layouts.scripts')
    @yield('page_scripts')

    <!-- Footer Sitecodes -->
    @include('sitecodes.footer')

</body>

</html>
