{{template "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}}