{% extends 'base.html.twig' %}

{% block title %}Next Level Garage - Contact{% endblock %}

{% block body %}
<section class="page_title ds s-pt-105 s-pb-50 s-pt-lg-115 s-pb-lg-60">
    <div class="divider-3 d-none d-lg-block"></div>
    <div class="container">
        <div class="row">

            <div class="col-md-12">
                <h1 class="bold text-center text-lg-left">Contact</h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ path('homepage') }}">Acasă</a>
                    </li>
                    <li class="breadcrumb-item active">
                        Contact
                    </li>
                </ol>
            </div>

        </div>
    </div>
</section>

<section class="ls map-left container-px-0">
    <div class="container-fluid">
        <div class="row align-items-center c-gutter-85">
            <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2855.977569981765!2d23.790581215738325!3d44.289850119046264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4752d7d04706864b%3A0xda4afd48d7f62073!2sStrada%20R%C3%A2ului%20391%2C%20Craiova!5e0!3m2!1sro!2sro!4v1611477244135!5m2!1sro!2sro" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
            </div>
            <div class="col-xl-4 col-lg-5 col-md-5 col-12">
                <div class="contact-item animate animated scaleAppear" data-animation="scaleAppear">
                    {%  if (sent) %}
                        <div class="alert alert-success" role="alert">
                            Mesaj trimis cu succes.
                        </div>
                    {% endif %}
                    <h3 class="special-heading">Contact</h3>
                    <div class="divider-35"></div>
                    <form class="contact-form c-mb-30 c-gutter-20" method="post">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group has-placeholder">
                                    <label for="name">Nume </label>
                                    <input type="text" aria-required="true" size="30" value="" name="form[name]" id="name" class="form-control" placeholder="Nume">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group has-placeholder">
                                    <label for="phone">Telefon </label>
                                    <input type="text" aria-required="true" size="30" value="" name="form[phone]" id="phone" class="form-control" placeholder="Telefon">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group has-placeholder">
                                    <label for="email">Email</label>
                                    <input type="email" aria-required="true" size="30" value="" name="form[email]" id="email" class="form-control" placeholder="Email">
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group has-placeholder textarea">
                                    <label for="message">Mesaj</label>
                                    <textarea aria-required="true" rows="4" cols="45" name="form[message]" id="message" class="form-control" placeholder="Mesaj"></textarea>
                                    {{ form_row(form._token) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 mt-20">
                                <div class="form-group">
                                    <button type="submit" id="contact_form_submit" name="contact_submit" class="btn btn-small btn-outline-maincolor"><span>Trimite</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--.col-* -->
        </div>
    </div>
</section>

{% endblock %}