{% extends "ncs/layout.html" %}
{% load static %}

{% block body %}

    <div class="container px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 p-1 bg-1 border">
            <h2 class="mb-0">Contact us!</h2>
           
            <form class="was-validated" action="{% url 'contact' %}" method="POST">
                {% csrf_token %}
                {% if message %}
                    <div class="bg-{{alert}} bg-opacity-75 px-3 text-white">{{ message }}</div>
                {% endif %} 
                <hr class="mt-0">
                <div id="radio">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="Site Survey" required>
                        <label class="form-check-label" for="inlineRadio1">Site survey</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="Intranet" required>
                        <label class="form-check-label" for="inlineRadio2">Intranet</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="Web app" required>
                        <label class="form-check-label" for="inlineRadio3">webapp</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="ASANKA" required>
                        <label class="form-check-label" for="inlineRadio4">ASANKA</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="other">
                        <label class="form-check-label" for="inlineRadio5">other</label>
                    </div>                    
                </div>

                <hr>
                <div class="form-group">
                    <!--<label for="exampleFormControlInput1">Email address</label>-->
                    <input type="text" name="full-name" class="form-control" id="nameInput" placeholder="Full name" required>
                </div>
                <div class="form-group pt-3">
                    <!--<label for="exampleFormControlInput1">Email address</label>-->
                    <input type="email" name="email" class="form-control" id="emailInput" placeholder="name@example.com" required>
                </div>
                <div class="form-group pt-3">
                    <!--<label for="exampleFormControlInput1">Email address</label>-->
                    <input type="text" name="subject" class="form-control" id="subjectInput" placeholder="Subject">
                </div>
                <div class="form-group  pt-3">
                    <!--<label for="exampleFormControlTextarea1">Example textarea</label>-->
                    <textarea class="form-control" name="message" id="messageTextarea" rows="3" placeholder="Message" required></textarea>
                </div>
                <div class="form-group  pt-3">
                    <div class="col-md-5 bg-white border p-3">{{form.captcha_field}}</div>
                    
                    <!--

                      <button class='js-captcha-refresh' >Refresh Captcha</button>  
                    -->
                    
                </div>
                
                <button type="submit" class="btn btn-primary mb-2 mt-3">Send e-mail</button>
            </form>
        </div>
        <div class="row gx-4 gx-lg-5 p-3 bg-1 border text-center">
            <div class="col-lg-12 col-md-12 mb-3 mb-lg-0">
                <div class="">
                    <div>3 rue Lamartini&egrave;re, Hinche, Ha&Iuml;ti, HT5110</div> 
                    <div>2 rue Hyppolite, La Chapelle, Ha&Iuml;ti, HT4330</div>
                    <div><i class="icon-phone"></i>+509 4899 0667</div>  
                    <!--<div><a class="nounderline text-white" href="mailto:rico.mondesir@gmail.com">info@nandcs.com</a></div>-->                </div>                
            </div>
            
        </div>
        <!--<a class="btn btn-primary btn-xl m-3 p-3" href="#about">Find Out More</a>-->
    </div>
    
{% endblock %}

{% block script %}
    <script src="{% static '/ncs/css/setscripts.js' %}"></script>
{% endblock %}