{% extends 'bocor/index.html' %}
{% load static %}

{% block content %}
  <main id="main">
    {% include 'bocor/breadcrumb.html' %}

    <!-- ======= Portfolio Details Section ======= -->
    <section id="portfolio-details" class="portfolio-details">
      <div class="container">

        <div class="row gy-4">

          <div class="col-lg-8">
            <div class="portfolio-details-slider swiper">
              <div class="swiper-wrapper align-items-center">

                <div class="swiper-slide">
                  <img src="{{ obj.image1.url }}" alt="">
                </div>

                {% if obj.image2 %}
                <div class="swiper-slide">
                  <img src="{{ obj.image2.url }}" alt="">
                </div>
                {% endif %}

                {% if obj.image3 %}
                <div class="swiper-slide">
                  <img src="{{ obj.image3.url }}" alt="">
                </div>
                {% endif %}

                {% if obj.image4 %}
                <div class="swiper-slide">
                  <img src="{{ obj.image4.url }}" alt="">
                </div>
                {% endif %}

                {% if obj.image5 %}
                <div class="swiper-slide">
                  <img src="{{ obj.image5.url }}" alt="">
                </div>
                {% endif %}

              </div>
              <div class="swiper-pagination"></div>
            </div>
          </div>

          <div class="col-lg-4">
            <div class="portfolio-info">
              <h3>{{ obj.title }}</h3>
              <ul>
                <li><strong>카테고리</strong>: {{ obj.filter }}</li>
                {% if obj.url %}
                <li><strong>참고링크</strong>: {{ obj.url|urlize }}</li>
                {% endif %}
                <li><strong>{{ obj.subtitle }}</strong></li>
                <li>{{ obj.description|linebreaksbr }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section><!-- End Portfolio Details Section -->

  </main><!-- End #main -->
{% endblock content %}