{# load formvalidation config #}
{% set aFvDataAttrNames = oViewConf.getViewThemeParam("aFvDataAttrNames") %}

{% set editval = oView.getUserData() %}
<form id="c4s-contact-form" action="{{ oViewConf.getSslSelfLink()|raw }}" method="post" role="form" novalidate="novalidate">
    {{ oViewConf.getHiddenSid()|raw }}
    <input type="hidden" name="fnc" value="send"/>
    <input type="hidden" name="cl" value="contact"/>

    {% include "message/inputvalidation.html.twig" with {aErrors: aErrors.oxuser__oxfname} %}

    {% block form_contact_salutation %}
        <div class="row mb-3">
            <label class="col-md-2 col-form-label" for="c4s-contact-salutation">{{ translate({ ident: "TITLE" }) }}</label>
            <div class="col-md-10">
                {% include "form/fieldset/salutation.html.twig" with {name: "editval[oxuser__oxsal]", value: editval.oxuser__oxsal, id: "c4s-contact-salutation", class: "form-select", required: false} %}
            </div>
        </div>
    {% endblock %}

    {% block form_contact_firstname %}
        <div class="row mb-3">
            <label class="col-md-2 col-form-label c4s-label-required" for="c4s-contact-firstname">{{ translate({ ident: "FIRST_NAME" }) }}</label>
            <div class="col-md-10">
                <input type="text" name="editval[oxuser__oxfname]" size="70" maxlength="255" value="{{ editval.oxuser__oxfname }}"
                       id="c4s-contact-firstname"
                       class="form-control{% if aErrors.oxuser__oxfname %} is-invalid{% endif %}"
                       required="required"
                       {% if aFvDataAttrNames %}
                           {{ aFvDataAttrNames.NotEmpty }}="true"
                           {{ aFvDataAttrNames.NotEmptyTrim }}="true"
                           {{ aFvDataAttrNames.NotEmptyMessage }}="{{ translate({ ident: "FORM_VALIDATION_REQUIRED" }) }}"
                       {% endif %}
                >
            </div>
        </div>
    {% endblock %}

    {% block form_contact_lastname %}
        <div class="row mb-3">
            <label class="col-md-2 col-form-label c4s-label-required" for="c4s-contact-lastname">{{ translate({ ident: "LAST_NAME" }) }}</label>
            <div class="col-md-10">
                <input type="text" name="editval[oxuser__oxlname]" size=70 maxlength=255 value="{{ editval.oxuser__oxlname }}"
                       id="c4s-contact-lastname"
                       class="form-control{% if aErrors.oxuser__oxlname %} is-invalid{% endif %}"
                       required="required"
                       {% if aFvDataAttrNames %}
                           {{ aFvDataAttrNames.NotEmpty }}="true"
                           {{ aFvDataAttrNames.NotEmptyTrim }}="true"
                           {{ aFvDataAttrNames.NotEmptyMessage }}="{{ translate({ ident: "FORM_VALIDATION_REQUIRED" }) }}"
                       {% endif %}
                >
            </div>
        </div>
    {% endblock %}

    {% block form_contact_username %}
        <div class="row mb-3">
            <label class="col-md-2 col-form-label c4s-label-required" for="c4s-contact-username">{{ translate({ ident: "EMAIL" }) }}</label>
            <div class="col-md-10">
                <input type="email" name="editval[oxuser__oxusername]" size=70 maxlength=255 value="{{ editval.oxuser__oxusername }}"
                       id="c4s-contact-username"
                       class="form-control{% if aErrors.oxuser__oxusername %} is-invalid{% endif %}"
                       required="required"
                       {% if aFvDataAttrNames %}
                           {{ aFvDataAttrNames.NotEmpty }}="true"
                           {{ aFvDataAttrNames.NotEmptyTrim }}="true"
                           {{ aFvDataAttrNames.NotEmptyMessage }}="{{ translate({ ident: "FORM_VALIDATION_REQUIRED" }) }}"
                           {{ aFvDataAttrNames.Email }}="true"
                           {{ aFvDataAttrNames.EmailMessage }}="{{ translate({ ident: "FORM_VALIDATION_VALIDEMAIL" }) }}"
                       {% endif %}
                >
            </div>
        </div>
    {% endblock %}

    {% block form_contact_subject %}
        <div class="row mb-3">
            <label class="col-md-2 col-form-label c4s-label-required" for="c4s-contact-subject">{{ translate({ ident: "SUBJECT" }) }}</label>
            <div class="col-md-10">
                <input type="text" name="c_subject" size="70" maxlength=80 value="{{ oView.getContactSubject() }}"
                       id="c4s-contact-subject"
                       class="form-control{% if aErrors and not oView.getContactSubject() %} is-invalid{% endif %}"
                       required="required"
                       {% if aFvDataAttrNames %}
                           {{ aFvDataAttrNames.NotEmpty }}="true"
                           {{ aFvDataAttrNames.NotEmptyTrim }}="true"
                           {{ aFvDataAttrNames.NotEmptyMessage }}="{{ translate({ ident: "FORM_VALIDATION_REQUIRED" }) }}"
                       {% endif %}
                >
            </div>
        </div>
    {% endblock %}

    {% block form_contact_message %}
        <div class="row mb-3">
            <label class="col-md-2 col-form-label" for="c4s-contact-message">{{ translate({ ident: "MESSAGE" }) }}</label>
            <div class="col-md-10">
                <textarea rows="15" cols="70" name="c_message" id="c4s-contact-message" class="form-control">{{ oView.getContactMessage() }}</textarea>
            </div>
        </div>
    {% endblock %}

    {% block form_contact_captcha %}
        {% block captcha_form %}{% endblock %} {# block name from oxid standard captcha module oxcaptcha #}
    {% endblock %}

    {% block form_contact_submit %}
        <div class="row mb-3">
            <div class="col-md-10 offset-sm-2">
                <div class="alert alert-info" role="alert">{{ translate({ ident: "COMPLETE_MARKED_FIELDS" }) }}</div>
                <button class="btn btn-primary" type="submit">
                    <i class="fa-solid fa-envelope"></i> {{ translate({ ident: "SEND" }) }}
                </button>
            </div>
        </div>
    {% endblock %}
</form>