{% load static i18n recruitmentfilters %}
<style>
    .interview-item {
        border-bottom: 1px solid #e9ecef;
        padding: 1rem 0;
    }

    .interview-item:last-child {
        border-bottom: none;
    }

    .interview-date,
    .interview-time,
    .interview-interviewer {
        font-size: 0.875rem;
        color: #6c757d;
        margin-bottom: 0.5rem;
    }

    .interview-description {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.5rem;
        padding-left: 0.75rem;
        border-left: 3px solid #e9ecef;
    }

    .interviewer-chip {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        background-color: #e9ecef;
        border-radius: 12px;
        margin-right: 0.25rem;
        margin-bottom: 0.25rem;
        font-size: 0.8125rem;
        white-space: nowrap;
    }

    .status-completed {
        color: #28a745;
    }

    .status-expired {
        color: #dc3545;
    }

    .status-upcoming {
        color: #ffc107;
    }

    .status-today {
        color: #007bff;
    }
</style>

{% now "Y-m-d" as now %}

<div class="mt-4 d-flex">
  <span class="oh-activity-sidebar__title fw-bold">{{candidate}}'s {% trans "Scheduled Interviews" %}</span>
</div>
{% if perms.recruitment.add_interviewschedule or request.user|stage_manages:candidate.recruitment_id %}
    <div class="d-flex" style="flex-direction: row-reverse;">
        <button type="button" hx-get='{% url "interview-schedule" candidate.id %}' title="{% trans "Schedule Interview" %}"
            hx-target="#createTarget"
            hx-swap="innerHTML"
            data-target="#createModal"
            class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
            data-toggle="oh-modal-toggle">
            <ion-icon name="add" class="mr-1 md hydrated" role="img" aria-label="add"></ion-icon>
            {% trans "Add" %}
        </button>
    </div>
{% endif %}

<div class="tracking-card">
    <div class="interview-list">
        <ol class="oh-activity-sidebar__qa-list" role="list">
            {% for interview in candidate.candidate_interview.all %}
                <li class="oh-activity-sidebar__qa-item">
                    {% if perms.recruitment.delete_interviewschedule or request.user|stage_manages:candidate.recruitment_id %}
                        <span class="float-end" title="{% trans "Delete" %}" hx-get="{% url 'delete-interview' interview.id %}?view=false"
                                data-target="#activitySidebar"
                                hx-swap="innerHTML" hx-target="#interview">
                            <ion-icon name="close-outline" style="font-size: 24px" role="img" class="md hydrated"
                                aria-label="close outline"></ion-icon>
                        </span>
                    {% endif %}
                    {% if perms.recruitment.change_interviewschedule or request.user|stage_manages:candidate.recruitment_id %}
                        <span class="float-end" title="{% trans "Edit" %}" hx-get="{% url 'edit-interview' interview.id %}?view=false"
                                data-target="#createModal" hx-swap="innerHTML" hx-target="#createTarget"
                                data-toggle="oh-modal-toggle">
                            <ion-icon name="create-outline" style="font-size: 19px" role="img" class="md hydrated"
                                aria-label="create outline"></ion-icon>
                        </span>
                    {% endif %}
                    <div class="interview-item row">
                        <div class="interview-date">
                            {% trans "Date" %}: {{ interview.interview_date }}
                        </div>
                        <div class="interview-time">{% trans "Time" %}: {{ interview.interview_time }}</div>
                        <div class="interview-interviewer">
                            {% trans "Interviewer" %}:
                            <div class="mt-1">
                                {% for interviewer in  interview.employee_id.all %}
                                    <span class="interviewer-chip">
                                        <ion-icon name="person-outline"></ion-icon>
                                        {{ interviewer }}
                                    </span>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="interview-description">
                            {{ interview.description }}
                        </div>
                        {% if interview.completed %}
                            <div
                                class="d-flex align-items-center mt-2 status-completed"
                            >
                                <i
                                    class="fas fa-check-circle interview-status-icon"
                                ></i>
                                {% trans "Interview Completed" %}
                            </div>
                        {% elif interview.interview_date|date:"Y-m-d" < now %}
                            <div
                                class="d-flex align-items-center mt-2 status-completed text-danger"
                            >
                                <i
                                    class="fas fa-close interview-status-icon"
                                ></i>
                                {% trans "Expired Interview" %}
                            </div>
                        {% elif interview.interview_date|date:"Y-m-d" > now %}
                            <div
                                class="d-flex align-items-center mt-2 status-upcoming"
                            >
                                <i
                                    class="fas fa-clock interview-status-icon"
                                ></i>
                                {% trans "Upcoming Interview" %}
                            </div>
                        {% elif interview.interview_date|date:"Y-m-d" == now and not interview.completed %}
                            <div
                                class="d-flex align-items-center mt-2 status-today"
                            >
                                <i
                                    class="fas fa-calendar-day interview-status-icon"
                                ></i>
                                {% trans "Interview Today" %}
                            </div>
                        {% endif %}
                    </div>
                </li>
            {% empty %}
                <div class="d-flex justify-content-center align-items-center" style="height: 40vh;">
                    <div>
                        <div style="width:30%; margin:10% auto;" class="oh-tracking-card">
                            <img style="width:100% " src="{% static 'images/ui/interview.png' %}"/>
                        </div>
                        <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "No interviews are scheduled for this candidate" %}</h5>
                    </div>
                </div>
            {% endfor %}
        </ol>
    </div>
</div>