39 lines
1.3 KiB
HTML
39 lines
1.3 KiB
HTML
{% if slots %}
|
|
{% for slot in slots %}
|
|
<div class="border-bottom pb-2 mb-2">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<strong>{{ slot.start_time|date:"H:i" }} - {{ slot.end_time|date:"H:i" }}</strong>
|
|
<br>
|
|
<small class="text-muted">
|
|
{{ slot.provider.get_full_name }}
|
|
{% if slot.specialty %}• {{ slot.specialty }}{% endif %}
|
|
</small>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-sm btn-outline-primary"
|
|
onclick="bookSlot('{{ slot.id }}', '{{ slot.start_time|date:"H:i" }}', '{{ slot.provider.get_full_name }}')">
|
|
<i class="fas fa-plus me-1"></i>Book
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="text-center py-3 text-muted">
|
|
<i class="fas fa-clock fa-2x mb-2"></i>
|
|
<p>No available slots</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<script>
|
|
function bookSlot(slotId, time, providerName) {
|
|
// This would typically open a booking modal or redirect to booking form
|
|
if (confirm(`Book appointment at ${time} with ${providerName}?`)) {
|
|
// Handle booking logic here
|
|
console.log('Booking slot:', slotId);
|
|
}
|
|
}
|
|
</script>
|
|
|