{% extends 'front/base.html' %}
{% load static %}
{% block title %} {{meta.meta_title}} - {{meta.meta_description}} {% endblock title %}
{% block title1 %} {{meta.meta_title}} - {{seo_settings.tag_line}} {% endblock title1 %}
{% block title2 %} {{meta.meta_title}} - {{seo_settings.tag_line}} {% endblock title2 %}
{% block content %}

<main class="creasoft-wrap layout2">

    <div class="line_wrap layout2">
        <div class="line_item"></div>
        <div class="line_item"></div>
        <div class="line_item"></div>
        <div class="line_item"></div>
        <div class="line_item"></div>
    </div>
      
<!--====================== background Section======================-->
<div id="particles-js" class="particles-cls"></div>
<!--======================  ===============  ======================-->
{% for slider in sliders %}
<div class="swiper-slide">
        {% if settings.slider_particle_is_active %}                   
            <div id="particles-js-{{ forloop.counter }}" class="particles-cls"></div>
        {% endif %}
    </section>
</div>

{% endfor %}

<script>
    const sliderCounting = {{sliders.count}}
</script>


        <section class="contact-area sec-mar">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-lg-5">
                        <div class="contact-left">
                            <div class="sec-title layout2">
                                <span>Get in touch</span>
                                <h2>Contact us if you have more questions.</h2>
                            </div>
                            <ul class="social-follow">
                                    {% if header_footer.social1_icon %}
                                        <li><a href="{{ header_footer.social1_link }}"><i class="{{ header_footer.social1_icon }}"></i></a></li>
                                    {% endif %}
                                    {% if header_footer.social2_icon %}
                                        <li><a href="{{ header_footer.social2_link }}"><i class="{{ header_footer.social2_icon }}"></i></a></li>
                                    {% endif %}
                                    {% if header_footer.social3_icon %}
                                        <li><a href="{{ header_footer.social3_link }}"><i class="{{ header_footer.social3_icon }}"></i></a></li>
                                    {% endif %}
                                    {% if header_footer.social4_icon %}
                                        <li><a href="{{ header_footer.social4_link }}"><i class="{{ header_footer.social4_icon }}"></i></a></li>
                                    {% endif %}
                            </ul>
                            <div class="informations">
                                {% if settings.address %}
                                <div class="single-info">
                                    <div class="icon">
                                        <i class="fas fa-map-marker-alt"></i>
                                    </div>
                                    <div class="info">
                                        <h3>Location</h3>
                                        <p>{{settings.address}}, {% if settings.city %}{{settings.city}}-{% endif %}{% if settings.postal %}{{settings.postal}},{% endif %} {% if settings.state %}{{settings.state}},{% endif %} {% if settings.country %}{{settings.country}}{% endif %}</p>
                                    </div>
                                </div>
                                {% endif %}
                                {% if settings.phone %}
                                <div class="single-info">
                                    <div class="icon">
                                        <i class="fas fa-phone-alt"></i>
                                    </div>
                                    <div class="info">
                                        <h3>Phone</h3>
                                        <a href="tel:{{ settings.phone }}">{{ settings.phone }}</a>
                                    </div>
                                </div>
                                {% endif %}
                                {% if settings.email_address %}
                                <div class="single-info">
                                    <div class="icon">
                                        <i class="far fa-envelope"></i>
                                    </div>
                                    <div class="info">
                                        <h3>Email</h3>
                                        <a href="mailto:{{ settings.email_address }}"><span>{{ settings.email_address }}</span></a>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-7">
                        <div class="mapouter">
                            <div class="gmap_canvas">
                                {{settings.map_iframe|safe}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="getin-touch">
                    <div class="row">
                        <div class="col-md-6 col-lg-7">
                            <div class="contact-form wow animate fadeInUp" data-wow-delay="200ms"
                                data-wow-duration="1500ms">
                                <h3>Have Any Questions</h3>
                                <div id="custom-alert" class="alert alert-success alert-dismissible fade show" role="alert">
                                    <strong>Success!</strong> Your message has been sent successfully! We will get back to you soon.
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                                                              
                                <form method="post" class="cntform" id="contact-form">
                                    {% csrf_token %}
                                    <div class="row">
                                        <div class="col-12">
                                            <input type="text" name="name" required placeholder="Enter your name">
                                        </div>
                                        <div class="col-md-6">
                                            <input type="email" name="email" required placeholder="Enter your email">
                                        </div>
                                        <div class="col-md-6">
                                            <input type="number" name="phone" placeholder="Enter your phone">
                                        </div>
                                        <div class="col-md-12">
                                            <input type="text" name="subject" required placeholder="Subject">
                                        </div>
                                        <div class="col-12">
                                            <textarea name="message" cols="30" rows="10"
                                                placeholder="Your message"></textarea>
                                            <input type="submit" class="contact-btn" value="Send Message">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        {% if  settings.contact_form_image %}
                            <div class="col-md-6 col-lg-5 wow animate fadeInUp" data-wow-delay="300ms"
                                data-wow-duration="1500ms">
                                <div class="call-banner">
                                    <img src="{{ settings.contact_form_image.url }}" alt>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </section>
        
{% endblock %}