{% load static %}

<section id="portfolio" class="portfolio section-bg">
      <div class="container">

        <div class="section-title">
          <h2 data-aos="fade-in">{{ portfolio_title }}</h2>
          <p data-aos="fade-in">{{ portfolio_subtitle }}</p>
        </div>

        <div class="row">
          <div class="col-lg-12">
            <ul id="portfolio-flters">
              <li data-filter="*" class="filter-active">All</li>
              {% for filter in categories.all %}
              <li data-filter=".filter-{{ filter }}">{{ filter }}</li>
              {% endfor %}
            </ul>
          </div>
        </div>

        <div class="row portfolio-container" data-aos="fade-up">
          {% for item in items.all %}
          <div class="col-lg-4 col-md-6 portfolio-item filter-{{ item.filter }}">
            <div class="portfolio-wrap">
              <img src="{{ item.image1.url }}" class="img-fluid" alt="">
              <div class="portfolio-links">
                <a href="{{ item.image1.url }}" data-gallery="portfolioGallery" class="portfolio-lightbox" title="{{ item.title }}"><i class="bi bi-plus"></i></a>
                <a href="{% url 'bocords:details' item.id %}" title="More Details" target="_blank"><i class="bi bi-link"></i></a>
              </div>
              <div class="portfolio-info">
                <h4>{{ item.title }}</h4>
                <p>{{ item.subtitle }}</p>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </section>