{% extends 'site/base.html' %}
{% load static %}

{% block title %}
  
{% endblock title %}


{% block css %}
<link rel="stylesheet" href="{% static 'css/contact.css' %}"/>
{% endblock css %}



{% block content %}
    
    <div class="mobile-menu">
        <a href="#" title="Home Page"><i
                class="fas fa-home"></i><span>Home</span></a><button class="cate-btn" title="Category List"><i
                class="fas fa-list"></i><span>category</span></button><button class="cart-btn" title="Cartlist"><i
                class="fas fa-shopping-basket"></i><span>cartlist</span><sup>9+</sup></button><a href="wishlist.html"
            title="Wishlist"><i class="fas fa-heart"></i><span>wishlist</span><sup>0</sup></a><a href="compare.html"
            title="Compare List"><i class="fas fa-random"></i><span>compare</span><sup>0</sup></a></div>
    <section class="inner-section single-banner" style="background: url({% static 'images/single-banner.jpg' %}) no-repeat center;">
        <div class="container">
            <h2>contact us</h2>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Contact</li>
            </ol>
        </div>
    </section>
    <section class="inner-section contact-part">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-4">
                    <div class="contact-card"><i class="icofont-location-pin"></i>
                        <h4>head office</h4>
                        <p>1Hd- 50, 010 Avenue, NY 90001 United States</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="contact-card active"><i class="icofont-phone"></i>
                        <h4>phone number</h4>
                        <p><a href="#">009-215-5596 <span>(toll free)</span></a><a href="#">009-215-5595</a></p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="contact-card"><i class="icofont-email"></i>
                        <h4>Support mail</h4>
                        <p><a href="#">contact@example.com</a><a href="#">info@example.com</a></p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="contact-map"><iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3654.3406974350205!2d90.48469931445422!3d23.663771197998262!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755b0d5983f048d%3A0x754f30c82bcad3cd!2sJalkuri%20Bus%20Stop!5e0!3m2!1sen!2sbd!4v1605354966349!5m2!1sen!2sbd" aria-hidden="false" tabindex="0"></iframe></div>
                </div>
                <div class="col-lg-6">
                    <form method="post" class="contact-form">
                        {% csrf_token %}

                        <h4>Drop Your Thoughts</h4>

                        <!-- Name field -->
                        <div class="form-group">
                            <div class="form-input-group">
                                <input class="form-control" type="text" name="name" placeholder="Your Name" required>
                                <i class="icofont-user-alt-3"></i>
                            </div>
                            {% if form.name.errors %}
                                <div class="error text-danger">{{ form.name.errors }}</div>
                            {% endif %}
                        </div>

                        <!-- Email field -->
                        <div class="form-group">
                            <div class="form-input-group">
                                <input class="form-control" type="text" name="email" placeholder="Your Email" required>
                                <i class="icofont-email"></i>
                            </div>
                            {% if form.email.errors %}
                                <div class="error text-danger">{{ form.email.errors }}</div>
                            {% endif %}
                        </div>

                        <!-- Subject field -->
                        <div class="form-group">
                            <div class="form-input-group">
                                <input class="form-control" type="text" name="subject" placeholder="Your Subject" required>
                                <i class="icofont-book-mark"></i>
                            </div>
                            {% if form.subject.errors %}
                                <div class="error text-danger">{{ form.subject.errors }}</div>
                            {% endif %}
                        </div>

                        <!-- Message field -->
                        <div class="form-group">
                            <div class="form-input-group">
                                <textarea class="form-control" name="message" placeholder="Your Message" required></textarea>
                                <i class="icofont-paragraph"></i>
                            </div>
                            {% if form.message.errors %}
                                <div class="error text-danger">{{ form.message.errors }}</div>
                            {% endif %}
                        </div>

                        <!-- Submit button -->
                        <button type="submit" class="form-btn-group">
                            <i class="fas fa-envelope"></i>
                            <span>Send Message</span>
                        </button>
                    </form>

                </div>
            </div>

          
        </div>
    </section>
    
    {% include 'site/includes/newsletter.html' %}
    

    {% endblock content %}



    {% block js %}
      
    {% endblock js %}