{% 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>