{% extends "base.html" %}

{% load wagtailcore_tags %}

{% block body_class %}template-services{% endblock %}

{% block content %}

<section class="relative bg-white">
  <div class="container mx-auto p-4">
    <div class="text-center mb-8"></div>
    <div class="flex flex-col lg:flex-row">
      <div class="lg:w-3/5 mb-4 lg:mb-0 lg:pr-8">
        <div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
          {{ page.intro_title|richtext }}
        </div>
        <div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
          {{ page.intro_text|richtext }}
        </div>
      </div>
      <div class="lg:w-2/5 flex items-center justify-center">
        <div class="md:max-h-sm md:max-w-35 mx-auto tiltImage">
          <img src="{{ page.intro_image.file.url }}" alt="Intro Image" class="md:max-h-sm md:max-w-35 mx-auto">
        </div>
      </div>
    </div>
  </div>
</section>

{% for item in page.sections_services.all %}
  {% if item.section_image %}
    {% if forloop.counter|divisibleby:2 %}
      <section class="relative bg-white">
        <div class="container mx-auto p-4">
          <div class="text-center mb-8"></div>
          <div class="flex flex-col lg:flex-row">
            <div class="lg:w-3/5 mb-4 lg:mb-0 lg:pr-8">
              <div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
                {{ item.section_title|richtext}}
              </div>
              <div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
                {{ item.section_text|richtext }}
              </div>
            </div>
            <div class="lg:w-2/5">
              <img src="{{ item.section_image.file.url }}" alt="{{ item.section_title }}" class="md:max-h-sm md:max-w-35 mx-auto">  
            </div>
          </div>
        </div>
      </section>
    {% else %}
      <section class="relative bg-gray-100">
        <div class="container mx-auto p-4">
          <div class="text-center mb-8"></div>
          <div class="flex flex-col lg:flex-row-reverse">
            <div class="lg:w-3/5 mb-4 lg:mb-0 lg:pl-8">
              <div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
                {{ item.section_title|richtext}}
              </div>
              <div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
                {{ item.section_text|richtext}}
              </div>
            </div>
            <div class="lg:w-2/5 flex items-center justify-center">
              <img src="{{ item.section_image.file.url }}" alt="Intro Image" class="md:max-h-sm md:max-w-35 mx-auto">
            </div>
          </div>
        </div>
      </section>
    {% endif %}
  {% else %}
    <section class="relative bg-gray-100">
      <div class="container mx-auto grid grid-cols-1 gap-6 p-4">
        <div class="text-center lg:text-center">
          <div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
            {{ item.section_title|richtext }}
          </div>
        </div>
        <div class="text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
          {{ item.section_text|richtext }}
        </div>
      </div>
      {% if forloop.counter == 3 %}
        <div class="container mx-auto px-4 pb-5">
          <div class="relative">
            <div class="carousel-slider">
              <div class="carousel-list">
                {% for item in page.carousel_services.all %}
                  {% if item.carousel_image %}
                    <div class="carousel-item" style="--position:{{forloop.counter}}">
                      <img src="{{ item.carousel_image.file.url }}" alt="{{ item.carousel_name }}" class="w-full h-auto object-cover">
                      <p class="text-center ">{{ item.carousel_name }}</p>
                    </div>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      {% endif %}    
    </section>
  {% endif %}
{% endfor %}

<section>
  <div class="container mx-auto shadow-xl border border-gray-300">
    <div class="grid grid-cols-1 sm:grid-cols-2">
      {% for item in page.subsections_services.all %}
        <div class="border border-gray-300 p-6">
          <div class="grid grid-cols-1 gap-4 text-center">
            <div class="flex justify-center">
              <img src="{{ item.sub_section_image.file.url }}" style="max-width: 30%; height: auto;"/>
            </div>
            <div>{{ item.sub_section_text|richtext }}</div>
          </div>
        </div>      
      {% endfor %}
    </div>
  </div>
</section>
<br />

{% load static %}

<script src="{%static './js/carousel.js'%}"></script>

{% endblock content%}