{% extends "base.html" %}

{% block title %}Soporte{% endblock %}

{% block content %}

<div class="row justify-content-center">
    <div class="col-md-8">
        <h1 class="text-center mb-4">🛠️ Soporte Técnico</h1>
        <p class="text-center text-muted">¿Tienes algún problema o duda? Completa el formulario y te responderemos lo
            antes posible.</p>

        <form method="POST" action="{{ url_for('soporte') }}" class="mt-4">
            {{ form.hidden_tag() }}

            <div class="mb-3">
                {{ form.nombre.label(class="form-label") }}
                {{ form.nombre(class="form-control" + (" is-invalid" if form.nombre.errors else "")) }}
                {% if form.nombre.errors %}
                <div class="invalid-feedback">
                    {% for error in form.nombre.errors %}
                    {{ error }}
                    {% endfor %}
                </div>
                {% endif %}
            </div>

            <div class="mb-3">
                {{ form.email.label(class="form-label") }}
                {{ form.email(class="form-control" + (" is-invalid" if form.email.errors else "")) }}
                {% if form.email.errors %}
                <div class="invalid-feedback">
                    {% for error in form.email.errors %}
                    {{ error }}
                    {% endfor %}
                </div>
                {% endif %}
            </div>

            <div class="mb-3">
                {{ form.mensaje.label(class="form-label") }}
                {{ form.mensaje(class="form-control" + (" is-invalid" if form.mensaje.errors else ""), rows=5) }}
                {% if form.mensaje.errors %}
                <div class="invalid-feedback">
                    {% for error in form.mensaje.errors %}
                    {{ error }}
                    {% endfor %}
                </div>
                {% endif %}
            </div>

            <div class="d-grid">
                {{ form.submit(class="btn btn-primary btn-lg") }}
            </div>
        </form>
    </div>
</div>

{% endblock %}