{% extends "base.html" %} {% load static %} {% block content %}

<!--! slider start   -->
<section class="slider">
  <div class="slider-elements">
    <div class="slider-item">
      <div class="slider-image">
        <img src="{{sliders.image.url}}" class="img-fluid" alt="Gms Butik" />
      </div>
      <div class="container">
        {% if sliders.title %}
        <p class="slider-title">{{sliders.title}}</p>
        {% endif %} 
        {% if sliders.desciription %}
        <h2 class="slider-heading mobil_heading">{{sliders.desciription}}</h2>
        {% endif %}
        {% if sliders.button_name %}
        <a href="{% url 'urunlerimiz' %}" class="btn btn-primary w-auto"
          >{{sliders.button_name}}</a
        >
        {% endif %}
      </div>
    </div>
  </div>
</section>
<!--! slider end   -->

<!-- categories start  -->

<section class="categories py-2">
  <div class="container">
    <div class="section-title text-center mb-4">
      <h2>Kategoriler</h2>
      <p class="text-dark">Aradığınız Her Şey Burada</p>
    </div>
    <div class="row g-3">
      {% for categori in categories_main %}
      <div class="col-6 col-md-4 col-lg-2 category-list">
        <div class="category-item text-center">
          <a
            href="{% url 'kategori_urunleri' categori.slug %}"
            class="text-decoration-none"
          >
            {% if categori.image %}
            <img
              src="{{categori.image.url}}"
              alt="{{categori.name}}"
              class="img-fluid rounded mb-2"
              style="max-height: 100px; width: auto"
            />
            {% endif %}
            <span class="category-title d-block text-dark small"
              >{{categori.name}}</span
            >
          </a>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<!--! categories end  -->

<!--! products start  -->
<section class="products">
  <div class="container">
    <div class="section-title">
      <h2>{{setting.kampanya_slider_title}}</h2>
      <p>{{setting.slider_desciription}}</p>
    </div>
    <div class="product-wrapper product-carousel">
      <div class="glide__track" data-glide-el="track">
        <ul class="product-list glide__slides" id="product-list"></ul>
      </div>
      <div class="glide__arrows" data-glide-el="controls"></div>
    </div>
  </div>
</section>
<!--! products end  -->

<!--! campaigns start -->
<section class="campaigns p-1">
  <div class="container">
    <div class="campaigns-wrapper">
      {% for kampanyaslider in kampanyasiders1 %}

       <div
        class="campaign-item "
        style="background-image: url('{{ kampanyaslider.image.url }}') ;"
      >  
       
      {% if kampanyaslider.kampanya_title %}
        <h3 class="campaign-title">{{kampanyaslider.kampanya_title}}</h3>
        {% else %}
  <div class="campaign-title-placeholder">&nbsp;</div>
        {% endif %} 
        
        <br />
        {% if kampanyaslider.kampanya_desciription %}
        <p class="campaign-desc">{{kampanyaslider.kampanya_desciription}}</p>
        {% else %}
  <div class="campaign-desc-placeholder">&nbsp;</div>
        {% endif %} 
       
       
        <a
          href="{% url 'category_products' kampanyaslider.category.slug %}"
          class="btn btn-primary"
        >
          {{kampanyaslider.button_name}}
          <i class="bi bi-arrow-right"></i>
        </a>
      </div>

      {% endfor %}
    </div>
    <div class="campaigns-wrapper">
      {% for kampanyaslider in kampanyasiders2 %}
      <div
        class="campaign-item"
        style="background-image: url('{{ kampanyaslider.image.url }}');"
      >

      {% if kampanyaslider.kampanya_title %}
        <h3 class="campaign-title">{{kampanyaslider.kampanya_title}}</h3>
        {% else %}
  <div class="campaign-title-placeholder">&nbsp;</div>
        {% endif %} 
        <br />
        {% if kampanyaslider.kampanya_desciription %}
        <p class="campaign-desc">{{kampanyaslider.kampanya_desciription}}</p>
        {% else %}
  <div class="campaign-desc-placeholder">&nbsp;</div>
        {% endif %}
        <a
          href="{% url 'category_products' kampanyaslider.category.slug %}"
          class="btn btn-primary"
        >
          {{kampanyaslider.button_name}}
          <i class="bi bi-arrow-right"></i>
        </a>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
<!--! campaigns end -->

