{% extends 'base.html' %} 
    {% load static %} 
    {% block headblock %}
<title>Contact Us</title>
<meta name="description" content="Get in touch with us!" >

{% endblock %} 
    {% block content %}
     <!-- breadcrumb start-->
    <section class="breadcrumb"><img class="img-fluid img-src" src="{% static  'main/assets/images/herointro/3.webp' %}" alt="">
        <div class="container">
            <div class="grid grid-cols-12">
                <div class="col-span-12">
                    <div class="breadcrumb-contain">
                        <h1 data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">Contact us</h1>
                        <ul data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">
                            <li><a href="{% url 'main:home' %}">Home<i class="bi bi-chevron-right"></i></a></li>
                            <li><a href="#">Contact us</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb end-->
    <!-- contact us start-->
    <section class="getin-touch space-py-100">
        <div class="container">
            <div class="grid grid-cols-12 cdx-gap">
                <div class="col-span-12 lg:col-span-4">
                    <div class="grid grid-cols-12 cdx-gap">
                        <div class="col-span-12 lg:col-span-12 sm:col-span-6">
                            <div class="contact-grid">
                                <div class="icon-wrap"><i data-feather="map-pin"></i></div>
                                <div class="detail-wrap">
                                    <h4>Office Address</h4>
                                    <p>Cité DOUZI 03, N° 246 Sorecal</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-span-12 lg:col-span-12 sm:col-span-6">
                            <div class="contact-grid">
                                <div class="icon-wrap"><i data-feather="phone"></i></div>
                                <div class="detail-wrap">
                                    <h4>Call Us</h4>
                                    <p> <a href="tel:+213799719619">+213 799 71 96 19</a></p>
                                </div>
                            </div>
                        </div>
                        <div class="col-span-12 lg:col-span-12 sm:col-span-6">
                            <div class="contact-grid">
                                <div class="icon-wrap"><i data-feather="mail"></i></div>
                                <div class="detail-wrap">
                                    <h4>Email Us</h4>
                                    <p><a href="mailto:admin@example.com">info@creativeschools.net</a></p>
                                </div>
                            </div>
                        </div>
                        <div class="col-span-12 lg:col-span-12 sm:col-span-6">
                            <div class="contact-grid">
                                <div class="icon-wrap"><i data-feather="clock"></i></div>
                                <div class="detail-wrap">
                                    <h4>Office Time</h4>
                                    <p>Sat - Fri (08AM - 10PM)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-8 align-center">
                    <div class="contact-form">
                        <div class="touch-header">
                            <h2>Get In Touch</h2>
                            <p>
                                It is a long established fact that a reader will be distracted by the readablecontent of a page when looking at its layout.</p>
                        </div>
                        <form method="post">
                            {% csrf_token %}
                            <div class="form-group">
                                <div class="group-small">
                                    <div>
                                        {{ form.name }}
                                        {% if form.name.errors %}
                                            <div class="text-danger">
                                                {{ form.name.errors }}
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div>
                                        {{ form.email }}
                                        {% if form.email.errors %}
                                            <div class="text-danger">
                                                {{ form.email.errors }}
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                {{ form.phone_number }}
                                {% if form.phone_number.errors %}
                                    <div class="text-danger">
                                        {{ form.phone_number.errors }}
                                    </div>
                                {% endif %}
                            </div>
                            <div class="form-group">
                                {{ form.subject }}
                                {% if form.subject.errors %}
                                    <div class="text-danger">
                                        {{ form.subject.errors }}
                                    </div>
                                {% endif %}
                            </div>
                            <div class="form-group mb-0">
                               {{ form.message }}
                                {% if form.message.errors %}
                                    <div class="text-danger">
                                        {{ form.message.errors }}
                                    </div>
                                {% endif %}
                            </div>
                            <button class="btn btn-primary btn-md" type="submit"><i class="bi bi-send"></i> Send Message</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- contact us end-->
   {% endblock %}