Use {%for %} and {%if %} in Django template

Question

I have 3 videos saved in the Postgres bank where I seventh a star_date and the video only appears on template when the start_date <= date.today()

My problem is in template. I have 3 buttons, one for each video, my idea is that any video that does not have its start_date <= date.today() have your button with a opacity: 0.3;

But the way I’m doing it, when any video is active it gets the button with the images/01.png and with the <a href="0"> and anyone who is inactive gets the button with the images/02.png and with the <a href="">

When active I need the images/01.png has been<a href="0"> the images/02.png has been<a href="1"> and the images/03.png has been<a href="2">

I’m doing it this way:

video-list.html:

<div class="numbers-video">
    <!-- MOSTRA VIDEOS ATIVOS -->
    {%for video in videos%}

        {%if video.is_visible%}
            <a href="0">
                    <img src="{% static 'images/01.png' %}" alt="01">
            </a>

        {%endif%}

        <!-- MOSTRA VIDEOS INATIVOS -->
        {%if video.is_visible == False%}
            <a href="">
                <img class="opacity-button" src="{% static 'images/02.png' %}" alt="02">
            </a>
        {%endif%}

    {%endfor%}
</div>

py views.:

# LISTA DOS VIDEOS
def video_list(request, position):

    if 'lead_id' in request.session:
        video = Video.objects.filter(position=position).first()
        videos = Video.objects.order_by("position").all()

        return render(request, 'video-list.html', {'video': video, 'position':position, 'videos': videos})

    return redirect('registrations:create_lead')

py.models:

class Video(models.Model):
    url = models.CharField(max_length=500, verbose_name='Link Embed')
    title = models.CharField(max_length=255, verbose_name='Título')
    description = models.TextField(max_length=1000, verbose_name='Descrição do video')
    start_date = models.DateField(verbose_name='Estará disponível quando')
    position = models.IntegerField(verbose_name='Qual posição')

    @property
    def is_visible(self):
        return self.start_date <= date.today()

Can anyone give me that strength ?

Answer 1

      {%if video.is_visible == False%}

Should be

      {%if not video.is_visible %}

or better, simply use

      {% else %}

Answer 2

I managed to solve the problem as follows:

Before:

video-list:

<div class="numbers-video">
    <!-- MOSTRA VIDEOS ATIVOS -->
    {%for video in videos%}

        {%if video.is_visible%}
            <a href="0">
                    <img src="{% static 'images/01.png' %}" alt="01">
            </a>

        {%endif%}

        <!-- MOSTRA VIDEOS INATIVOS -->
        {%if video.is_visible == False%}
            <a href="">
                <img class="opacity-button" src="{% static 'images/02.png' %}" alt="02">
            </a>
        {%endif%}

    {%endfor%}
</div>

Now:

video-list:

        <div class="numbers-video">
            <!-- MOSTRA VIDEOS ATIVOS -->
            {%for video in videos%}

                {%if video.is_visible%}
                    <a href="{{forloop.counter0}}">
                        <img src="{% static 'images/0' %}{{forloop.counter}}.png" alt="0{{forloop.counter}}">
                    </a>

                {%else%}
                    <a>
                        <img class="opacity-button" src="{% static 'images/0' %}{{forloop.counter}}.png" alt="0{{forloop.counter}}">
                    </a>
                {%endif%}

            {%endfor%}
        </div>

using the method {{forloop.counter}} i will assign a value according to each item in the list in the case of {{forloop.counter0}} use 0 because the counter starts with 1, so I can make my page dynamic