{% extends 'front/base.html' %}
{% load static %}
{% block title %} {{seo.meta_title}} - {{seo.meta_description}} {% endblock title %}
{% block title1 %} {{seo.meta_title}} - {{seo_settings.meta_title}} {% endblock title1 %}
{% block title2 %} {{seo.meta_title}} - {{seo_settings.meta_title}} {% endblock title2 %}
{% block content %}
    <main class="creasoft-wrap">

        <div class="line_wrap">
            <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>


        <section class="breadcrumbs">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumb-wrapper">
                            <div class="breadcrumb-cnt">
                                <h1>Contact us</h1>
                                <span><a href="{% url "homePageFront" %}">Home</a><i class="bi bi-arrow-right"></i>Contact us</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <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>
                            </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="getin-touch">
                            <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>
                    </div>
                </div>
            </div>
        </section>
        
{% endblock %}