<!-- Navbar -->
<style>
    .uv-navbar .uv-notification-list li {
        cursor: default;
        font-size: 15px !important;
    }
    .uv-navbar .uv-notification-list li * {
        display: inline-block !important;
    }
    .uv-navbar .uv-notification-list li a {
         color: #2750C4 !important;
    }
    .uv-navbar .uv-notification-list ul {
        max-height: 320px !important;
    }
    .uv-navbar .uv-notification-list .timeago {
        color: #9E9E9E;
        margin-top: 5px;
        font-size: 13px;
    }
    .uv-navbar .uv-dropdown-container.load-more {
        border-top: solid 1px #D3D3D3;
        text-align: center;
    }
    .uv-navbar .uv-dropdown-container.load-more a {
        color: #333;
        text-transform: capitalize;
        font-size: 15px;
        font-weight: 500;
    }
    .uv-navbar .uv-icon-load-more {
        margin-right: 5px;
    }
    .uv-plan-list-item .uv-text-light-color {
        color: #9E9E9E;
    }
    .uv-plan-list-item .uv-plan-badge {
        color: #FFFFFF;
        font-size: 12px;
        padding: 1px 5px;
        border-radius: 3px;
        margin-left: 5px;
        display: inline-block;
        text-transform: uppercase;
    }
    .uv-plan-list-item .uv-plan-badge-color-free {
        background: #4486ee;
    }
    .uv-plan-list-item .uv-plan-badge-color-pro {
        background: #f5d02a;
    }
    .uv-plan-list-item .uv-plan-badge-color-enterprise {
        background: #fd9a9a;
    }
    .uv-plan-list-item .uv-plan-badge-color-customized {
        background: #b77af5;
    }
    .uv-onboard-navigator {
        cursor: pointer;
    }
    .uv-margin-icon-srch {
        margin: 5px 0px 0px 5px;
    }
    .uv-mob-aside{
        position: fixed;
        z-index: 999;
        top: 105px;
        left: 560px;
        transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside{
        left: 320px;
    }
    .uv-mob-aside.uv-mob-aside-collapsed{
        left: 286px;
    }
    .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside.uv-mob-aside-collapsed{
        left: 45px;
    }
    .uv-view.uv-aside-view{
        padding: 25px 0px 25px 25px;
    }
    .uv-inner-section .uv-view.uv-aside-view .uv-ticket-scroll-region.uv-aside-view-tv{
        left: 20px;
    }
    .uv-mob-aside .uv-icon-aside-menu,.uv-mob-aside .uv-icon-aside-menu:hover {
        background-position: 1px -497px;
    }
    .uv-mob-aside-collapsed .uv-icon-aside-menu, .uv-mob-aside-collapsed .uv-icon-aside-menu:hover {
        background-position: 5px -497px;
    }
    .uv-mob-aside:not(.uv-mob-aside-collapsed) .uv-icon-aside-menu,.uv-mob-aside:not(.uv-mob-aside-collapsed) .uv-icon-aside-menu:hover {
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .uv-mob-aside:not(.uv-mob-aside-collapsed) .uv-icon-aside-menu:hover,.uv-rtl .uv-mob-aside.uv-mob-aside-collapsed .uv-icon-aside-menu:hover {
        box-shadow: 0px -8px 15px 3px rgba(0, 0, 0, 0.15), 0px -2px 3px 0px rgba(0, 0, 0, 0.2);
    }
    .uv-rtl .uv-mob-aside:not(.uv-mob-aside-collapsed) .uv-icon-aside-menu,.uv-rtl .uv-mob-aside:not(.uv-mob-aside-collapsed) .uv-icon-aside-menu:hover {
        -ms-transform: unset;
        -webkit-transform: unset;
        transform: unset;
    }
    .uv-rtl .uv-mob-aside.uv-mob-aside-collapsed .uv-icon-aside-menu,.uv-rtl .uv-mob-aside.uv-mob-aside-collapsed .uv-icon-aside-menu:hover {
        -ms-transform: rotate(180deg)!important;
        -webkit-transform: rotate(180deg)!important;
        transform: rotate(180deg)!important;
    }
    .uv-rtl .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside{
        right: 320px;
        left: unset;
    }
    .uv-rtl .uv-mob-aside.uv-mob-aside-collapsed{
        right: 286px;
    }
    .uv-rtl .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside.uv-mob-aside-collapsed{
        right: 45px;
    }
    .uv-rtl .uv-inner-section .uv-view.uv-aside-view .uv-ticket-scroll-region.uv-aside-view-tv{
        right: 20px;
    }
    .uv-rtl .uv-sidebar:not(.uv-sidebar-active) ~ .uv-paper .uv-mob-aside:not(.uv-mob-aside-collapsed) {
        right: 560px
    }
    .uv-rtl .uv-mob-aside{
        left: unset;
    }
    .uv-menubar.uv-language .uv-dropdown-list {
        z-index: 19999;
    }
    @media screen and (min-width: 901px) and (max-width: 1400px) {
        .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside{
            left: 290px;
        }
        .uv-mob-aside.uv-mob-aside-collapsed{
            left: 252px;
        }
        .uv-rtl .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside{
            right: 290px;
        }
        .uv-rtl  .uv-mob-aside.uv-mob-aside-collapsed{
            right: 252px;
        }
    }
    @media screen and (max-width: 1024px) {
        .uv-mob-aside{
            top: 48px;
            left: 80px!important;
        }
        .uv-mob-aside-collapsed .uv-icon-aside-menu, .uv-mob-aside-collapsed .uv-icon-aside-menu:hover {
            background-position: 1px -497px;
        }
        .uv-sidebar ul.uv-menubar li a {
            max-width: 60px !important;
        }
        .uv-sidebar .uv-soft-top .uv-company-logo {
            width: unset;
        }
        #google_translate_element .goog-te-gadget-simple {
            width: 26px;
            overflow: hidden;
            font-size: 0px;
            padding: 3px 2px 2px 2px;
        }
    }
    @media screen and (max-width: 400px) {
        #google_translate_element {
            display: none;
        }
    }
    .uv-rtl .uv-mob-aside{
        right: 320px;
    }
    .uv-pop-up-body .uv-mob-aside {
        display: none;
        transition: none;
    }
    .uv-rtl .uv-view.uv-aside-view{
        padding: 25px 25px 25px 0px;
    }
    .uv-rtl .uv-inner-section .uv-view.uv-aside-view .uv-ticket-scroll-region.uv-aside-view-tv{
        left: 0px;
        right: 20px;
    }
    .uv-filter-view .uv-filter-head .uv-filter-toggle span{
        background-position: -21px -244px;
    }
    .uv-view.uv-aside-view{
        padding: 25px 0px 25px 25px;
    }
    .uv-inner-section .uv-view.uv-aside-view .uv-ticket-scroll-region.uv-aside-view-tv{
        left: 20px;
    }
    .uv-rtl .uv-view.uv-aside-view{
        padding: 25px 25px 25px 0px;
    }
    .uv-rtl .uv-inner-section .uv-view.uv-aside-view .uv-ticket-scroll-region.uv-aside-view-tv{
        left: 0px;
        right: 20px;
    }
    .uv-filter-view .uv-filter-head .uv-filter-toggle span{
        background-position: -21px -244px;
    }


    .uv-inner-section .uv-view.uv-aside-view .uv-ticket-fixed-region{
        left: 20px;
    }

    .uv-rtl .uv-inner-section .uv-view.uv-aside-view .uv-ticket-fixed-region {
        left: 0px;
        right: 20px;
    }

    div.mce-edit-area {
        margin-right: 1px!important;
    }

    .uv-whats-newlist li img {
        width: 40px;
    }
    .uv-got-whats-new {
        background-color: #7C70F4;
        border-radius: 50%;
        padding: 4px;
        border: 2px solid white;
        position: absolute;
        top: -3px;
        right: -3px;
    }
    .uv-feature-title {
        vertical-align: top;
        font-size: 18px;
        margin: 5px 0 0 5px;
        word-wrap: break-word;
        display: inline-block;
    }
    .uv-feature-content {
        margin: 2px 0 0 0;
    }
    .uv-dropdown-list ul .uv-feature-link, .uv-dropdown-list ul .uv-feature-link:link, .uv-dropdown-list ul .uv-feature-link:active, .uv-dropdown-list ul .uv-feature-link:visited, .uv-dropdown-list ul .uv-feature-link:focus {
        color: #2750C4;
        font-size: 15px;
        margin-top: 10px;
    }
    .uv-dropdown-list ul.uv-search-list li.uv-whats-li {
        border-top: none;
        padding-top: 5px;
    }
    .uv-whats-newlist + .uv-notification-list {
        margin-left: 15px;
    }
    .uv-search-result-wrapper a:focus > .uv-search-result-row {
        background-color: #f0f0f0;
    }
    .uv-loader-view ~ .uv-notifications-wrapper {
        z-index: 9999;
    }
    .mce-notification-error {
        display: none;
    }
    ul.uv-flag-notice-list {
        color: #333333;
        border-top: solid 1px #D3D3D3;
        border-bottom: solid 1px #D3D3D3;
        padding: 15px 20px;
        background: #FAFAFA;
    }
    .uv-dropdown-list ul.uv-search-list.flags-active li:first-child {
        border-top: unset;
    }
