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

{%block body%}

<main class="main pages">
    <div class="page-header breadcrumb-wrap">
        <div class="container">
            <div class="breadcrumb">
                <a href="index.html" rel="nofollow"><i class="fi-rs-home mr-5"></i>Home</a>
                <span></span> Pages <span></span> Contact
            </div>
        </div>
    </div>
    <div class="page-content pt-50">
        
        <section class="container mb-50  d-md-block">
            <div class="border-radius-15 overflow-hidden">
                <iframe width="100%" height="500" src="https://maps.google.com/maps?q=new york, usa&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
            </div>
        </section>
        <div class="container">
            <div class="row">
                <div class="col-xl-10 col-lg-12 m-auto">
                    <section class="mb-50">
                        <div class="row mb-60">
                            {%for info in contact_info|slice:":3"%}
                            <div class="col-md-4 mb-4 mb-md-0">
                                <h4 class="mb-15 text-brand">{{info.description}}</h4>
                                {{info.full_address|slice:"0:32"}}<br />
                                {{info.full_address|slice:"32:"}}<br />
                                <abbr title="Phone">Phone:</abbr> {{info.phone}}<br />
                                <abbr title="Email">Email: </abbr>{{info.email}}<br />
                                {%if info.map_link%}
                                <a href="{{info.map_link}}" class="btn btn-sm font-weight-bold text-white mt-20 border-radius-5 btn-shadow-brand hover-up"><i class="fi-rs-marker mr-5"></i>View map</a>
                                {%endif%}
                            </div>
                            {%endfor%}
                        </div>
                        <div class="row">
                            <div class="col-xl-8 col-lg-10 m-auto">
                                <div class="contact-from-area padding-20-row-col">
                                    {% if messages %}
                                    {% for message in messages %}
                      
                                    <div  id="message"  class="mt-30 alert align-middle alert-{{message.tags}}">
                                       
                                        <span class="align-middle"> {{message}}</span>
                                    </div>
                      
                                    {% endfor %}
                                    {% endif %}
                                    <h2 class="mb-10 text-center">Leave A Message</h2>
                                    <p class="text-muted  text-center mb-30 font-sm">Our staff will call back later and answer your questions.</p>
                                    <form class="contact-form-style mt-30" id="contact-form" method="POST" action="{%url 'contact:contact' %}">
                                        {% csrf_token %}
                                        <div class="row">
                                            <div class="col-lg-6 col-md-6">
                                                <div class="input-style mb-20">
                                                    <input name="name" placeholder="First Name" type="text" required/>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-md-6">
                                                <div class="input-style mb-20">
                                                    <input name="email" placeholder="Your Email" type="email" required/>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-md-6">
                                                <div class="input-style mb-20">
                                                    <input name="phone" placeholder="Your Phone" type="tel" required/>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-md-6">
                                                <div class="input-style mb-20">
                                                    <input name="subject" placeholder="Subject" type="text" required/>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-md-12">
                                                <div class="textarea-style mb-30">
                                                    <textarea name="message" placeholder="Message" required></textarea>
                                                </div>
                                                <button class="submit submit-auto-width" type="submit">Send message</button>
                                            </div>
                                        </div>
                                    </form>
                                    <p class="form-messege"></p>
                                </div>
                            </div>
                            
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</main>

{%endblock body%}