{% load static %}{% load i18n %} {% load horillafilters %}

        {% if interviews %}
          <div class="mt-4 d-flex">
            <span class="oh-activity-sidebar__title fw-bold">{{employee}}'s {% trans "Scheduled Interviews" %}</span>
          </div>

            <ol class="oh-activity-sidebar__qa-list" role="list">
              {% for interview_schedule in interviews %}
                <li class="oh-activity-sidebar__qa-item" onclick="window.location.href = '{% url 'candidate-view-individual' interview_schedule.candidate_id.id %}'">
                  <span class="oh-activity-sidebar__q" style="font-size:16px;">

                    {{forloop.counter}}.<span class="ms-1 mb-2"> {% trans "Date" %} :</span> <span class="ms-2 dateformat_changer">{{ interview_schedule.interview_date }}</span>
                    <span class="d-flex ms-3 mb-2 mt-2">{% trans "Time" %} : <span class=" ms-2 timeformat_changer">{{ interview_schedule.interview_time }}</span></span>
                    <span class="ms-3">{% trans "Interviewer" %} :</span>
                      {% for interviewer in  interview_schedule.employee_id.all %}
                        &nbsp<i id="fabIcon" style="font-size:12px;" class="material-icons">radio_button_checked</i> {{ interviewer }}
                      {% endfor %}
                    <span class="d-flex ms-3 mt-2">{% trans "Candidate" %} : <span class=" ms-2">{{ interview_schedule.candidate_id }}</span></span>
                    {% if interview_schedule.description %}
                      <span class="d-flex ms-3 mb-2 mt-2">{% trans "Description" %} : <span class=" ms-2">{{ interview_schedule.description }}</span>
                    {% endif %}

                    </span>
                  {% if interview_schedule.completed %}
                      <div class="d-flex" style="color:green;">
                          <i id="fabIcon" style="font-size:18px;" class="material-icons ms-3 mt-2">check_circle</i>
                          <span class="oh-activity-sidebar__q mt-2">{% trans "Interview Completed" %}</span>
                      </div>
                  {% elif interview_schedule.interview_date|date:"Y-m-d" < now|date:"Y-m-d" %}
                      <div class="d-flex" style="color:red;">
                          <i id="fabIcon" style="font-size:18px" class="material-icons ms-3 mt-2">dangerous</i>
                          <span class="oh-activity-sidebar__q mt-2">{% trans "Expired Interview" %}</span>
                      </div>
                  {% elif interview_schedule.interview_date|date:"Y-m-d" > now|date:"Y-m-d" %}
                      <div class="d-flex" style="color:orange;">
                          <i id="fabIcon" title="{{interview_schedule.interview_date|timeuntil}}" style="font-size:18px;" class="material-icons ms-3 mt-2">schedule</i>
                          <span class="oh-activity-sidebar__q mt-2">{% trans "Upcoming Interview" %}</span>
                      </div>
                  {% elif interview_schedule.interview_date|date:"Y-m-d" == now|date:"Y-m-d" and not interview_schedule.completed %}
                      <div class="d-flex" style="color:blue;">
                          <i id="fabIcon" style="font-size:18px;" class="material-symbols-outlined ms-3 mt-2">today</i>
                          <span class="oh-activity-sidebar__q mt-2">{% trans "Interview Today" %}</span>
                      </div>
                  {% endif %}

                </li>

              {% endfor %}
            </ol>
          {% else %}
            <div class="mt-4 d-flex">
              <span class="oh-activity-sidebar__title fw-bold">{{employee}}'s {% trans "Scheduled Interviews" %}</span>
            </div>

              <div class='d-flex mt-5' style='margin-left:30%;'>
                <img style="width: 80px;height: 90px;" src="{% static 'images/ui/interview.png' %}"/>
                <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "No interviews are scheduled for this candidate" %}</h5>
              </div>
          {% endif %}