<div class="navbar">

	<ul class="nav navbar-nav navbar-right pull-right" style="display: flex; align-items: center; flex-wrap: wrap;">
		<li class="hidden-xs">
			<form id="search_form" class="navbar-form pull-right" role="search" style="margin: 0px; display: flex; align-items: center;">
				<input id="nav-search-input" type="search" class="form-control search-query" placeholder="Search...">
				<a href="#" id="nav-search-button">
					<i class="fa fa-search"></i>
				</a>
			</form>
		</li>
        <li class="divider"></li>
		<li class="dropdown">
			<a  href="#"
				title="Messages"
				id="messages"
				class="dropdown-toggle"
				data-toggle="dropdown">
				<i class="glyphicon glyphicon-comment"></i>
			</a>
			<ul id="messages_menu"
				class="dropdown-menu messages"
				role="menu">
				<li role="presentation">
					<a  href="#"
						class="message">
						<img    src="../reference/lightblue4/docs/img/1.png"
							    alt="" />
						<div class="details">
							<div class="sender">Jane Hew</div>
							<div class="text">Hey, John! How is it going? ...</div>
						</div>
					</a>
				</li>
				<li role="presentation">
					<a  href="#"
						class="message">
						<img    src="../reference/lightblue4/docs/img/2.png"
						    	alt="" />
						<div class="details">
							<div class="sender">Alies Rumiancaŭ</div>
							<div class="text">I'll definitely buy this template</div>
						</div>
					</a>
				</li>
				<li role="presentation">
					<a  href="#"
						class="message">
						<img    src="../reference/lightblue4/docs/img/3.png"
							    alt="" />
						<div class="details">
							<div class="sender">Michał Rumiancaŭ</div>
							<div class="text">Is it really Lore ipsum? Lore ...</div>
						</div>
					</a>
				</li>
				<li role="presentation">
					<a  href="#"
						class="text-align-center see-all">
						See all messages
						<i class="fa fa-arrow-right"></i>
					</a>
				</li>
			</ul>
		</li>
		<li class="dropdown">
			<a  href="#"
				title="8 support tickets"
				class="dropdown-toggle"
				data-toggle="dropdown">
				<i class="glyphicon glyphicon-globe"></i>
				<span class="count">3</span>
			</a>
			<ul id="support_menu"
				class="dropdown-menu support locale-menu"
				role="menu">
                <li role="presentation" class="locale-item">
                    <a href="#" class="locale-selector" data-key="ko">
                        <div class="picture"><span class="fi fi-kr"></span></div>
                        <div class="details" data-locale="nav.language.ko">한국어</div>
                    </a>
                </li>
                <li role="presentation" class="locale-item">
                    <a href="#" class="locale-selector" data-key="jp">
                        <div class="picture"><span class="fi fi-jp"></span></div>
                        <div class="details" data-locale="nav.language.jp">일본어</div>
                    </a>
                </li>
                <li role="presentation" class="locale-item">
                    <a href="#" class="locale-selector" data-key="en">
                        <div class="picture"><span class="fi fi-us"></span></div>
                        <div class="details" data-locale="nav.language.en">영어</div>
                    </a>
                </li>
			</ul>
		</li>
		<li class="divider"></li>
		<li class="hidden-xs">
			<a  href="#"
				id="settings"
				title="Settings"
				data-toggle="popover"
				data-placement="bottom">
				<i class="glyphicon glyphicon-cog"></i>
			</a>
		</li>
		<li class="hidden-xs dropdown">
			<a  href="#"
				title="Account"
				id="account"
				class="dropdown-toggle"
				data-toggle="dropdown">
				<i class="glyphicon glyphicon-user"></i>
			</a>
			<ul id="account_menu"
				class="dropdown-menu account"
				role="menu">
                <li role="presentation"
                    class="account-picture">
                    <img    src="./img/seal_tree.png"
                            alt=""
                            class="img-circle" />
                    <strong style="color: #a4c6ff">Welcome A-RMS</strong>
                </li>
				<li role="presentation">
					<a  href="#"
						class="link">
						<i class="fa fa-user"></i>
                        Profile ⇥&nbsp;
                        <span id="login_id"></span>
					</a>
				</li>
				<li role="presentation">
					<a  href="#"
						class="link">
						<i class="fa fa-inbox"></i>
						Inbox
					</a>
				</li>
                <li role="presentation">
                    <a  href="#"
                        class="link">
                        <i class="fa fa-building"></i>
                        Back Office
                    </a>
                </li>
			</ul>
		</li>
		<li class="visible-xs">
			<a  href="#"
				class="btn-navbar"
				data-toggle="collapse"
				data-target=".sidebar"
				title="">
				<i class="fa fa-bars"></i>
			</a>
		</li>
		<li class="hidden-xs logout">
			<a href="#"
					class="link logout"><i class="glyphicon glyphicon-off"></i></a>
		</li>
	</ul>
    <div class="notifications pull-right" style="line-height: 21px !important;"></div>
</div>


<style>
    /* Locale 선택 메뉴 스타일링 */
    .locale-selector {
        .picture {
            float: left;
            text-align: center;
        }
        .details {
            margin-left: 30px;
        }
    }
    .locale-menu {
        min-width: 120px;
        /* 국기 아이콘 적용 (ref: https://github.com/lipis/flag-icons) */
        .fi {
            background-size: contain;
            background-position: 50%;
            background-repeat: no-repeat;
            position: relative;
            display: inline-block;
            width: 1.333333em;
            line-height: 1em;
        }
        .fi:before {
            content: " ";
        }
        .fi-kr {
            background-image: url('./img/flags/kr.svg');
        }
        .fi-jp {
            background-image: url('./img/flags/jp.svg');
        }
        .fi-us {
            background-image: url('./img/flags/us.svg');
        }
    }
</style>

<script>

	(function ($) {
		$(".logout").click(function (event) {

			event.preventDefault();
			event.stopPropagation();

			$.ajax({
				url: "/logout",
				type: "post",
				contentType: "application/json;charset=UTF-8",
				statusCode: {
					200: function (data) {
						location.href = "/";
					},

				},
				beforeSend: function () {
				},
				complete: function () {
				}
			});
		});

        $(".locale-selector").click(function(event) {
            event.preventDefault();
            event.stopPropagation();
            const $this = $(this);
            const selectedLocale = $this.attr("data-key");
            changeLocale(selectedLocale);
            $this.closest(".dropdown-menu").dropdown("toggle");
        });
	})(jQuery);

</script>