<header>
    <div class="row">
        <div class="col-sm-4 user-name-nav-area d-flex align-content-center">
            <div class="dev-toggle-sidebar">
                <img src="{{ asset('images/icons/blocks-icon.svg') }}">
            </div>
            <h2 class="d-flex align-items-center">Hello {{auth()->user()->name}} <span>👋🏼</span>,</h2>
        </div>
        <div class="col-sm-8 d-flex justify-content-end align-items-center">
            <div class="search-box d-flex align-items-center">
                <img src="{{ asset('images/icons/search 1.png') }}" alt="">
                <input type="text" class="color-dark-green" placeholder="Search...">
            </div>
            <div class="nav-links d-flex align-items-center">
                <form method="POST" action="{{route('logout')}}">
                @csrf
                    <button class="nav-btn bg-dark-green-color">
                        <img height="25" width="50" src="{{ asset('images/logout.png') }}" alt="">
                    </button>
                </form>
                <a href="{{ route('chat.setting') }}" class="nav-btn bg-dark-green-color">
                    <img src="{{ asset('images/icons/Message_alt_fill.png') }}" alt="">
                </a>
                <a href="{{ route('inbox.setting') }}" class="nav-btn bell-btn bg-dark-green-color">
                    <img src="{{ asset('images/icons/notification.svg') }}" alt="">
                </a>
                <div class="ui dropdown options-widget-wrapper">
                    <div class="text">
                        <button class="nav-btn bg-dark-green-color chat-setting-btn">
                            <img src="{{ asset('images/icons/Group 32.png') }}" alt="">
                        </button>
                    </div>
                    <div class="menu chat-setting nav-bar-menu mt-2">
                        <div class="item">
                            <p class="action-heading-paragraph text-center align-content-center">
                                <img src="{{ asset('images/icons/Vector (3).png') }}" alt="">
                                <span class="action-label text-white">Inbox</span>
                            </p>
                            <div class="chat-settings-btn-row text-center">
                                <a class="ui secondary basic button tag-btn shadow-none">Tags</a>
                                <a
                                    href="{{ route('inbox.setting') }}" class="ui secondary basic button shadow-none setting-btn text-white align-content-center">Settings</a>
                            </div>
                        </div>
                        <div class="item">
                            <p class="action-heading-paragraph text-center align-content-center">
                                <img src="{{ asset('images/icons/chat-round-white.svg') }}" alt="">
                                <span class="action-label text-white">Chats</span>
                            </p>
                            <div class="chat-settings-btn-row text-center">
                                <a class="ui secondary basic button tag-btn shadow-none">Tags</a>
                                <a
                                href="{{ route('chat.setting') }}" class="ui secondary basic button shadow-none setting-btn text-white align-content-center">Settings</a>
                            </div>
                        </div>
                        <div class="item">
                            <p class="action-heading-paragraph text-center align-content-center">
                                <img src="{{ asset('images/icons/Group 133630.svg') }}" alt="">
                                <span class="action-label text-white">Help Center</span>
                            </p>
                            <div class="chat-settings-btn-row text-center">
                                <i class="external link square alternate icon  color-dark-green"></i>
                                <a class="ui secondary basic button tag-btn shadow-none">Tags</a>
                                <a
                                    class="ui secondary basic button shadow-none setting-btn text-white align-content-center">Settings</a>
                            </div>
                        </div>
                        <div class="item">
                            <p class="action-heading-paragraph text-center align-content-center">
                                <img src="{{ asset('images/icons/question-square-svgrepo-com 2.svg') }}" alt="">
                                <span class="action-label text-white">Forum</span>
                            </p>
                            <div
                                class="chat-settings-btn-row text-center d-flex justify-content-center align-items-center">
                                <i class="external link square alternate icon color-dark-green"></i>
                                <a class="ui secondary basic button tag-btn shadow-none">Tags</a>
                                <a
                                    class="ui secondary basic button shadow-none setting-btn text-white align-content-center">Settings</a>
                            </div>
                        </div>
                        <div class="item">
                            <p class="action-heading-paragraph text-center align-content-center">
                                <img src="{{ asset('images/icons/question-square-svgrepo-com 2.svg') }}" alt="">
                                <span class="action-label text-white">Profile</span>
                            </p>
                            <div
                                class="chat-settings-btn-row text-center d-flex justify-content-center align-items-center">
                                <i class="external link square alternate icon color-dark-green"></i>
                                <!--<a class="ui secondary basic button tag-btn shadow-none">Tags</a>-->
                                <a href="{{ route('profile') }}"
                                    class="ui secondary basic button shadow-none setting-btn text-white align-content-center">Settings</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</header>
<script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>

<style>
    
    .cke_notification.cke_notification_warning{
        display:none!important;
    }
    
</style>
