{% extends 'base_page.html' %}
{% load static %}
{% load helper %}
{% block json-ld %}
{% endblock %}
{% block content %}
    <div id="fb-root"></div>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v8.0" nonce="pbcF7acK"></script>
    <div class="column_alignment align_center">
        {# Header #}
        <div class="header_container">
            <div class="slide_container">
                <div class="owl-carousel owl-theme slide_track home_slides">
                    {% for image in header_images %}
                        <div class="slide">
                            <img alt="{{ image.description }}" src="{{ image.image.url }}">
                            {% if image.button_text %}
                                <div class="slide_content_wrapper column_alignment">
                                    <div class="column_alignment slide_content">
                                        <span>{{ image.description }}</span>
                                        <a class="accent_button white" href="{{ image.button_url }}">{{ image.button_text }}</a>
                                    </div>
                                </div>
                            {% endif %}

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

                <span id="left_button" class="slide_nav_button"><i class="fas fa-chevron-left"></i></span>
                <span id="right_button" class="slide_nav_button"><i class="fas fa-chevron-right"></i></span>
            </div>
        </div>

        <div class="column_alignment align_center section_wrapper">
            <div class="column_alignment main_content">
                <h2 class="block_heading">Featured Products</h2>
                <div class="row_alignment wrap align_center">
                    {% for product in featured_products %}
                        {% include 'featured_product_item.html' with product=product %}
                    {% endfor %}
                </div>
                <a class="accent_button align_self_center" style="margin: 10px" href="{% url 'AllProductsPage' %}">View All Products</a>
            </div>
        </div>

        {# Offer Image #}
        <div class="column_alignment align_center">
            <div class="row_alignment wrap home_offer_container three align_center main_content">
                {% for banner in home_banners %}
                    <a href="{{ banner.destination_url }}"><img src="{{ banner.image.url }}" alt="{{ banner.description }}"></a>
                {% endfor %}
            </div>
        </div>

        <div class="column_alignment align_center section_wrapper about_section ">
            <div class="column_alignment main_content">
                <h1 class="block_heading">About SD Precise Bioscience</h1>
                <p>SD PRECISE BIOSCIENCE has more than 6 years' experience in the cosmetic industry Our goal is to supply best quality ingredients
                    available for Cosmetic, Personal Care & other chemical Industries.<br><br>
                    We source our products from all over the world in bulk for cost-savings for our customers. Our raw materials range from
                    surfactants , preservatives , skin lightening , essential oils, extracts, cosmetic butters, that can be used as is or blended
                    together with other ingredients to produce an end-use product.</p>
                <a class="align_self_center accent_button" href="{% url 'AboutPage' %}">Read More</a>
            </div>
        </div>

        {# Testimonials #}
        <div class="column_alignment align_center section_wrapper testimonial_section_wrapper">
            <h2 class="block_heading">What Our Client Says</h2>

            <div class="owl-carousel owl-theme testimonial_slide main_content align_self_center">
                {% for client in testimonials %}
                    <div class="column_alignment testimonial_slide_content">
                        <div class="row_alignment align_center">
                            {% if client.client_image %}
                                <img class="client_image" src="{{ client.client_image.url }}">
                            {% else %}
                                <img class="client_image" src="{% static 'images/user_icon.png' %}">
                            {% endif %}
                            <div class="column_alignment align_self_center">
                                <span class="client_name">{{ client.client_name }}</span>
                                <span class="client_designation">{{ client.about_client }}</span>
                            </div>
                        </div>
                        <span class="review">{{ client.review|linebreaks }}</span>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="column_alignment align_center news_letter" style="width: 100%">
            <div class="column_alignment main_content align_center">
                <h2 class="block_heading">Get In Touch</h2>
                <form class="form_container column_alignment" method="post" action="{% url 'ContactFormAPI' %}"
                      style="max-width: 500px; width: 100%">
                    {% csrf_token %}
                    <input class="input_field fill" placeholder="Name" name="name" type="text" required>
                    <input class="input_field fill" placeholder="Email Address" name="email" type="email" required>
                    <input class="input_field fill" placeholder="Mobile Number" name="mobile" type="tel" required>
                    <textarea class="input_field fill" placeholder="Message" name="message"></textarea>
                    <button type="submit" class="accent_button white align_self_center" style="margin-top: 20px">Send Message</button>
                </form>
            </div>
        </div>
    </div>
    <script src="{% static 'js/carousel.js' %}?v=1"></script>
{% endblock %}