{% extends 'template.html' %}

{% block css %}
<link rel="stylesheet" href="{{ url_for('static', filename='f_contact/form.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='f_contact/contact.css') }}">
{% endblock css %}

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

{% block body %}



<div class="form-container" data-aos="zoom-out-down" data-aos-delay="0" data-aos-duration="800" data-aos-easing="ease-in-out">

    <div class="form-header">
        <h2>Contáctanos</h2>
        <p>Déjanos tus datos y nos pondremos en contacto contigo.</p>
        <img src="{{ url_for( 'static', filename='y_img/logos/circulo_logo.png' ) }}" alt="">
    </div>
    
    <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", type="email") }}
        </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(placeholder="55 1234 5678", class_="form-control", maxlength="16", pattern="^\d{2}\s\d{4}\s\d{4}$", title="Formato ejemplo: 55 1234 5678") }}
        </div>

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

        <!-- {# rol del contacto dentro de la empresa #} -->
        <div class="form-row">
            {{ 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(placeholder="Sector de tu empresa", class_="form-select", maxlength="40") }}
        </div>

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

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

{% endblock body %}


{% block js %}

<script type="module" src="{{ url_for('static', filename='f_contact/re_phone.js') }}"></script>

<!-- {# if flash #} -->
{% include 'z_comps/if_flash.html' %}

<!-- {# aos script #} -->
{% include 'z_comps/aos_script.html' %}

{% endblock js %}