{% load i18n %}
<table class="table candidate-table align-middle">
    <thead>
        <tr>
            <th style="width: 40%;"><i class="fas fa-user me-1"></i> {% trans "Topic" %}</th>
            <th style="width: 15%;"><i class="fas fa-calendar-alt me-1"></i> {% trans "Date" %}</th>
            <th style="width: 5%;"><i class="fas fa-map-marker-alt me-1"></i> {% trans "Duration" %}</th>
            <th style="width: 10%;"><i class="fas fa-map-marker-alt me-1"></i> {% trans "Location" %}</th>
            <th style="width: 10%;"><i class="fas fa-info-circle me-1"></i> {% trans "Status" %}</th>
            <th style="width: 10%;"><i class="fas fa-ellipsis-h me-1"></i> {% trans "Actions" %}</th>
            </tr>
    </thead>
    <tbody>
        {% for interview in interviews %}
        <tr>
            <td>{{ interview.interview.topic }}</td>
            <td>{{ interview.interview_date }} {{interview.interview_time}}</td>
            <td>{{ interview.interview.duration }}</td>

            <td>
                <span class="badge bg-primary-theme">
                    {{ interview.interview.location_type }}
                </span>
            </td>
            <td>
                <span class="badge bg-primary-theme">
                    {{ interview.get_status_display }}
                </span>
            </td>

            <td><a class="btn btn-outline-primary btn-sm" href="{% url 'interview_detail' interview.slug %}" target="_blank">View</a></td>
        </tr>
        {% empty %}
        <tr>
            <td colspan="3" class="text-center text-muted">
                <i class="fas fa-info-circle me-2"></i>
                {% trans "No interviews scheduled yet." %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>