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

{% block title %}{{ 'contact.title'|trans({}, 'legal') }} - {{ parent() }}{% endblock %}

{% block body %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h1 class="card-title mb-0">
                        <i class="fas fa-envelope me-2"></i>
                        {{ 'contact.heading'|trans({}, 'legal') }}
                    </h1>
                    <p class="card-text mb-0 mt-2 opacity-75">
                        {{ 'contact.response_time'|trans({}, 'legal') }}
                    </p>
                </div>
                
                <div class="card-body">
                    {% for message in app.flashes('success') %}
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    {% endfor %}
                    
                    {% for message in app.flashes('error') %}
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    {% endfor %}
                    
                    <div class="row">
                        <!-- Formulaire de contact -->
                        <div class="col-md-8">
                            {{ form_start(contactForm, {'attr': {'class': 'contact-form', 'novalidate': 'novalidate'}}) }}
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    {{ form_label(contactForm.name, 'contact.form.name'|trans({}, 'legal'), {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                    {{ form_widget(contactForm.name) }}
                                    {{ form_errors(contactForm.name) }}
                                </div>
                                <div class="col-md-6 mb-3">
                                    {{ form_label(contactForm.email, 'contact.form.email'|trans({}, 'legal'), {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                    {{ form_widget(contactForm.email) }}
                                    {{ form_errors(contactForm.email) }}
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    {{ form_label(contactForm.phone, 'contact.form.phone'|trans({}, 'legal'), {'label_attr': {'class': 'form-label'}}) }}
                                    {{ form_widget(contactForm.phone) }}
                                    {{ form_errors(contactForm.phone) }}
                                </div>
                                <div class="col-md-6 mb-3">
                                    {{ form_label(contactForm.subject, 'contact.form.subject'|trans({}, 'legal'), {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                    {{ form_widget(contactForm.subject) }}
                                    {{ form_errors(contactForm.subject) }}
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                {{ form_label(contactForm.message, 'contact.form.message'|trans({}, 'legal'), {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                {{ form_widget(contactForm.message) }}
                                {{ form_errors(contactForm.message) }}
                                <div class="form-text">
                                    {{ 'contact.form.message_help'|trans({}, 'legal') }}
                                </div>
                            </div>
                            
                            {{ form_widget(contactForm.referrer) }}
                            
                            <div class="d-grid gap-2">
                                {{ form_widget(contactForm.submit, {'attr': {'class': 'btn btn-primary btn-lg'}}) }}
                            </div>
                            
                            {{ form_end(contactForm) }}
                        </div>
                        
                        <!-- Informations de contact -->
                        <div class="col-md-4">
                            <div class="contact-info">
                                <h5 class="text-primary fw-bold mb-3">
                                    <i class="fas fa-info-circle me-2"></i>
                                    {{ 'contact.info.title'|trans({}, 'legal') }}
                                </h5>
                                
                                <div class="contact-item mb-3">
                                    <h6 class="fw-bold">
                                        <i class="fas fa-phone text-primary me-2"></i>
                                        {{ 'contact.info.phone'|trans({}, 'legal') }}
                                    </h6>
                                    <p class="mb-0">01 23 45 67 89</p>
                                    <small class="text-muted">{{ 'contact.info.phone_hours'|trans({}, 'legal') }}</small>
                                </div>
                                
                                <div class="contact-item mb-3">
                                    <h6 class="fw-bold">
                                        <i class="fas fa-envelope text-primary me-2"></i>
                                        {{ 'contact.info.email'|trans({}, 'legal') }}
                                    </h6>
                                    <p class="mb-0">
                                        <a href="mailto:contact@antiquites-en-france.com">
                                            contact@antiquites-en-france.com
                                        </a>
                                    </p>
                                </div>
                                
                                <div class="contact-item mb-3">
                                    <h6 class="fw-bold">
                                        <i class="fas fa-clock text-primary me-2"></i>
                                        {{ 'contact.info.response_time'|trans({}, 'legal') }}
                                    </h6>
                                    <p class="mb-0">{{ 'contact.info.response_delay'|trans({}, 'legal') }}</p>
                                    <small class="text-muted">{{ 'contact.info.response_note'|trans({}, 'legal') }}</small>
                                </div>
                                
                                <div class="contact-item">
                                    <h6 class="fw-bold">
                                        <i class="fas fa-question-circle text-primary me-2"></i>
                                        {{ 'contact.info.faq'|trans({}, 'legal') }}
                                    </h6>
                                    <p class="mb-0">
                                        <a href="{{ path('legal_faq') }}">
                                            {{ 'contact.info.faq_link'|trans({}, 'legal') }}
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card-footer bg-light">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <p class="mb-0 text-muted">
                                <i class="fas fa-shield-alt me-1"></i>
                                {{ 'contact.privacy_notice'|trans({}, 'legal') }}
                            </p>
                        </div>
                        <div class="col-md-4 text-md-end">
                            <a href="{{ path('legal_privacy') }}" class="btn btn-outline-secondary btn-sm">
                                {{ 'contact.privacy_link'|trans({}, 'legal') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.contact-form .form-control:focus,
.contact-form .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.contact-info {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
    height: fit-content;
}

.contact-item {
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.contact-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.alert {
    border: none;
    border-radius: 0.5rem;
}

.card {
    border: none;
    border-radius: 1rem;
}

.card-header {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}
</style>
{% endblock %}