{% extends "base.html" %}

{% block content %}
    <div class="container mx-auto px-4 py-6">
        <div class="flex flex-col">
            <div class="w-full">
                <h2 class="text-2xl font-bold mb-4">Suchergebnisse</h2>
                {% if doctors is defined and doctors|length %}
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-100">
                        <tr>
                            <th scope="col"
                                class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
                                Index
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
                                Name
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
                                Nächster Telefontag
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
                                Nächste Telefonzeit
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
                                Telefonnummer
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
                                Adresse
                            </th>
                        </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                       {% set day_classes = {
          "1": "bg-secondary",
          "2": "bg-success",
          "3": "bg-info",
          "4": "bg-accent",
          "5": "bg-primary",
        } %}
                        {% for doctor in doctors %}
                            <tr class="{{ day_classes.get(doctor.phone_time.start.strftime("%w"), 'bg-white') }}">
                                <th scope="row"
                                    class="px-6 py-4 whitespace-nowrap text-lg font-medium">{{ doctor.doctor_nr }}</th>
                                <td class="px-6 py-4 whitespace-nowrap text-lg">{{ doctor.doctor_name }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-lg">{{ doctor.phone_time.start.strftime("%A %d.%m") }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-lg">{{ doctor.phone_time.start.strftime("%H:%M") }}
                                    bis {{ doctor.phone_time.end.strftime("%H:%M") }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-lg">{{ doctor.doctor_phone_number }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-lg">{{ doctor.doctor_address }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded relative"
                         role="alert">
                        <strong class="font-bold">Keine Telefonzeiten mit gegebenen Daten gefunden</strong>
                        <span class="block sm:inline"> <a href="/" class="text-blue-500 underline">Zurück zur Suche</a>, um es erneut zu versuchen</span>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}