Фильтрация DateTimeField по прошлым и будущим датам django

Моя проблема в том, что я делаю таймер до ближайшего события на сайте. События я храню в модели django. Делая вывод даты в шаблоне не знаю как сделать так, чтобы события выводились по очереди. У меня получилось отфильтровать прошедшие даты в шаблоне, но я не могу сделать автоматическую смену события, когда предыдущее событие прошло. То есть до него осталось 00.00.00. У меня не получается также вывести первый уже отфильтрованный элемент. Работает только {% if forloop.counter0 == 1 %}, но это выдает элемент всего списка, а не элемент отфильтрованного списка. Я просто пытался вывести первое событие, где дата больше текущей. Я пробовал использовать какие-то внутренние циклы после фильтрации, но у меня не получается это сделать. Обращаюсь к вам с этой проблемой потому что зашел в большой тупик. Был бы очень благодарен за вашу помощь. Была мысль отфильтровать события сразу в views.py с помощью filter, но я опять же запутался. Я еще пока новичок в этом деле, но очень хотелось бы добить этот проект.

Шаблон

{% for x in date %}

{% with alpha=0 %}
{% if x.date|timesince >= "1 sec" %}

{% else %}

{% if forloop.counter0 == 1 %}

<div class="mec-wrap">
    <article class="mec-event-countdown-style3 ">
        <div class="mec-event-countdown-part1">
            <div class="mec-event-countdown-part-title">
                <div class="mec-event-upcoming"><span>Далее</span> Ближайшее событие</div>
            </div>

              <div class="mec-event-countdown-part-details">

                <div class="mec-event-date">
                    <span class="mec-date1">{{x.date|date:"d"}}</span>
                    <span class="mec-date2">
                      {% if x.date|date:"m" == "01" %}Января{% endif %}
                      {% if x.date|date:"m" == "02" %}Февраля{% endif %}
                      {% if x.date|date:"m" == "03" %}Марта{% endif %}
                      {% if x.date|date:"m" == "04" %}Апреля{% endif %}
                      {% if x.date|date:"m" == "05" %}Мая{% endif %}
                      {% if x.date|date:"m" == "06" %}Июня{% endif %}
                      {% if x.date|date:"m" == "07" %}Июля{% endif %}
                      {% if x.date|date:"m" == "08" %}Августа{% endif %}
                      {% if x.date|date:"m" == "09" %}Сентября{% endif %}
                      {% if x.date|date:"m" == "10" %}Октября{% endif %}
                      {% if x.date|date:"m" == "11" %}Ноября{% endif %}
                      {% if x.date|date:"m" == "12" %}Декабря{% endif %}
                    </span>
                    <span class="mec-date3">{{x.date|date:"Y"}}</span>
                </div>
                <div class="mec-event-title-link">
                    <h4 class="mec-event-title">{{x.namedate}} {{x.date|date:" (H:i)"}}</h4>
                    <div class="mec-event-countdown">

                      <div class="blockl">
                          <p class="texth" id="days"></p>
                          <p class="label-w">дни</p>
                      </div>
                      <div class="block-w">
                          <p class="texth" id="hours"></p>
                          <p class="label-w">часы</p>
                      </div>
                      <div class="block-w">
                          <p class="texth" id="minutes"></p>
                          <p class="label-w">минуты</p>
                      </div>
                      <div class="block-w">
                          <p class="texth" id="seconds"></p>
                          <p class="label-w">секунды</p>
                      </div>
                </div>
                </div>
            </div>

        </div>
        <img src="{% static 'image/bible.jpg' %}" class="post-image"></img>
    </article>
    </div>

    <script>
    function makeTimer() {
       var endTime=new Date({{ x.date|date:"U" }} * 1000);
        endTime = (Date.parse(endTime) / 1000);

            var now = new Date();
            now = (Date.parse(now) / 1000);

            var timeLeft = endTime - now;

            var days = Math.floor(timeLeft / 86400);
            var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
            var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
            var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

            if (hours < "10") { hours = "0" + hours; }
            if (minutes < "10") { minutes = "0" + minutes; }
            if (seconds < "10") { seconds = "0" + seconds; }

            $("#days").html(days + "<span></span>");
            $("#hours").html(hours + "<span></span>");
            $("#minutes").html(minutes + "<span></span>");
            $("#seconds").html(seconds + "<span></span>");

    }

    setInterval(function() { makeTimer(); }, 1000);
    </script>

    {% endif %}
    {% endif %}
    {% endwith %}
{% endfor %}

Views.py

from django.shortcuts import render, redirect
from .models import Event
from datetime import date

def index(request):
    date = Event.objects.all()
    content = {"date": date}
    return render(request, 'Главная/Главная.html', content)

Models.py

from django.db import models
import os

class Event(models.Model):
    namedate = models.CharField(max_length=120)
    date = models.DateTimeField()

    def __str__(self):
        return self.namedate

from datetime import datetime, timedelta

def index(request):
    startdate = datetime.today()
    enddate = startdate + timedelta(days=365)
    date = Event.objects.filter(date__range=[startdate, enddate])

    content = {"date": date}
    return render(request, 'Главная/Главная.html', content)

{% if forloop.counter0 == 0 %}

...

if (days < "0" ) {
  location.reload(); return false;
}