{{ template "headersMenu.html" . }}

{{ $domain := .domain }}
{{ $isMobile := .isMobile }}

<div class="fixed right-0 left-0 z-10 mx-auto mt-12 container-fluid hover:col-span-6">
	<div class="text-center ltr:md:text-left rtl:md:text-right border-b-[3px] bg-white dark:bg-black">
	<div id="searchbar" class="container mt-6">
	<div class="flex overflow-hidden">
	<form up-submit up-history="true" up-target="#searchbar-results" class="relative w-full" method="get" action="/list">
		<input type="hidden" name="v" value="{{ .optionView }}" />
		<a href="/list?" alt="{{ "Liste" | t }}" up-follow class="p-2 link-q"><i class="fa fa-list"></i></a>
		<a href="/list?v=cards" alt="{{ "Aperçu Opengraph" | t }}" up-follow class="p-2 link-q"><i class="fa fa-id-card"></i></a>
		<a href="/list?v=signs" alt="{{ "Signatures d'email" | t }}" up-follow class="p-2 link-q"><i class="fa fa-envelope"></i></a>
		<a href="/list?v=qrcodes" alt="{{ "QR-Codes" | t }}" up-follow class="p-2 link-q"><i class="fa fa-qrcode"></i></a>
		<label>
		<span class="absolute top-6"><i class="fa fa-search"></i></span>
		<input type="text" name="q" value="{{ .q }}" class="p-6 font-bold text-black bg-transparent border-0 outline-none w-flex-full dark:text-white" placeholder="{{ "Rechercher..." | t }}" style="width:calc(100% - 150px)" />
		</label>
		<button type="submit" class="absolute top-6 text-black rounded-full border-black btn ltr:right-0 rtl:left-0 btn-icon dark:border-white dark:text-white hover:bg-indigo-600 hover:text-white"><i class="fa fa-refresh"></i></button>
	</form>
	</div>
	</div>
	</div>
	</div>
	
    <style>
        .calendar-day {
            background-color: #FDE68A;
            border-radius: 0.5rem;
            padding: 0.5rem 1rem;
            margin: 0.25rem 0;
            cursor: pointer;
        }
        .calendar-day:hover {
            background-color: #FCD34D;
        }
        .active-day {
            background-color: #F59E0B;
            color: white;
        }
        .time-slot {
            background-color: #E5E7EB;
            border-radius: 0.5rem;
            padding: 0.5rem 1rem;
            margin: 0.25rem 0;
            cursor: pointer;
        }
        .time-slot:hover {
            background-color: #D1D5DB;
        }
        .selected-time {
            background-color: #60A5FA;
            color: white;
        }
        .meeting-card {
            background-color: white;
            border-radius: 1rem;
            padding: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .meeting-card:hover {
            background-color: #F3F4F6;
        }
    </style>
	
<section class="relative py-44 pb-0 md:pb-0">
	<div class="container">
		<div class="p-6">
			<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
				<!-- Left Column -->
				<div>
					<!-- User Card -->
					<div class="flex items-center mb-6 space-x-4">
						<img class="w-16 h-16 rounded-full" src="https://unsplash.com/photos/oh0DITWoHi4/download?force=true&w=640" alt="Alesha Nelson">
						<div>
							<h2 class="text-xl font-semibold">Alesha Nelson</h2>
							<p class="text-gray-500">30 mins</p>
						</div>
					</div>
					<!-- Calendar -->
					<div class="p-4 bg-white rounded-lg shadow">
						<div class="flex justify-between items-center mb-4">
							<h3 class="text-lg font-semibold">Choose a date and time that works for you.</h3>
							<button class="p-2 bg-gray-200 rounded-full">
								<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M4 6h16M4 12h16m-7 8h7a2 2 0 002-2v-5a2 2 0 00-2-2h-7m-4 0H4a2 2 0 00-2 2v5a2 2 0 002 2h3m4-10v6m4-6v6m-4-3h4"/>
								</svg>
							</button>
						</div>
						<div class="grid grid-cols-7 gap-1">
							<div class="calendar-day active-day">Thu<br>5 Aug</div>
							<div class="calendar-day">Fri<br>6 Aug</div>
							<div class="calendar-day">Sat<br>7 Aug</div>
							<div class="calendar-day">Sun<br>8 Aug</div>
							<div class="calendar-day">Mon<br>9 Aug</div>
							<div class="calendar-day">Tue<br>10 Aug</div>
							<div class="calendar-day">Wed<br>11 Aug</div>
						</div>
					</div>
					<!-- Time Slots -->
					<div class="mt-6">
						<div class="time-slot selected-time">08:00</div>
						<div class="time-slot">09:00</div>
						<div class="time-slot">10:30</div>
						<div class="time-slot">16:30</div>
					</div>
				</div>
				<!-- Right Column -->
				<div>
					<!-- Meeting Times -->
					<div class="space-y-4">
						<div class="meeting-card">
							<div class="flex justify-between items-center">
								<h4 class="text-lg font-semibold">Today</h4>
								<span class="text-sm text-gray-500">Wednesday 9 August</span>
							</div>
							<div class="grid grid-cols-3 gap-4 mt-2">
								<div class="time-slot">9:00 AM</div>
								<div class="time-slot">10:00 AM</div>
								<div class="time-slot">11:00 AM</div>
								<div class="time-slot">4:00 PM</div>
								<div class="time-slot">4:30 PM</div>
								<div class="time-slot">6:30 PM</div>
							</div>
						</div>
						<div class="meeting-card">
							<div class="flex justify-between items-center">
								<h4 class="text-lg font-semibold">Monday 14 August</h4>
								<span class="text-sm text-gray-500">Next week</span>
							</div>
							<div class="grid grid-cols-3 gap-4 mt-2">
								<div class="time-slot">9:00 AM</div>
								<div class="time-slot">11:30 AM</div>
							</div>
						</div>
						<!-- More meeting cards... -->
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="relative py-16 pb-0 md:py-24 md:pb-0">

<div class="relative container-fluid">
<div class="grid grid-cols-1 mt-8">
<div class="block overflow-x-auto relative w-full">
	<table class="w-full text-sm ltr:text-left rtl:text-right">
		<thead
			class="text-lg">
			<tr>
				<th class="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]"><i class="fa fa-user"></i></th>
				<th class="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">{{ "Lundi" | t }}</th>
				<th class="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">{{ "Mardi" | t }}</th>
				<th class="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">{{ "Mercredi" | t }}</th>
				<th class="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">{{ "Jeudi" | t }}</th>
				<th class="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">{{ "Vendredi" | t }}</th>
				<th class="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">{{ "Samedi" | t }}</th>
				<th class="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">{{ "Dimanche" | t }}</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th class="py-5 text-center border border-gray-100 dark:border-gray-700">8h</th>
				<td class="">
					<a {{ if $isMobile }}up-follow{{ else }}up-layer="new" up-size="large"{{end}} href="/edit/{{ $domain }}" class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/01.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Calvin Carlo</h6>
							<span class="text-slate-400">{{ "Démo produit" | t }}</span>
						</div>
					</a>
				</td>
				<td class=""></td>
				<td class=""></td>
				<td class=""></td>
				<td class="">
					<div class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/03.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Alia Reddy</h6>
							<span class="text-slate-400">{{ "Démo produit" | t }}</span>
						</div>
					</div>
				</td>
				<td class=""></td>
				<td class=""></td>
			</tr>

			<tr>
				<th class="py-5 text-center border border-gray-100 dark:border-gray-700">10h</th>
				<td class=""></td>
				<td class="">
					<div class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/02.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Cristino Murphy</h6>
							<span class="text-slate-400">{{ "RH" | t }}</span>
						</div>
					</div>
				</td>
				<td class=""></td>
				<td class="">
					<div class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/05.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Jennifer Ballance</h6>
							<span class="text-slate-400">{{ "Support client" | t }}</span>
						</div>
					</div>
				</td>
				<td class=""></td>
				<td class="">
					<div class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/04.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Toni Kovar</h6>
							<span class="text-slate-400">{{ "Démo produit" | t }}</span>
						</div>
					</div>
				</td>
				<td class=""></td>
			</tr>
			
			<tr>
				<th class="py-5 text-center border border-gray-100 dark:border-gray-700">12h</th>
				<td class=""></td>
				<td class=""></td>
				<td class="">
					<div class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/06.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Tara Arrington</h6>
							<span class="text-slate-400">{{ "Démo produit" | t }}</span>
						</div>
					</div>
				</td>
				<td class=""></td>
				<td class="">
					<div class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/05.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Jennifer Ballance</h6>
							<span class="text-slate-400">{{ "Support client" | t }}</span>
						</div>
					</div>
				</td>
				<td class=""></td>
				<td class=""></td>
			</tr>
			
			<tr>
				<th class="py-5 text-center border border-gray-100 dark:border-gray-700">14h</th>
				<td class=""></td>
				<td class=""></td>
				<td class=""></td>
				<td class="">
					<div class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/06.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Tara Arrington</h6>
							<span class="text-slate-400">{{ "Démo produit" | t }}</span>
						</div>
					</div>
				</td>
				<td class=""></td>
				<td class=""></td>
				<td class="">
					<div class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/06.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Tara Arrington</h6>
							<span class="text-slate-400">{{ "Administratif" | t }}</span>
						</div>
					</div>
				</td>
			</tr>
			
			<tr>
				<th class="py-5 text-center border border-gray-100 dark:border-gray-700">16h</th>
				<td class="">
					<div class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/03.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Alia Reddy</h6>
							<span class="text-slate-400">{{ "RH" | t }}</span>
						</div>
					</div>
				</td>
				<td class=""></td>
				<td class="">
					<div class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/04.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Toni Kovar</h6>
							<span class="text-slate-400">{{ "Démo produit" | t }}</span>
						</div>
					</div>
				</td>
				<td class=""></td>
				<td class="">
					<div class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/05.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Jennifer Ballance</h6>
							<span class="text-slate-400">{{ "Démo produit" | t }}</span>
						</div>
					</div>
				</td>
				<td class=""></td>
				<td class="">
					<div class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/03.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Alia Reddy</h6>
							<span class="text-slate-400">{{ "Démo produit" | t }}</span>
						</div>
					</div>
				</td>
			</tr>
			
			<tr>
				<th class="py-5 text-center border border-gray-100 dark:border-gray-700">18h</th>
				<td class=""></td>
				<td class="">
					<div class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/04.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Toni Kovar</h6>
							<span class="text-slate-400">{{ "Partenariat" | t }}</span>
						</div>
					</div>
				</td>
				<td class="">
					<div class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/05.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Jennifer Ballance</h6>
							<span class="text-slate-400">{{ "Démo produit" | t }}</span>
						</div>
					</div>
				</td>
				<td class=""></td>
				<td class="">
					<div class="flex items-center p-3 mb-3 bg-white rounded-lg border-gray-200 dark:bg-black border-2 dark:border-gray-700">
						<img src="/cdn/gui/assets/images/client/04.jpg" class="w-12 h-12 rounded-full shadow" alt="">
						<div class="ltr:ml-3 rtl:mr-3">
							<h6 class="block text-lg font-medium">Toni Kovar</h6>
							<span class="text-slate-400">{{ "Démo produit" | t }}</span>
						</div>
					</div>
				</td>
				<td class=""></td>
				<td class=""></td>
			</tr>
			<!-- End -->
		</tbody>
	</table>
</div>
</div>
</div>
</section><!--end section-->
<!-- End Section-->

{{ template "footer.html" . }}