{% extends 'template.html' %}
{% block css %}

{% endblock css %}

{% block navbar %}
{% include 'comps/navbar.html' %}
{% endblock navbar %}

{% block body %}

<style>
    .form-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: 'Segoe UI', Roboto, sans-serif;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 1.2rem;
}

.form-label {
    flex: 0 0 180px;
    text-align: left;
    font-weight: 500;
    color: #2d3748;
}

.form-control {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
}

.btn-primary {
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 1.5rem auto 0;
    padding: 0.75rem;
    background-color: #4299e1;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: #3182ce;
}

</style>


<div class="form-container">
    <div class="form-header">
        <h2>Contáctanos</h2>
        <p>Déjanos tus datos y nos pondremos en contacto contigo</p>
    </div>

    <!-- Mensajes Flash -->
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }}">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
    {% endwith %}
    
    <form method="POST" action="{{ url_for('contact') }}">
        {{ form.hidden_tag() }}
        {{ form.csrf_token }}

        <!-- {# Nombre #} -->
        <div class="form-row">
            {{ form.nombre.label(class_="form-label") }}
            {{ form.nombre(placeholder="Tu nombre", class_="form-control", maxlength="30") }}
        </div>

        <!-- {# Apellido #} -->
        <div class="form-row">
            {{ form.apellido.label(class_="form-label") }}
            {{ form.apellido(placeholder="Tu apellido", class_="form-control", maxlength="50") }}
        </div>

        <!-- {# Email #} -->
        <div class="form-row">
            {{ form.email.label(class_="form-label") }}
            {{ form.email(placeholder="ejemplo@email.com", class_="form-control", maxlength="35") }}
        </div>

        <!-- {# Estado #} -->
        <div class="form-row">
            {{ form.estado.label(class_="form-label") }}
            {{ form.estado(class_="form-select", maxlength="35") }}
        </div>

        <!-- {# Número telefónico #} -->
        <div class="form-row">
            {{ form.num_tel.label(class_="form-label") }}
            {{ form.num_tel(placeholder="+52 55 1234 5678", class_="form-control", maxlength="16") }}
        </div>

        <!-- {# Tamaño de la compañia #} -->
        <div class="form-row">
            {{ form.size_co.label(class_="form-label") }}
            {{ form.size_co(class_="form-select", maxlength="40") }}
        </div>

        <!-- {# rol del contacto dentro de la empresa #} -->
        <div class="form-row">
            {{ form.rol_contacto.label(class_="form-label") }}
            {{ form.rol_contacto(placeholder="Tu puesto o rol", class_="form-select", maxlength="50") }}
        </div>

        <!-- {# Sector de la empresa #} -->
        <div class="form-row">
            {{ form.industry_type.label(class_="form-label") }}
            {{ form.industry_type(placeholder="Sector de tu empresa", class_="form-select", maxlength="40") }}
        </div>

        <div class="form-row">
            {{ form.tipo_req.label(class_="form-label") }}
            {{ form.tipo_req(placeholder="Describe cómo podemos ayudarte...", class_="form-control", maxlength="250") }}
        </div>

        <button type="submit" class="btn btn-primary" >
            Enviar Mensaje
            <i class="bi bi-send-check-fill"></i>
        </button>
    </form>
</div>

{% endblock body %}