Filtering DateTimeField by past and future django dates

Question

My problem is that I make a timer until the next event on the site. I store the events in the django model. Making the date output in the template, I do not know how to make events output in turn. I managed to filter the past dates in the template, but I can't do an automatic event change when the previous event has passed. That is, there is 00.00.00 left before it. I am also unable to output the first already filtered element. Only {%if forloop.counter0 == 1%} works, but this outputs an element of the entire list, not an element of the filtered list. I was just trying to output the first event where the date is greater than the current one. I tried to use some internal loops after filtering, but I can't do it. I am addressing you with this problem because I have reached a big dead end. I would be very grateful for your help. There was an idea to filter the events immediately in views.py using filter, but I'm confused again. I'm still new to this business, but I would really like to finish this project.

Template

{% 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

Answer 1

My problem has been solved after all. This code helped me:

Views.py

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)

template and JS

{% if forloop.counter0 == 0 %}

...

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