{{ template "headersMenuXL.html" . }}

<div class="flex flex-col h-screen bg-gray-200 container-fluid dark:bg-gray-800" style="margin-top:76px; height:calc(100vh - 77px) !important; border-top:1px solid #8888">
	<nav class="p-6 text-black bg-white border-b border-gray-200 shadow-lg lg:hidden dark:bg-black dark:text-white">
		<div class="flex justify-around">
			<button class="text-blue-600 focus:outline-none" onclick="showSection('tickets')">
				<i class="fas fa-ticket-alt"></i>
			</button>
			<button class="text-blue-600 focus:outline-none" onclick="showSection('chat')">
				<i class="fas fa-comments"></i>
			</button>
			<button class="text-blue-600 focus:outline-none" onclick="showSection('userInfo')">
				<i class="fas fa-user-circle"></i>
			</button>
		</div>
	</nav>

<div class="flex overflow-hidden flex-1">


<aside id="channelsSidebar" class="hidden overflow-y-auto w-full max-h-full text-black bg-white shadow-md lg:block lg:w-80 sidebar dark:bg-black dark:text-white z-2">
			




<!-- HERE -->

			<div>
				<input type="text" placeholder="Rechercher des tickets..." class="px-6 py-2 w-full text-black bg-white border-0 border-b dark:bg-black dark:text-white">
			</div>
				<div class="sticky top-0 z-10 px-6 py-8 text-xs font-bold uppercase bg-white bg-opacity-80 border-b dark:bg-black">30 Septembre 2024</div>
				<a href="/dashboard#/ticket/T001" up-follow class="block px-4 pt-2 pb-4 text-black bg-white shadow-md dark:bg-black dark:text-white" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid orange">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:orange">Ouvert</span>
					</div>
					<div class="mb-1 font-bold text-md">Marie Accola</div>
					<div class="text-xs uppercase">Problème de connexion</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Marie Accola</div>
					<div class="text-xs uppercase">Problème de connexion</div>
				</a>
				<a href="/dashboard#/ticket/T002" class="block px-4 pt-2 pb-4 text-black bg-white shadow-lg opacity-50 transition dark:bg-black dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid orange">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:orange">Ouvert</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai un bleu sur la bite</div>
				</a>
				<a href="/dashboard#/ticket/T003" class="block px-4 pt-2 pb-4 text-gray-400 bg-gray-200 shadow-lg opacity-50 transition hover:opacity-100" style="border-top:1px solid red; margin-left:1rem; border-left:.5rem solid red"> 
						<div class="flex justify-between items-center">
							<span class="text-sm text-gray-600">Clafoutis Magazine</span>
							<span class="px-2 py-1 text-xs font-medium uppercase rounded-full">SPAM</span>
						</div>
						<div class="mb-1 font-semibold"></div>
						<div class="text-sm"></div>
					</a>

				<div id="channelsList">
				<div class="sticky top-0 z-10 px-6 py-8 text-xs font-bold uppercase bg-white bg-opacity-80 border-b dark:bg-black">29 Septembre 2024</div>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai mal dormi cette nuit</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">C'est pour quand mon bouton "prout" qui fait du bruit !! j'ai déjà 243 MP3s !</div>
				</a>

				<div class="sticky top-0 z-10 px-6 py-8 text-xs font-bold uppercase bg-white bg-opacity-80 border-b dark:bg-black">28 Septembre 2024</div>
				<a href="/ticket/T005" class="block px-4 pt-2 pb-4 text-black bg-white shadow-lg opacity-50 transition dark:bg-black dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid red">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">FRANCE TV</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 text-red-600 uppercase bg-yellow-100 rounded-full">BUG</span>
					</div>
					<div class="mb-1 font-medium text-md">Jacques Martin</div>
					<div class="text-xs uppercase">Les cartes NFC pour l'école des gans, c'est pour quand ?!?</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai mal dormi cette nuit</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai mal dormi cette nuit</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai mal dormi cette nuit</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai mal dormi cette nuit</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai mal dormi cette nuit</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai mal dormi cette nuit</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai mal dormi cette nuit</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai mal dormi cette nuit</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai mal dormi cette nuit</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai mal dormi cette nuit</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai mal dormi cette nuit</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai mal dormi cette nuit</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai mal dormi cette nuit</div>
				</a>
				<a href="/ticket/T004" class="block px-4 pt-2 pb-4 text-black bg-gray-200 shadow-lg opacity-50 transition dark:bg-gray-800 dark:text-white hover:opacity-100" style="border-top:1px solid #8885; margin-left:1rem; border-left:.5rem solid green">
					<div class="flex justify-between items-center">
						<span class="text-sm text-gray-600">Entreprise A</span>
						<span class="px-2 py-1 text-xs font-medium text-yellow-800 uppercase bg-yellow-100 rounded-full" style="color:green">Répondu</span>
					</div>
					<div class="mb-1 font-medium text-md">Jean-Marie Bigard</div>
					<div class="text-xs uppercase">J'ai mal dormi cette nuit</div>
				</a>

				<!-- Continue this pattern for the remaining tickets, grouped by date -->
			</div>
		</aside>

		<main id="chatArea" class="flex flex-col flex-1">
			<div class="px-6 py-4 mt-4 border-b border-gray-200">
				<h1 class="text-3xl md:text-4xl" id="currentChannel">{{"Bienvenue" | t}}</h1>
				<h1 class="text-lg font-medium" id="currentChannel">{{"Veuillez sélectionner un message." | t}}</h1>
			</div>
			<div class="overflow-y-auto flex-1 p-6 chat-container">
				<!-- Chat messages will be appended here -->
			</div>
			<div class="bg-gray-100 message-input-container dark:bg-gray-800">
				<div class="container px-6 py-4 mx-auto">
					<div class="flex flex-wrap mb-3 preview-container">
						<!-- File previews will be displayed here -->
					</div>
					<div class="relative">
						<div id="userMentionSuggestions" class="hidden overflow-y-auto absolute left-0 bottom-full w-full max-h-40 bg-white rounded-lg border shadow-lg">
							<!-- User mention suggestions will be displayed here -->
						</div>
						<div class="flex items-center">
							<input type="text" id="messageInput" class="flex-grow p-3 w-full font-bold text-white bg-gray-800 rounded-xl border-2 border focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-blue-600 dark:bg-white dark:text-black" placeholder="Tapez votre message...">
							<button id="uploadBtn" class="p-3 rounded-xl focus:outline-none">
								<i class="fas fa-paperclip"></i>
							</button>
							<button id="sendBtn" class="py-3 pl-3 font-semibold rounded-xl focus:outline-none">
								<i class="fa fa-send"></i>
							</button>
						</div>
					</div>
				</div>
			</div>
		</main>

		<aside id="usersSidebar" class="hidden overflow-y-auto py-6 w-full max-h-full text-black bg-white border-l shadow-md lg:block lg:w-80 sidebar dark:bg-black dark:text-white z-2">

			<div class="px-6">
				<h2 class="text-xs font-bold">SKYNET Ltd.</h2>
				<h2 class="text-2xl font-bold">John Connor</h2>
				<p class="mb-2">
				<a class="opacity-50 transition hover:opacity-100" href="/settings/apps" up-follow="" up-target="body">
					<img src="/cdn/design/logos/card-black.png" class="inline-block h-4 dark:hidden" alt="">
					<img src="/cdn/design/logos/card-white.png" class="hidden h-4 dark:inline-block" alt="">
					<img src="/cdn/design/logos/doc-black.png" class="inline-block h-4 dark:hidden" alt="">
					<img src="/cdn/design/logos/doc-white.png" class="hidden h-4 dark:inline-block" alt="">
					<img src="/cdn/design/logos/form-black.png" class="inline-block h-4 dark:hidden" alt="">
					<img src="/cdn/design/logos/form-white.png" class="hidden h-4 dark:inline-block" alt="">
				</a></p>
			</div>
			<div class="mt-6 space-y-2 accordion">
				<div class="overflow-hidden rounded-lg border border-gray-200 accordion-item">
					<button class="px-6 pt-4 pb-0 w-full font-semibold text-left bg-white accordion-header dark:bg-black">
						Abonnement
					</button>
					<div class="px-6 py-4 mb-6 text-black bg-gray-100 border-t border-b accordion-content dark:bg-gray-800 dark:text-white">
						<p class="mb-2"><span class="text-xs font-medium uppercase">Plan :</span> Entreprise</p>
						<p class="mb-2"><span class="text-xs font-medium uppercase">Renouvellement :</span> 5 mai 2025</p>
						<p><span class="text-xs font-medium uppercase">Statut :</span> Actif</p>
					</div>
				</div>
				<div class="overflow-hidden text-left rounded-lg border border-gray-200 accordion-item">
					<button class="px-6 pt-4 pb-0 w-full font-semibold text-left bg-white accordion-header dark:bg-black">
						Informations de Contact
					</button>
					<div class="hidden px-6 py-4 mb-6 text-black bg-gray-100 border-t border-b accordion-content dark:bg-gray-800 dark:text-white">
						<p class="mb-2"><span class="text-xs font-medium uppercase">Nom :</span> John Doe</p>
						<p class="mb-2"><span class="text-xs font-medium uppercase">Email :</span> john.doe@example.com</p>
						<p><span class="text-xs font-medium uppercase">Téléphone :</span> +1 234 567 8900</p>
					</div>
				</div>
				<div class="overflow-hidden rounded-lg border border-gray-200 accordion-item">
					<button class="px-6 pt-4 pb-0 w-full font-semibold text-left bg-white accordion-header dark:bg-black">
						Historique du Support
					</button>
					<div class="hidden px-6 py-4 mb-6 text-black bg-gray-100 border-t border-b accordion-content dark:bg-gray-800 dark:text-white">
						<p class="mb-2"><span class="text-xs font-medium uppercase">Total des Tickets :</span> 5</p>
						<p class="mb-2"><span class="text-xs font-medium uppercase">Tickets Ouverts :</span> 1</p>
						<p><span class="text-xs font-medium uppercase">Dernier Ticket :</span> 2024-09-15</p>
					</div>
				</div>
				<div class="overflow-hidden rounded-lg border border-gray-200 accordion-item">
					<button class="px-6 pt-4 pb-0 w-full font-semibold text-left bg-white accordion-header dark:bg-black">
						Facturation
					</button>
					<div class="hidden px-6 py-4 mb-6 text-black bg-gray-100 border-t border-b accordion-content dark:bg-gray-800 dark:text-white">
						<p class="mb-2"><span class="text-xs font-medium underline uppercase">Envoyer les 3 dernières factures</span></p>
						<p><span class="text-xs font-medium uppercase">Prochain Paiement :</span> 2023-06-01</p>
					</div>
				</div>
				<div class="overflow-hidden rounded-lg border border-gray-200 accordion-item">
					<button class="px-6 pt-4 pb-0 w-full font-semibold text-left bg-white accordion-header dark:bg-black">
						Préférences
					</button>
					<div class="hidden px-6 py-4 mb-6 text-black bg-gray-100 border-t border-b accordion-content dark:bg-gray-800 dark:text-white">
						<p class="mb-2"><span class="text-xs font-medium uppercase">Langue :</span> <u>Français</u></p>
						<p class="mb-2"><span class="text-xs font-medium uppercase">Fuseau Horaire :</span> <u>UTC+2</u></p>
						<p><span class="text-xs font-medium uppercase">Notifications :</span> <u>Activées</u></p>
					</div>
				</div>
			</div>
		</aside>
	</div>
</div>

<input type="file" id="fileInput" class="hidden" multiple>

{{ template "footer.html" . }}