<!--! products start  -->
<section class="products">
  <div class="container">
    <div class="section-title">
      <h2>Yeni Gelenler</h2>
      <p>Son Derece Şık ve Rahat</p>
    </div>
    <div class="product-wrapper product-carousel2">
      <div class="glide__track" data-glide-el="track">
        <ul class="product-list glide__slides">
          {% for product in featured_products %}
          <li class="product-item glide__slide">
            <div class="product-image">
              <a href="{% url 'ürün-detay' product.slug %}">
                {% if product.image_url%}
                <img src="{{product.image_url}}" alt="{{product.name}}" />
                {% else %}
                <img src="{{product.image.url}}" alt="{{product.name}}" />
                {% endif %}
              </a>
            </div>
            <div class="product-info">
              <p class="product-title">{{product.name}}</p>
              <ul class="product-star">
                {% with rating=product.rating %}
                {% for i in "12345" %}
                {% if forloop.counter <= rating %}
                <li><i class="bi bi-star-fill"></i></li>
                {% else %}
                {% if forloop.counter0 < rating %}
                <li><i class="bi bi-star-half"></i></li>
                {% else %}
                <li><i class="bi bi-star"></i></li>
                {% endif %}
                {% endif %}
                {% endfor %}
                {% endwith %}
              </ul>
              <div class="product-prices">
                {% if product.is_sale %}
                <s class="old-price" style="color: black"
                  >{{product.price }} TL</s
                >
                <strong class="new-price">{{ product.is_sale }} TL</strong>
                {% else %}
                <strong class="new-price">{{ product.price }} TL</strong>
                {% endif %}
              </div>
              <span class="product-discount">Yeni</span>
            </div>
          </li>
          {% endfor %}
        </ul>
      </div>
      <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
          <i class="bi bi-chevron-left"></i>
        </button>
        <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
          <i class="bi bi-chevron-right"></i>
        </button>
      </div>
    </div>
  </div>
</section>
<!--! products end  -->

<!--! blogs start  -->
<section class="blogs">
  <div class="container">
    <div class="section-title">
      <h2>{{setting.blog_page_title}}</h2>
      <p>{{setting.blog_page_subtitle}}</p>
    </div>
    <ul class="blog-list">
      {% for blog in latest_blogs%}

      <li class="blog-item">
        <a href="{% url 'blog-detay' blog.slug %}" class="blog-image">
          {% if blog.image_url%}
          <img src="{{blog.image_url}}" alt="{{blog.title}}" />
          {% else %}
          <img src="{{blog.image.url}}" alt="{{blog.title}}" />
          {% endif %}
        </a>
        <div class="blog-info">
          <div class="blog-info-top">
            <span>{{blog.created_date|date:"d F Y" }} </span>
          </div>
          <div class="text-center">
            <h6>{{ blog.title }}</h6>
          </div>
          <div class="blog-info-bottom">
            <a href="{% url 'blog-detay' blog.slug %}">Daha Fazlası</a>
          </div>
        </div>
      </li>
      {% endfor %}
    </ul>
  </div>
</section>
<!--! blogs end  -->

<!--  Kayar Yazı -->
<section class="py-3">
  <div class="position-relative">
    <!-- Kayar Yazı -->
    <div class="marquee-container mb-4">
      <div class="marquee-content">
        <div class="marquee-item">
          {{setting.kayan_text}} {{setting.kayan_text_emoji|safe}}
        </div>
        <div class="marquee-item">
          {{setting.kayan_text}} {{setting.kayan_text_emoji|safe}}
        </div>
        <div class="marquee-item">
          {{setting.kayan_text}} {{setting.kayan_text_emoji|safe}}
        </div>
        <div class="marquee-item">
          {{setting.kayan_text}} {{setting.kayan_text_emoji|safe}}
        </div>
      </div>

      <div class="marquee-content" aria-hidden="true">
        <div class="marquee-item">
          {{setting.kayan_text}} {{setting.kayan_text_emoji|safe}}
        </div>
        <div class="marquee-item">
          {{setting.kayan_text}} {{setting.kayan_text_emoji|safe}}
        </div>
        <div class="marquee-item">
          {{setting.kayan_text}} {{setting.kayan_text_emoji|safe}}
        </div>
        <div class="marquee-item">
          {{setting.kayan_text}} {{setting.kayan_text_emoji|safe}}
        </div>
      </div>
    </div>
  </div>
</section>
<!--! Kayan Yazı end  -->

<!--! campaign single start  -->
<section
  class="campaign-single"
  style="background-image:url('{{ setting.parelel_content_image.url }}');"
>
  <div class="container">
    <div class="campaign-wrapper">
      <h2>{{setting.paralel_title1}}</h2>
      <p>{{setting.paralel_title2}}</p>
      <span></span>
      <a href="{% url 'urunlerimiz' %}" class="btn btn-lg">
        {{setting.paralel_content_buton}}
        <i class="bi bi-arrow-right"></i>
      </a>
    </div>
  </div>
</section>
<!--! campaign single end  -->

{% endblock content %}