{{ template "sync/layout/authenticated.html" . }}

{{ define "title" }}Dash{{ end }}
{{ define "extraheader" }}
	<style>
		.chat-container {
			height: 80vh;
			overflow-y: auto;
		}
		.message {
			max-width: 75%;
			margin-bottom: 10px;
			border-radius: 15px;
		}
		.sender-message {
			background-color: #f0f0f0;
		}
		.receiver-message {
			background-color: #d1e7ff;
		}
		.message-time {
			font-size: 0.7rem;
			color: #6c757d;
			margin-top: 3px;
		}
		.avatar {
			width: 35px;
			height: 35px;
			border-radius: 50%;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div class="container py-4">
		<!-- Chat Header -->
		<div class="row mb-3">
			<div class="col-12">
				<div class="card shadow-sm">
					<div class="card-body d-flex align-items-center">
						<div class="me-3">
							<img
								src="https://via.placeholder.com/40"
								class="avatar"
								alt="User avatar"
							/>
						</div>
						<div>
							<h5 class="mb-0">Chat with Sarah Johnson</h5>
							<small class="text-muted">Last active 5 minutes ago</small>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Chat Messages -->
		<div class="row">
			<div class="col-12">
				<div class="card shadow-sm">
					<div class="card-body chat-container">
						<!-- Date Divider -->
						<div class="text-center mb-4">
							<span class="badge bg-light text-dark">Today, 2:30 PM</span>
						</div>

						<!-- Receiver Message -->
						<div class="d-flex mb-4">
							<img
								src="https://via.placeholder.com/40"
								class="avatar me-2 align-self-end"
								alt="Receiver avatar"
							/>
							<div>
								<div class="message sender-message p-3">
									Hi there! How's the project coming along?
								</div>
								<div class="message-time">2:31 PM</div>
							</div>
						</div>

						<!-- Sender Message -->
						<div class="d-flex flex-row-reverse mb-4">
							<img
								src="https://via.placeholder.com/40"
								class="avatar ms-2 align-self-end"
								alt="Sender avatar"
							/>
							<div class="d-flex flex-column align-items-end">
								<div class="message receiver-message p-3">
									Hey! It's going pretty well. I'm working on the UI mockups
									right now.
								</div>
								<div class="message-time">2:33 PM</div>
							</div>
						</div>

						<!-- Receiver Message -->
						<div class="d-flex mb-4">
							<img
								src="https://via.placeholder.com/40"
								class="avatar me-2 align-self-end"
								alt="Receiver avatar"
							/>
							<div>
								<div class="message sender-message p-3">
									That's great to hear! When do you think you'll be able to
									share them with the team?
								</div>
								<div class="message-time">2:35 PM</div>
							</div>
						</div>

						<!-- Sender Message -->
						<div class="d-flex flex-row-reverse mb-4">
							<img
								src="https://via.placeholder.com/40"
								class="avatar ms-2 align-self-end"
								alt="Sender avatar"
							/>
							<div class="d-flex flex-column align-items-end">
								<div class="message receiver-message p-3">
									I'm hoping to have something ready by tomorrow afternoon. I'm
									just working out some details with the responsive design.
								</div>
								<div class="message-time">2:36 PM</div>
							</div>
						</div>

						<!-- Sender Message -->
						<div class="d-flex flex-row-reverse mb-4">
							<img
								src="https://via.placeholder.com/40"
								class="avatar ms-2 align-self-end"
								alt="Sender avatar"
							/>
							<div class="d-flex flex-column align-items-end">
								<div class="message receiver-message p-3">
									Do you have any specific feedback on the initial concept I
									shared last week?
								</div>
								<div class="message-time">2:37 PM</div>
							</div>
						</div>

						<!-- Receiver Message -->
						<div class="d-flex mb-4">
							<img
								src="https://via.placeholder.com/40"
								class="avatar me-2 align-self-end"
								alt="Receiver avatar"
							/>
							<div>
								<div class="message sender-message p-3">
									Yes! The team loved it. The color scheme was particularly well
									received. We just had some minor suggestions about the
									navigation that I can share during our next call.
								</div>
								<div class="message-time">2:40 PM</div>
							</div>
						</div>

						<!-- Sender Message -->
						<div class="d-flex flex-row-reverse mb-4">
							<img
								src="https://via.placeholder.com/40"
								class="avatar ms-2 align-self-end"
								alt="Sender avatar"
							/>
							<div class="d-flex flex-column align-items-end">
								<div class="message receiver-message p-3">
									That sounds great! Looking forward to the feedback.
								</div>
								<div class="message-time">2:41 PM</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{{ end }}