{% extends 'base.html' %}
{% block title %}Contact{% endblock title %}
{% block content %}
<div class="container col-12" style="margin-top:5vh; min-height:100vh; margin-bottom:5vh">
    <div class="col-md-12 col-sm-12">
        <h3 class="h3 centered"> Localisation: Nickel Oil Station, TKC</h3>
        <div class="mapouter centered">
            <div class="gmap_canvas centered d-flex flex-direction-column justify-content-center align-items-center">
                <iframe width="800" height="300" id="gmap_canvas" src="https://maps.google.com/maps?q=Nickel%20Oil%20Station,%20TKC&t=k&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
            </div>
        </div>
    </div>
    <div class="col-md-12 col-sm-12">
        <h3 class="h3 centered">Envoyez nous un message</h3>
        <form action="" method="POST"> {% csrf_token %}
                <div class="form-group col-sm-6 col-md-6">
                    <label for="inputEmail4">Email</label>
                    <input type="email" name="email" class="form-control" id="mail" placeholder="Email" required>
                </div>
                <div class="form-group col-md-6 col-sm-6">
                    <label for="inputAddress">Name</label>
                    <input type="text" class="form-control" id="inputAddress" placeholder="Name">
                </div>
                <div class="form-group col-md-6 col-sm-6">
                    <label for="inputAddress2">Region</label>
                    <input type="text" class="form-control" id="inputAddress2" placeholder="Center">
                </div>
                <div class="form-group col-md-6 col-sm-6">
                    <label for="inputCity">Adresse</label>
                    <input type="text" class="form-control" id="inputCity" placeholder="Yaounde TKC">
                </div>
                <div class="form-group col-md-9 col-sm-12">
                    <div class="form-check p-0">
                        <label for="message"> Message</label> <br />
                        <textarea class="col-md-8" name="message" id="message" cols="" rows="7" required></textarea>
                    </div>
                </div>
            </div>
            <div class="centered col-md-6">
                <button type="submit col-2" class="w-2 mt-10px btn btn-primary centered">Send</button>
            </div>

        </form>
    </div>
</div>
{% endblock content %}