loops in Django template

Question

on my template, i have 3 pictures from products in my database i'm trying to loop through. the goal is to display in one div, the pictures of products that are marked available, and in another div, pictures of products that are not marked available. using the code below does not show any items that do not have the same availability as product1. but it shows the pictures of product1 in its appropriate div, as i switch it's availability. i don't know why this is happening, please help.

my model looks like
    

class Product(ModelMeta, models.Model):
    user = models.ForeignKey(User, default=1, null=True,on_delete=models.SET_NULL)                       
    title = models.CharField(max_length=120)
    available = models.BooleanField(default=True)

class SiteImage(models.Model):
    content_type = models.ForeignKey(ContentType, on_delete=models.CASCADE,null=True)
    object_id = models.PositiveIntegerField(null=True)
    content_object = GenericForeignKey('content_type', 'object_id')
    image = models.ImageField(upload_to='image/', blank=True, null=True)
    caption = models.CharField(max_length=50, blank=True)

my view looks like
   

def home_page(request):
    pictures = SiteImage.objects.filter(content_type__model='product')
    testimonials = Testimonials.objects.all()
    
    context = {'pictures': pictures,}

    return render(request, 'home.html', context)

my template looks like

   

 <div>
        {% for picture in pictures %}
            {% if picture.content_object.available %}
                <div class="carousel-item {% if forloop.first %}active{% endif %}">
                    <img src="{{ picture.image.url }}">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>{{ picture.product.title }}</h5>
                            <p> {{ picture.caption }} </p>
                        </div>
                    </div>
                    
            {% endif %}
        {% endfor %}
    </div>

    
    <div>
        {% for picture in pictures %}
            {% if not picture.content_object.available %}
                <div class="carousel-item {% if forloop.first %}active{% endif %}">
                    <img src="{{ picture.image.url }}" class="d-block w-100 ">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>{{ picture.product.title }}</h5>
                        <p> {{ picture.caption }} </p>
                    </div>
                </div>
                    
            {% endif %}
         {% endfor %}
    </div>