@if (Route::is('user.ai-tools.copywriter.project.edit'))
    <nav class="navbar">
        <div class="navbar-content d-flex align-items-center justify-content-between w-100">
            <div class="d-flex align-items-center" style="width: 50%;">
                <div class="input-group">
                    <input type="text" id="title" class="form-control form-control-lg border-0 fs-3 fw-bold"
                           value="{{ trim($project->title) == '' ? now()->format('Y-m-d') . ' Untitled' : $project->title }}"
                           placeholder="Untitled Project">
                </div>
            </div>
            <div class="d-flex align-items-center" style="width: 25%;">
                <div class="w-100">
                    <div class="progress h-5px">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <small class="text-secondary fs-12px">
                        0/2,000 Words Used (0%)
                    </small>
                </div>
            </div>
            <div class="d-flex align-items-center justify-content-end" style="width: 25%;">
                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="publishDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        Publish
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="publishDropdown">
                        <li><h6 class="dropdown-header">Create Post On:</h6></li>
                        <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#socialMediaPostModal">Social Media</a></li>
                        <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#wordpressPostModal">Wordpress</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
@else
    <nav class="navbar">
        <div class="navbar-content">
            <div class="logo-mini-wrapper">
                <img src="{{ asset('assets/images/logo-mini-light.png') }}" class="logo-mini logo-mini-light" alt="logo">
                <img src="{{ asset('assets/images/logo-mini-dark.png') }}" class="logo-mini logo-mini-dark" alt="logo">
            </div>

            <form class="search-form">
                <div class="input-group">
                    <div class="input-group-text">
                        <i data-feather="search"></i>
                    </div>
                    <input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
                </div>
            </form>

            <ul class="navbar-nav">
                <li class="theme-switcher-wrapper nav-item">
                    <input type="checkbox" value="" id="theme-switcher">
                    <label for="theme-switcher">
                        <div class="box">
                            <div class="ball"></div>
                            <div class="icons">
                                <i class="feather icon-sun"></i>
                                <i class="feather icon-moon"></i>
                            </div>
                        </div>
                    </label>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle d-flex" href="#" id="languageDropdown" role="button"
                       data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img src="{{ asset('assets/images/flags/us.svg') }}" class="w-20px" title="us" alt="flag">
                        <span class="ms-2 d-none d-md-inline-block">English</span>
                    </a>
                    <div class="dropdown-menu" aria-labelledby="languageDropdown">
                        <a href="javascript:;" class="dropdown-item py-2 d-flex">
                            <img src="{{ asset('assets/images/flags/us.svg') }}" class="w-20px" title="us" alt="us">
                            <span class="ms-2">English</span>
                        </a>
                        <a href="javascript:;" class="dropdown-item py-2 d-flex">
                            <img src="{{ asset('assets/images/flags/fr.svg') }}" class="w-20px" title="fr" alt="fr">
                            <span class="ms-2">French</span>
                        </a>
                        <a href="javascript:;" class="dropdown-item py-2 d-flex">
                            <img src="{{ asset('assets/images/flags/de.svg') }}" class="w-20px" title="de" alt="de">
                            <span class="ms-2">German</span>
                        </a>
                        <a href="javascript:;" class="dropdown-item py-2 d-flex">
                            <img src="{{ asset('assets/images/flags/pt.svg') }}" class="w-20px" title="pt" alt="pt">
                            <span class="ms-2">Portuguese</span>
                        </a>
                        <a href="javascript:;" class="dropdown-item py-2 d-flex">
                            <img src="{{ asset('assets/images/flags/es.svg') }}" class="w-20px" title="es" alt="es">
                            <span class="ms-2">Spanish</span>
                        </a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button"
                       data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i data-feather="grid"></i>
                    </a>
                    <div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
                        <div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
                            <p class="mb-0 fw-bold">Web Apps</p>
                            <a href="javascript:;" class="text-secondary">Edit</a>
                        </div>
                        <div class="row g-0 p-1">
                            <div class="col-3 text-center">
                                <a href="{{ url('pages/apps/chat.html') }}"
                                   class="dropdown-item d-flex flex-column align-items-center justify-content-center w-70px h-70px">
                                    <i data-feather="message-square" class="icon-lg mb-1"></i>
                                    <p class="fs-12px">Chat</p>
                                </a>
                            </div>
                            <div class="col-3 text-center">
                                <a href="{{ url('pages/apps/calendar.html') }}"
                                   class="dropdown-item d-flex flex-column align-items-center justify-content-center w-70px h-70px">
                                    <i data-feather="calendar" class="icon-lg mb-1"></i>
                                    <p class="fs-12px">Calendar</p>
                                </a>
                            </div>
                            <div class="col-3 text-center">
                                <a href="{{ url('pages/email/inbox.html') }}"
                                   class="dropdown-item d-flex flex-column align-items-center justify-content-center w-70px h-70px">
                                    <i data-feather="mail" class="icon-lg mb-1"></i>
                                    <p class="fs-12px">Email</p>
                                </a>
                            </div>
                            <div class="col-3 text-center">
                                <a href="{{ url('pages/general/profile.html') }}"
                                   class="dropdown-item d-flex flex-column align-items-center justify-content-center w-70px h-70px">
                                    <i data-feather="instagram" class="icon-lg mb-1"></i>
                                    <p class="fs-12px">Profile</p>
                                </a>
                            </div>
                        </div>
                        <div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
                            <a href="javascript:;">View all</a>
                        </div>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button"
                       data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i data-feather="mail"></i>
                    </a>
                    <div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
                        <div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
                            <p>9 New Messages</p>
                            <a href="javascript:;" class="text-secondary">Clear all</a>
                        </div>
                        <div class="p-1">
                            <a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
                                <div class="me-3">
                                    <img class="w-30px h-30px rounded-circle" src="{{ asset('assets/images/faces/face2.jpg') }}"
                                         alt="userr">
                                </div>
                                <div class="d-flex justify-content-between flex-grow-1">
                                    <div class="me-4">
                                        <p>Leonardo Payne</p>
                                        <p class="fs-12px text-secondary">Project status</p>
                                    </div>
                                    <p class="fs-12px text-secondary">2 min ago</p>
                                </div>
                            </a>
                            <a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
                                <div class="me-3">
                                    <img class="w-30px h-30px rounded-circle" src="{{ asset('assets/images/faces/face3.jpg') }}"
                                         alt="userr">
                                </div>
                                <div class="d-flex justify-content-between flex-grow-1">
                                    <div class="me-4">
                                        <p>Carl Henson</p>
                                        <p class="fs-12px text-secondary">Client meeting</p>
                                    </div>
                                    <p class="fs-12px text-secondary">30 min ago</p>
                                </div>
                            </a>
                            <a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
                                <div class="me-3">
                                    <img class="w-30px h-30px rounded-circle" src="{{ asset('assets/images/faces/face4.jpg') }}"
                                         alt="userr">
                                </div>
                                <div class="d-flex justify-content-between flex-grow-1">
                                    <div class="me-4">
                                        <p>Jensen Combs</p>
                                        <p class="fs-12px text-secondary">Project updates</p>
                                    </div>
                                    <p class="fs-12px text-secondary">1 hrs ago</p>
                                </div>
                            </a>
                            <a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
                                <div class="me-3">
                                    <img class="w-30px h-30px rounded-circle" src="{{ asset('assets/images/faces/face5.jpg') }}"
                                         alt="userr">
                                </div>
                                <div class="d-flex justify-content-between flex-grow-1">
                                    <div class="me-4">
                                        <p>Amiah Burton</p>
                                        <p class="fs-12px text-secondary">Project deadline</p>
                                    </div>
                                    <p class="fs-12px text-secondary">2 hrs ago</p>
                                </div>
                            </a>
                            <a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
                                <div class="me-3">
                                    <img class="w-30px h-30px rounded-circle" src="{{ asset('assets/images/faces/face6.jpg') }}"
                                         alt="userr">
                                </div>
                                <div class="d-flex justify-content-between flex-grow-1">
                                    <div class="me-4">
                                        <p>Yaretzi Mayo</p>
                                        <p class="fs-12px text-secondary">New record</p>
                                    </div>
                                    <p class="fs-12px text-secondary">5 hrs ago</p>
                                </div>
                            </a>
                        </div>
                        <div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
                            <a href="javascript:;">View all</a>
                        </div>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button"
                       data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i data-feather="bell"></i>
                        <div class="indicator">
                            <div class="circle"></div>
                        </div>
                    </a>
                    <div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
                        <div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
                            <p>6 New Notifications</p>
                            <a href="javascript:;" class="text-secondary">Clear all</a>
                        </div>
                        <div class="p-1">
                            <a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
                                <div
                                    class="w-30px h-30px d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
                                    <i class="icon-sm text-white" data-feather="user-plus"></i>
                                </div>
                                <div class="flex-grow-1 me-2">
                                    <p>New customer registered</p>
                                    <p class="fs-12px text-secondary">2 sec ago</p>
                                </div>
                            </a>
                            <a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
                                <div
                                    class="w-30px h-30px d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
                                    <i class="icon-sm text-white" data-feather="gift"></i>
                                </div>
                                <div class="flex-grow-1 me-2">
                                    <p>New Order Received</p>
                                    <p class="fs-12px text-secondary">30 min ago</p>
                                </div>
                            </a>
                            <a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
                                <div
                                    class="w-30px h-30px d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
                                    <i class="icon-sm text-white" data-feather="alert-circle"></i>
                                </div>
                                <div class="flex-grow-1 me-2">
                                    <p>Server Limit Reached!</p>
                                    <p class="fs-12px text-secondary">1 hrs ago</p>
                                </div>
                            </a>
                            <a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
                                <div
                                    class="w-30px h-30px d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
                                    <i class="icon-sm text-white" data-feather="layers"></i>
                                </div>
                                <div class="flex-grow-1 me-2">
                                    <p>Apps are ready for update</p>
                                    <p class="fs-12px text-secondary">5 hrs ago</p>
                                </div>
                            </a>
                            <a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
                                <div
                                    class="w-30px h-30px d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
                                    <i class="icon-sm text-white" data-feather="download"></i>
                                </div>
                                <div class="flex-grow-1 me-2">
                                    <p>Download completed</p>
                                    <p class="fs-12px text-secondary">6 hrs ago</p>
                                </div>
                            </a>
                        </div>
                        <div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
                            <a href="javascript:;">View all</a>
                        </div>
                    </div>
                </li>
                @php
                    $rand = rand(1, 10);
                @endphp
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="profileDropdown" role="button"
                       data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img class="w-30px h-30px ms-1 rounded-circle" src="{{ asset('assets/images/avatars/' . $rand . '.png') }}"
                             alt="profile">
                        <span class="ms-2 d-none d-md-inline-block fw-bold" id="workspace_name_navbar">
                            {{ Auth::user()->active_workspace->name }}
                        </span>
                    </a>
                    <div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
                        <div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
                            <div class="mb-3">
                                <img class="w-80px h-80px rounded-circle" src="{{ asset('assets/images/avatars/' . $rand . '.png') }}"
                                     alt="profile">
                            </div>
                            <div class="text-center">
                                <p class="fs-16px fw-bolder">
                                    {{ Auth::user()->name }}
                                    <span class="badge bg-primary">{{ ucfirst(Auth::user()->roles[0]->name) }}</span>
                                </p>
                                <p class="fs-12px text-secondary">{{ Auth::user()->email }}</p>
                            </div>
                        </div>
                        <ul class="list-unstyled p-1">
                            <li class="dropdown-item py-2">
                                <a href="{{ route('user.setting.profile') }}" class="text-body ms-0 d-flex align-items-center">
                                    <i class="me-2 icon-md" data-feather="user"></i>
                                    <span>Edit Profile</span>
                                </a>
                            </li>
                            <li class="dropdown-item py-2">
                                <a href="{{ route('user.setting.workspace') }}" class="text-body ms-0 d-flex align-items-center">
                                    <i class="me-2 icon-md" data-feather="settings"></i>
                                    <span>Workspace Settings</span>
                                </a>
                            </li>
                            <li class="dropdown-item py-2">
                                <a href="{{ route('user.setting.billing.plan') }}" class="text-body ms-0 d-flex align-items-center">
                                    <i class="me-2 icon-md" data-feather="credit-card"></i>
                                    <span>Subscription</span>
                                </a>
                            </li>
                            <li class="dropdown-item py-2">
                                <a href="{{ route('user.setting.workspace') }}" class="text-body ms-0 d-flex align-items-center">
                                    <i class="me-2 icon-md" data-feather="repeat"></i>
                                    <span>Switch Workspace</span>
                                </a>
                            </li>
                            <li class="dropdown-item py-2">
                                <a href="javascript:;" class="text-body ms-0 d-flex align-items-center">
                                    <i class="me-2 icon-md" data-feather="plus-square"></i>
                                    <span>Add New Workspace</span>
                                </a>
                            </li>
                            <li class="dropdown-item py-2">
                                <a href="{{ url('logout') }}" class="text-body ms-0 d-flex align-items-center">
                                    <i class="me-2 icon-md" data-feather="log-out"></i>
                                    <span>Log Out</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>

            <a href="#" class="sidebar-toggler">
                <i data-feather="menu"></i>
            </a>
        </div>
    </nav>
@endif