</style>

<!-- Navigation -->
<div class="uv-navbar">
    <!-- Banner -->
    <div class="uv-mob-aside {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-mob-aside-collapsed{% endif %}">
        <span class="uv-icon-aside-menu"></span>
    </div>

    <!-- Search Box -->
    <div class="uv-search-wrapper uv-no-error-success-icon">
        <input placeholder="Search" class="uv-search-bar" type="text" name="">
        <div class="uv-search-result-wrapper" id="beauty-scroll">
            <h6>Results</h6>

            <a href="{{ path('helpdesk_member_ticket_collection')}}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" class="uv-margin-icon-srch">
					        <path fill-rule="evenodd" fill="rgb(158, 158, 158)" d="M19.000,4.000 L17.000,4.000 L16.995,12.998 L4.000,13.000 L4.000,15.000 C4.000,15.550 4.450,16.000 5.000,16.000 L16.000,16.000 L20.000,20.000 L20.000,5.000 C20.000,4.450 19.550,4.000 19.000,4.000 ZM15.000,10.000 L15.000,1.000 C15.000,0.450 14.550,0.000 14.000,0.000 L1.000,0.000 C0.450,0.000 -0.000,0.450 -0.000,1.000 L-0.000,15.000 L4.000,11.000 L14.000,11.000 C14.550,11.000 15.000,10.550 15.000,10.000 Z"></path>
					    </svg>
                    </div>
                    <p>Tickets</p>
                </div>
            </a>

            <a href="{{ path('helpdesk_member_support_group_collection')}}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 60 60">
                            <path fill-rule="evenodd" d="M54,36V52H45V36H42V24a3.807,3.807,0,0,1,4-4h7a3.807,3.807,0,0,1,4,4V36H54ZM49.5,18A4.5,4.5,0,1,1,54,13.5,4.487,4.487,0,0,1,49.5,18ZM33,52H27V39H20l6.37-16.081A4.224,4.224,0,0,1,30.379,20h0.253a4.244,4.244,0,0,1,4.009,2.922L40,39H33V52ZM30.49,18a4.5,4.5,0,1,1,4.5-4.5A4.487,4.487,0,0,1,30.49,18ZM15,52H6V36H3V24a3.807,3.807,0,0,1,4-4h7a3.807,3.807,0,0,1,4,4V36H15V52ZM10.5,18A4.5,4.5,0,1,1,15,13.5,4.487,4.487,0,0,1,10.5,18Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Groups'|trans }}</p>
                </div>
            </a>

            <a href="{{ path('helpdesk_member_support_team_collection')}}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 60 60">
                            <path fill-rule="evenodd" d="M45,36V52H36V36H33V24a3.807,3.807,0,0,1,4-4h7a3.807,3.807,0,0,1,4,4V36H45ZM40.5,18A4.5,4.5,0,1,1,45,13.5,4.487,4.487,0,0,1,40.5,18ZM24,52H15V36H12V24a3.807,3.807,0,0,1,4-4h7a3.807,3.807,0,0,1,4,4V36H24V52ZM19.5,18A4.5,4.5,0,1,1,24,13.5,4.487,4.487,0,0,1,19.5,18Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Teams'|trans }}</p>
                </div>
            </a>

            <a href="{{ path('helpdesk_member_account_collection') }}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewbox="0 0 60 60">
                            <path fill-rule="evenodd" d="M30.5,2.974A22.308,22.308,0,0,0,8,25.081V42c0,4.078,2.85,8,7,8h8V29.994H13V25.081A17.337,17.337,0,0,1,30.5,7.887,17.337,17.337,0,0,1,48,25.081v4.913H38V50H48v2H31v5H46c4.15,0,7-3.278,7-7.355V25.081A22.308,22.308,0,0,0,30.5,2.974Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Agents'|trans }}</p>
                </div>
            </a>

            <a href="{{ path('helpdesk_member_privilege_collection')}}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewbox="0 0 60 60">
                            <path fill-rule="evenodd" d="M44.985,21H43V16A13.239,13.239,0,0,0,30,3,13.24,13.24,0,0,0,17,16v5H14.989a5.087,5.087,0,0,0-5,5.143V51.857a5.087,5.087,0,0,0,5,5.143h30a5.087,5.087,0,0,0,5-5.143V26.143A5.087,5.087,0,0,0,44.985,21Zm-15,22.987a4.987,4.987,0,1,1,5-4.987A5.008,5.008,0,0,1,29.987,43.987ZM38,21H22V16a8,8,0,1,1,16,0v5Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Privileges'|trans }}</p>
                </div>
            </a>

            <a href="{{ path('helpdesk_member_manage_customer_account_collection') }}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewbox="0 0 60 60">
                            <path fill-rule="evenodd" d="M39.025,28a7,7,0,1,0-7.013-7A6.976,6.976,0,0,0,39.025,28ZM22.013,28A7,7,0,1,0,15,21,6.976,6.976,0,0,0,22.013,28Zm-0.751,4.29c-5.082,0-15.267,2.674-15.267,8V46H37V40C37,34.675,26.344,32.287,21.262,32.287Zm17.449,0c-0.633,0-1.352.046-2.116,0.114,2.53,1.92,4.4,4.216,4.4,7.6v6H53.978V40.287C53.978,34.961,43.793,32.287,38.711,32.287Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Customers'|trans }}</p>
                </div>
            </a>

            <a href="{{ path('helpdesk_member_knowledgebase_folders_collection') }}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" class="uv-margin-icon-srch">
                            <path fill-rule="evenodd" fill="rgb(158, 158, 158)" d="M14.000,0.000 L2.000,0.000 C0.969,0.000 0.000,0.901 0.000,2.000 L0.000,18.000 C0.000,19.099 0.969,20.000 2.000,20.000 L14.000,20.000 C15.031,20.000 16.000,19.099 16.000,18.000 L16.000,2.000 C16.000,0.901 15.031,0.000 14.000,0.000 ZM3.000,3.000 L9.000,3.000 L9.000,11.000 L6.000,9.000 L3.000,11.000 L3.000,3.000 Z"></path>
                        </svg>
                    </div>
                    <p>{{ 'Knowledgebase'|trans }}</p>
                </div>
            </a>

            <a href="{{ path('helpdesk_member_knowledgebase_folders_collection') }}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 60 60">
                            <path fill-rule="evenodd" d="M25.216,11.023h-14.4a4.708,4.708,0,0,0-4.777,4.624L6.011,43.394a4.729,4.729,0,0,0,4.8,4.625H49.223a4.729,4.729,0,0,0,4.8-4.625L54,21a5.234,5.234,0,0,0-5-5H30Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Folders'|trans }}</p>
                </div>
            </a>
            
            <a href="{{ path('helpdesk_member_knowledgebase_category_collection') }}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 60 60">
                            <path fill-rule="evenodd" d="M6,18h6V12l-6,.014V18Zm10-6v6H54V12H16ZM6,28h6V22l-6,.014V28Zm10-6v6H54V22H16ZM6,38h6V32l-6,.014V38Zm10-6v6H54V32H16ZM6,48h6V42l-6,.014V48Zm10-6v6H54V42H16Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Categories'|trans }}</p>
                </div>
            </a>

            <a href="{{ path('helpdesk_member_knowledgebase_article_collection')}}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewbox="0 0 60 60">
                            <path fill-rule="evenodd" d="M34.743,5.977h-19a4.769,4.769,0,0,0-4.726,4.8L11,49.19a4.77,4.77,0,0,0,4.726,4.8h28.52a4.79,4.79,0,0,0,4.749-4.8V20.381ZM32,23V9L46,23H32Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Articles'|trans }}</p>
                </div>
            </a>
            <a href="{{ path('prepare_response_action')}}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 60 60">
                            <path fill-rule="evenodd" d="M25.783,21.527L10.245,6.019,6.016,10.248,21.524,25.756ZM37.512,6.019l6.119,6.119L6.016,49.783l4.229,4.229L47.89,16.4l6.119,6.119V6.019h-16.5ZM38.5,34.245l-4.229,4.229,9.389,9.389-6.149,6.149h16.5v-16.5L47.89,43.634Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Prepared Responses'|trans }}</p>
                </div>
            </a>

            <a href="{{ path('helpdesk_member_workflow_collection') }}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 60 60">
                            <path fill-rule="evenodd" d="M25.783,21.527L10.245,6.019,6.016,10.248,21.524,25.756ZM37.512,6.019l6.119,6.119L6.016,49.783l4.229,4.229L47.89,16.4l6.119,6.119V6.019h-16.5ZM38.5,34.245l-4.229,4.229,9.389,9.389-6.149,6.149h16.5v-16.5L47.89,43.634Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Workflows'|trans }}</p>
                </div>
            </a>

            <a href="{{ path('helpdesk_member_saved_replies') }}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewbox="0 0 60 60">
                            <path fill-rule="evenodd" d="M49.206,6.014H10.789a4.794,4.794,0,0,0-4.778,4.8L5.987,54,15,45H49c2.641,0,5.008-1.753,5.008-4.393V10.813A4.815,4.815,0,0,0,49.206,6.014ZM45,36H15V31H45v5Zm0-8H15V23H45v5Zm0-8H15V15H45v5Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Saved Replies'|trans }}</p>
                </div>
            </a>

            <a href="{{ path('helpdesk_member_ticket_type_collection')}}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewbox="0 0 60 60">
                            <path fill-rule="evenodd" d="M6,44v5H22V44H6ZM6,11v5H33V11H6ZM33,54V49H54V44H33V39H28V54h5ZM17,23v5H6v5H17v5h5V23H17ZM54,33V28H28v5H54ZM39,21h5V16H54V11H44V6H39V21Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Ticket Types'|trans }}</p>
                </div>
            </a>

            <a href="{{ path('helpdesk_member_ticket_tag_collection')}}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewbox="0 0 60 60">
                            <path fill-rule="evenodd" d="M42.935,14.247A4.683,4.683,0,0,0,39,12H11a5.182,5.182,0,0,0-5.015,5.313V43.74A5.164,5.164,0,0,0,11.036,49l27.782,0.026a4.972,4.972,0,0,0,4.117-2.22L53.972,30.526Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Tags'|trans }}</p>
                </div>
            </a>

            <a href="{{ path('helpdesk_member_helpdesk_theme') }}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 60 60">
                            <path fill-rule="evenodd" d="M30,6a24,24,0,0,0,0,48,4,4,0,0,0,2.96-6.693,3.985,3.985,0,0,1,2.987-6.64h4.72A13.338,13.338,0,0,0,54,27.333C54,15.547,43.253,6,30,6ZM15.333,30a4,4,0,1,1,4-4A3.995,3.995,0,0,1,15.333,30Zm8-10.667a4,4,0,1,1,4-4A3.995,3.995,0,0,1,23.333,19.333Zm13.333,0a4,4,0,1,1,4-4A3.995,3.995,0,0,1,36.667,19.333Zm8,10.667a4,4,0,1,1,4-4A3.995,3.995,0,0,1,44.667,30Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Branding'|trans }}</p>
                </div>
            </a>

            <a href="{{ path('email_templates_action') }}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewbox="0 0 60 60">
                            <path fill-rule="evenodd" d="M49.224,52.979H10.813a4.783,4.783,0,0,1-4.8-4.736V24.566a4.7,4.7,0,0,1,2.281-4.025l3.082-1.78,3.4,2.779-4.582,2.648,19.83,12.218,19.83-12.218-4.6-2.66,3.4-2.779,3.1,1.793A4.68,4.68,0,0,1,54,24.566l0.024,23.678A4.783,4.783,0,0,1,49.224,52.979ZM30.018,32.4L16,24V7H44V23.748L30.018,32V32.4ZM20,11h4v4H20V11Zm6,0h8v4H26V11Zm-6,7h4v4H20V18Zm6,0H40v4H26V18Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Email Templates'|trans }}</p>
                </div>
            </a>
            <a href="{{ path('helpdesk_member_swiftmailer_settings') }}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 60 60">
							<path fill-rule="evenodd" d="M49.224,54.979H10.813a4.783,4.783,0,0,1-4.8-4.736V26.566a4.7,4.7,0,0,1,2.281-4.025l3.082-1.78,3.4,2.779-4.582,2.648,19.83,12.218,19.83-12.218-4.6-2.66,3.4-2.779,3.1,1.793A4.68,4.68,0,0,1,54,26.566l0.024,23.678A4.783,4.783,0,0,1,49.224,54.979Zm-9.287-35.7a8.723,8.723,0,0,0,0-2.549l2.821-2.145a0.644,0.644,0,0,0,.16-0.832l-2.674-4.5a0.681,0.681,0,0,0-.815-0.286l-3.328,1.3a9.841,9.841,0,0,0-2.259-1.275L33.334,5.549A0.646,0.646,0,0,0,32.679,5H27.332a0.646,0.646,0,0,0-.655.546L26.169,8.994a10.347,10.347,0,0,0-2.259,1.275l-3.328-1.3a0.661,0.661,0,0,0-.816.286l-2.673,4.5a0.63,0.63,0,0,0,.16.832l2.82,2.145a10.052,10.052,0,0,0-.094,1.275,10.049,10.049,0,0,0,.094,1.274l-2.82,2.146a0.644,0.644,0,0,0-.16.832l2.673,4.5a0.681,0.681,0,0,0,.816.286l3.328-1.3a9.835,9.835,0,0,0,2.259,1.274l0.508,3.446a0.647,0.647,0,0,0,.655.546h5.347a0.646,0.646,0,0,0,.655-0.546l0.508-3.446A10.337,10.337,0,0,0,36.1,25.743l3.328,1.3a0.661,0.661,0,0,0,.815-0.286l2.674-4.5a0.644,0.644,0,0,0-.16-0.832Zm-9.932,3.277a4.553,4.553,0,1,1,4.678-4.551A4.621,4.621,0,0,1,30.006,22.558Z"></path>
						</svg>
                    </div>
                    <p>{{ 'Swift Mailer'|trans }}</p>
                </div>
            </a>
            <a href="{{ path('helpdesk_member_knowledgebase_spam') }}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewbox="0 0 60 60">
                            <path fill-rule="evenodd" d="M29.994,5.98A24.007,24.007,0,1,0,53.974,29.987,24,24,0,0,0,29.994,5.98ZM12,29.365A17.359,17.359,0,0,1,29.36,12a17.148,17.148,0,0,1,10.634,3.668L15.666,40A17.156,17.156,0,0,1,12,29.365ZM30.629,48a14.544,14.544,0,0,1-9.634-3.537L44.455,21a14.549,14.549,0,0,1,3.536,9.636A17.358,17.358,0,0,1,30.629,48Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'Block Spam'|trans }}</p>
                </div>
            </a>
            <a href="{{ path('helpdesk_member_mailbox_settings') }}">
                <div class="uv-search-result-row">
                    <div class="uv-brick-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 60 60">
							<path fill-rule="evenodd" d="M30,33L6,18V12L30,27,54,12v6ZM5.9,5.992A5.589,5.589,0,0,0,1.745,7.817,5.882,5.882,0,0,0-.016,12.027v35.93a5.875,5.875,0,0,0,1.761,4.211A5.581,5.581,0,0,0,5.9,53.992H54.069a5.588,5.588,0,0,0,4.155-1.825A5.8,5.8,0,0,0,60,48V12a5.847,5.847,0,0,0-1.776-4.183,5.6,5.6,0,0,0-4.155-1.825H5.9Z"></path>
						</svg>
                    </div>
                    <p>{{ 'Mailbox'|trans }}</p>
                </div>
            </a>
            <div class="uv-search-result-row uv-no-results" style="display: none">
                <p>{{ 'No result found'|trans }}</p>
            </div>
        </div>
    </div>

    <div class="uv-actions">
        <!-- Profile Navigations -->
        <span style="position: relative" class="">
            <div class="uv-profile uv-dropdown-other">
                {% if currentUserDetails is defined and currentUserDetails.thumbnail is defined and currentUserDetails.thumbnail is not empty %}
                    <img class='uv-avatar' src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}{{ currentUserDetails.thumbnail }}"/>
                {% else %}
                    <img class='uv-avatar' src="{{ asset('bundles/uvdeskcore/images/uv-avatar-batman.png') }}"/>
                {% endif %}
                
                <div class="uv-profile-info">
                    <span class="uv-howdy">Howdy!</span>
                    <span class="uv-user">{{ currentUser.firstName }}</span>
                </div>
            </div>

            <div class="uv-dropdown-list uv-bottom-right uv-text-left">
                <div class="uv-dropdown-container">
                    <label>Account</label>

                    <ul>
                        <li><a href="{{ path('edit_profile') }}">Profile</a></li>
                        <li><a class="uv-text-danger" href="{{ path('helpdesk_member_handle_logout') }}">Sign Out</a></li>
                    </ul>
                </div>
            </div>
        </span>

        <span class="new">
            <div class="uv-action-new uv-dropdown-other">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px"><path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
                d="M20.000,12.000 L12.000,12.000 L12.000,20.000 L8.000,20.000 L8.000,12.000 L0.000,12.000 L0.000,8.000 L8.000,8.000 L8.000,-0.000 L12.000,-0.000 L12.000,8.000 L20.000,8.000 L20.000,12.000 Z"/></svg>
            </div>

            <div class="uv-dropdown-list uv-bottom-right uv-text-left">
                <div class="uv-dropdown-container">
                    <label>Create New</label>
                    <ul>
                        <li data-action="create" class="uv-open-popup" data-target="create-ticket-modal">Ticket</li>
						{% if user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_AGENT') %}
                            <li><a href="{{ path('helpdesk_member_create_account') }}">Agent</a></li>
                        {% endif %}
						{% if user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_CUSTOMER') %}                        
                            <li><a href="{{ path('helpdesk_member_create_customer_account') }}">Customer</a></li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </span>
    </div>
</div>

<script type="text/template" id="notification_flags_temp">
    <% if (typeof undeliveredMessages != 'undefined') { %>
        <li>
            <span class="uv-notification-message">
                <%= undeliveredMessages %>
            </span>
        </li>
        <span class="timeago">{{ 'Learn more about %deliveryStatus%.'|trans({'%deliveryStatus%': '<a href="https://support.uvdesk.com/en/blog/uvdesk-ticket-delivery-status" target="_blank">' ~ 'ticket delivery status'|trans ~ '</a>'})|raw }}</span>
    <% } %>
</script>

<script type="text/javascript">
    $(function () {
        var FeatureSearch = Backbone.View.extend({
            el: $('.uv-search-wrapper'),
            events: {
                'keyup .uv-search-bar': 'searchFeature',
                'click .uv-search-bar': 'openFeatureSearch',
            },
            searchFeature: function(e) {
                var currentElement = Backbone.$(e.currentTarget);
                if(currentElement.val().trim() != '') {
                    var flag = 0;
                    $('.uv-search-wrapper').find('.uv-search-result-row').each(function() {
                        if(!$(this).hasClass('uv-no-results')) {
                            var text = $(this).text().trim().toLowerCase();
                            var isTextContained = text.search(currentElement.val().trim().toLowerCase());
                            if(isTextContained < 0) {
                                $(this).parent().hide();
                                $(this).parent().attr('tabIndex', -1);
                            } else {
                                $(this).parent().show();
                                $(this).parent().removeAttr('tabIndex');
                                flag = 1;
                            }
                        }
                    });
                    if(flag == 0)
                        $('.uv-search-wrapper').find(".uv-no-results").show();
                    else
                        $('.uv-search-wrapper').find(".uv-no-results").hide();

                    this.$el.find('.uv-search-result-wrapper').addClass('uv-search-result-active').addClass('uv-search-flap-up')
                } else {
                    this.$el.find('.uv-search-result-wrapper').removeClass('uv-search-result-active').removeClass('uv-search-flap-up')
                }
            },
            openFeatureSearch: function(e) {
                var currentElement = Backbone.$(e.currentTarget);
                if(currentElement.val().trim() != '') {
                    this.$el.find('.uv-search-result-wrapper').addClass('uv-search-result-active').addClass('uv-search-flap-up')
                }
            }
        });

        var SidePanelUV = Backbone.View.extend({
            el: $('.uv-paper'),
            events: {
                'click .uv-mob-aside span': 'toggleAsideBar'
            },
            initialize : function() {
                var ele = $('.uv-paper');
                if(ele.css('padding-left') == '60px'){
                    $('.uv-mob-aside').removeClass('uv-mob-aside-left');
                }else{
                    $('.uv-mob-aside').addClass('uv-mob-aside-left');
                }

                var asideView = '{{ app.request.cookies.get("uv-asideView") }}';
                if(asideView == 'true')
                    this.toggleAsideBar();
            },
            toggleAsideBar: function(){
                var asideView = true;
                var ele = $('.uv-inner-section .uv-aside');
                var eleSidePanel = $('.uv-inner-section .uv-view');
                var eleTicketView = $('.uv-inner-section .uv-view .uv-ticket-scroll-region');
                var mobAside = $('.uv-mob-aside');
                if(ele.css('display') == 'none'){
                    asideView = false;
                    ele.css('display', 'block');
                    eleSidePanel.removeClass('uv-aside-view');
                    eleTicketView.removeClass('uv-aside-view-tv');
                    mobAside.removeClass('uv-mob-aside-collapsed')
                }else{
                    ele.css('display', 'none');
                    eleSidePanel.addClass('uv-aside-view');
                    eleTicketView.addClass('uv-aside-view-tv');
                    mobAside.addClass('uv-mob-aside-collapsed')
                }
                if(asideView) {
                    document.cookie = ("uv-asideView=1; expires=Wed, 01 Jan 2020 00:00:00 GMT;path=/");
                } else {
                    document.cookie = ("uv-asideView=0; expires=Wed, 01 Jan 2020 00:00:00 GMT;path=/");
                }
            }
        });

        var featureSearch =  new FeatureSearch();
        var sidePanelUV =  new SidePanelUV();
    });
</script>
{# Ticket Create Popup #}	
{% if user_service.isAccessAuthorized('ROLE_AGENT_CREATE_TICKET') %}	
    {{ ticket_service.appendTwigSnippet('createMemberTicket')|raw }}	
    {# {% include('UVDeskCoreBundle:Snippets:createMemberTicketSnippet.html.twig') only %} #}	
{% endif %} 