{% block element_contact_form %}
<form method="POST" class="p-4 border rounded shadow-sm bg-light" style="max-width: 400px; margin: 0 auto;"
      data-aos="fade-up">

    <h2 class="mb-3">Kontaktformular</h2>

    <div class="mb-3">
        <input type="text" name="name" id="name" placeholder="Ihr Name" required class="form-control">
    </div>

    <div class="mb-3">
        <input type="email" name="email" id="email" placeholder="Ihre E-Mail" required class="form-control">
    </div>

    <div class="mb-3">
        <textarea name="text" id="text" placeholder="Ihre Nachricht" required class="form-control"
                  style="height: 200px; resize: none;"></textarea>
    </div>

    {% include '@TerraFlowCMS/partials/friendly_captcha_widget.html.twig' with { captcha_context: 'contact' } %}

    <div class="form-check mb-3">
        <input type="checkbox" name="agb" id="agb" class="form-check-input">
        <label for="agb" class="form-check-label">
            Ich habe die <a href="/contact-form/terms" target="_blank">AGB</a> & <a href="/contact-form/privacy">Datenschutzerklärung</a>
            gelesen & akzeptiere diese.
        </label>
    </div>

    <input type="hidden" name="action" id="action" value="sendContactForm">

    <div class="text-center">
        <button type="submit" class="btn btn-primary text-black w-100">Absenden</button>
    </div>
</form>
{% endblock %}