How to filter objects by many to many field in django templates in block of bootstrap tabs

Question

My models look like this:

class Category(MPTTModel):

    class MPTTMeta:
        order_insertion_by = ['category_title']

    category_title = models.CharField(max_length=100, verbose_name='Название категории', blank=False)
    parent = TreeForeignKey('self', null=True, blank=True, related_name='children')
    category_slug = models.CharField(max_length=100, verbose_name='URL')
    category_image = models.ImageField(upload_to=make_upload_path, default="", verbose_name='Изображение')        
    def __unicode__(self):
        return self.category_title  


class Product(models.Model):
    product_title = models.CharField(max_length=100, verbose_name='Название товара', blank=False)
    product_category = models.ManyToManyField(Category, blank=False, related_name='cat')

so i have template with bootstrap tabs

{% block tabs %}
   <ul class="nav nav-tabs">
        {% for cat in categories %}
            <li><a href="#{{ cat.category_slug }}" data-toggle="tab">{{ cat.category_title }}</a></li>
        {% endfor %}
    </ul>
   <div class="tab-content">
      {% for cat in categories %}
          <div class="tab-pane" id="{{ cat.category_slug }}">
              {% for prod in products %}
                   {% if prod.product_category == cat.category_title %}
                        <p><img src='http://127.0.0.1:8000/{{ prod.product_image }}' height="350"></p>
                   {% endif %}
              {% endfor %}
          </div>
      {% endfor %}
   </div>
{% endblock %}

my idea is to show tab for each category and in one tab show products that has such category in product_category (many to many).

first part works good ... in a simple test django creates tabs for categories and showes right category_image in each tab....

 <ul class="nav nav-tabs">
    {% for cat in categories %}
        <li><a href="#{{ cat.category_slug }}" data-toggle="tab">{{ cat.category_title }}</a></li>
    {% endfor %}
</ul>

    <div class="tab-content">
        {% for cat in categories %}
            <div class="tab-pane" id="{{ cat.category_slug }}">

                    <p><img src='http://127.0.0.1:8000/{{ cat.category_image }}' height="350"></p>

            </div>
        {% endfor %}
    </div>

but i cant deal with showing products (product_title and so on) in that tabs.

HOW TO FILTER AND SHOW PRODUCTS IN TAB???

And second question not on this topic :) - how avoid hardcoded host addres in img src??

Update: Why such code doesn`t works

<div class="tab-content">
    {% for cat in categories %}
        <div class="tab-pane" id="{{ cat.category_slug }}">
            {% for prod in products%}
                {% for cat in prod.categories.all %}
                    {% if prod.product_category == cat.category_title %}

                        {{ prod.product_title }}
                    {% endif %}
                {% endfor %}
            {% endfor %}
        </div>
    {% endfor %}
</div>

in view.py

def products(request):    # передает в файл tabs.html все объекты Product в переменную products
    return render_to_response('tabs.html', {'products': Product.objects.all(),
                                            'username': auth.get_user(request).username,
                                            'categories': Category.objects.all()})

Answer 1

i solved in such way !!!

<div class="tab-content">
            {% for cat in categories %}
                <div class="tab-pane" id="{{ cat.category_slug }}">
                    {% for prod in products %}
                          {% for categ in prod.product_category.all %}
                               {% ifequal categ cat %}
                                    {{ prod.product_title }}

                               {% endifequal %}
                          {% endfor %}
                    {% endfor %}
               </div>
            {% endfor %}
</div>