{% extends "navfoot.html" %}
{% block content %}
{% load static %}
<style>

    .custom-card {
        background: #fff;
        border-radius: 15px;
        padding: 30px;
        border: 1px solid black;
    }

    .contact-form .form-control {
        border-radius: 1rem;
    }

    .contact-form h4 {
        margin-bottom: 20px;
        text-align: center;
        color: #333;
    }

    .contact-form .btnContactSubmit {
        width: 50%;
        border: none;
        border-radius: 1rem;
        padding: 1.5%;
        font-weight: 600;
        cursor: pointer;
    }

</style>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="custom-card contact-form">
                    <div>
                        <h4 class="mb-0 text-center mb-5">Contactez-Nous</h4>
                    </div>
                    <div>
                        <form method="post" novalidate>
                            {% csrf_token %}
                            <div class="mb-3">
                                <label for="id_name" class="form-label">Name : </label>
                                {{ form.name }}
                            </div>
                            <div class="mb-3">
                                <label for="id_email" class="form-label">Email : </label>
                                {{ form.email }}
                            </div>
                            <div class="mb-3">
                                <label for="id_message" class="form-label">Message : </label> <br>
                                {{ form.message }}
                            </div>
                            <div class="text-center">
                                <button type="submit" class=" btn-danger btnContactSubmit">Envoyer</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}