{% load i18n %}

<div class="overflow-x-auto">
    <table class="w-full text-sm text-left">
        <thead>
            <tr class="bg-temple-red/10 border-b-2 border-temple-red">
                <th class="px-4 py-3 font-bold text-gray-900" style="width: 35%;">
                    <div class="flex items-center gap-2">
                        <i data-lucide="user" class="w-4 h-4 text-temple-red"></i>
                        {% trans "Topic" %}
                    </div>
                </th>
                <th class="px-4 py-3 font-bold text-gray-900" style="width: 15%;">
                    <div class="flex items-center gap-2">
                        <i data-lucide="calendar" class="w-4 h-4 text-temple-red"></i>
                        {% trans "Date" %}
                    </div>
                </th>
                <th class="px-4 py-3 font-bold text-gray-900" style="width: 10%;">
                    <div class="flex items-center gap-2">
                        <i data-lucide="hourglass" class="w-4 h-4 text-temple-red"></i>
                        {% trans "Duration" %}
                    </div>
                </th>
                <th class="px-4 py-3 font-bold text-gray-900" style="width: 10%;">
                    <div class="flex items-center gap-2">
                        <i data-lucide="map-pin" class="w-4 h-4 text-temple-red"></i>
                        {% trans "Location" %}
                    </div>
                </th>
                <th class="px-4 py-3 font-bold text-gray-900" style="width: 10%;">
                    <div class="flex items-center gap-2">
                        <i data-lucide="info" class="w-4 h-4 text-temple-red"></i>
                        {% trans "Status" %}
                    </div>
                </th>
                <th class="px-4 py-3 font-bold text-gray-900" style="width: 10%;">
                    {% trans "Actions" %}
                </th>
            </tr>
        </thead>
        <tbody>
            {% for interview in interviews %}
            <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                <td class="px-4 py-3 text-gray-900 font-medium">
                    {{ interview.interview.topic }}
                </td>
                <td class="px-4 py-3 text-gray-700">
                    {{ interview.interview_date }} {{ interview.interview_time }}
                </td>
                <td class="px-4 py-3 text-gray-700">
                    {{ interview.interview.duration }}
                </td>
                <td class="px-4 py-3">
                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-temple-red/10 text-temple-red">
                        {{ interview.interview.location_type }}
                    </span>
                </td>
                <td class="px-4 py-3">
                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-temple-dark/10 text-temple-dark">
                        {{ interview.get_status_display }}
                    </span>
                </td>
                <td class="px-4 py-3">
                    <a class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium border-2 border-temple-red text-temple-red hover:bg-temple-red hover:text-white transition-all duration-200"
                       href="{% url 'interview_detail' interview.slug %}"
                       target="_blank">
                        <i data-lucide="eye" class="w-4 h-4"></i>
                        {% trans "View" %}
                    </a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6" class="px-4 py-8 text-center">
                    <div class="flex flex-col items-center gap-3 text-gray-500">
                        <i data-lucide="info" class="w-12 h-12"></i>
                        <p>{% trans "No interviews scheduled yet." %}</p>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
});
</script>