<div id="chatBackdrop" class="chat-backdrop" aria-hidden="true"></div>
<aside id="chatPanel" class="chat-panel" data-current-user="<?=(int)$this->session->idu;?>" data-notification-sound="<?=html_escape(isset($chatSound)?$chatSound:'classic');?>" aria-hidden="true" aria-label="Chat pengguna">
	<header class="chat-head">
		<div class="chat-head-main">
			<button type="button" class="chat-head-action chat-back-button" id="chatBackButton" aria-label="Kembali ke daftar pengguna"><i class="fa fa-arrow-left"></i></button>
			<span class="chat-header-avatar" id="chatHeaderAvatar"><i class="fa fa-comments"></i></span>
			<div class="chat-head-copy">
				<strong id="chatTitle">Chat Pengguna</strong>
				<small id="chatSubtitle">Pilih rekan kerja untuk memulai percakapan</small>
			</div>
		</div>
		<button type="button" class="chat-head-action" id="chatClose" aria-label="Tutup chat"><i class="fa fa-times"></i></button>
	</header>
	<div class="chat-list-view">
		<div class="chat-search-wrap" id="chatSearchWrap">
			<i class="fa fa-search"></i><input type="search" id="chatSearch" placeholder="Cari nama pengguna..." autocomplete="off" aria-label="Cari pengguna">
			<button type="button" class="chat-search-clear" id="chatSearchClear" aria-label="Hapus pencarian"><i class="fa fa-times"></i></button>
		</div>
		<div class="chat-list-meta"><span>Daftar pengguna</span><span id="chatOnlineSummary">Memuat...</span></div>
		<div class="chat-users" id="chatUsers"><div class="chat-empty"><span class="chat-empty-icon"><i class="fa fa-circle-o-notch fa-spin"></i></span><strong>Memuat pengguna</strong><small>Mohon tunggu sebentar</small></div></div>
	</div>
	<div class="chat-conversation" id="chatConversation">
		<div class="chat-messages" id="chatMessages"></div>
		<div class="chat-typing" id="chatTyping" aria-live="polite"></div>
		<div class="chat-attachment-preview" id="chatAttachmentPreview"></div>
		<div class="chat-emoji-picker" id="chatEmojiPicker" aria-label="Pilih emoji"></div>
		<div class="chat-compose-shell">
			<div class="chat-compose">
				<button type="button" class="chat-tool-button" id="chatEmojiButton" aria-label="Pilih emoji" title="Emoji"><i class="fa fa-smile-o"></i></button>
				<button type="button" class="chat-tool-button" id="chatAttachButton" aria-label="Pilih gambar atau lampiran" title="Lampiran"><i class="fa fa-paperclip"></i></button>
				<input type="file" id="chatAttachment" hidden accept="image/jpeg,image/png,image/gif,image/webp,.pdf,.doc,.docx,.xls,.xlsx,.txt,.csv,.zip,.rar">
				<textarea id="chatInput" rows="1" maxlength="4000" placeholder="Tulis pesan..." aria-label="Tulis pesan"></textarea>
				<button type="button" class="chat-send-button" id="chatSend" aria-label="Kirim pesan"><i class="fa fa-paper-plane"></i></button>
			</div>
			<div class="chat-key-hint"><span><i class="fa fa-level-down"></i> Enter kirim</span><span>Shift+Enter baris baru</span><span>Ctrl+V gambar</span></div>
		</div>
	</div>
</aside>
<style>
	.chat-avatar .chat-avatar-image {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
	}
	#chatHeaderAvatar {
		overflow: hidden;
	}
	#chatHeaderAvatar .chat-avatar-image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
</style>
