{% import "_includes/forms" as forms %}

{# @todo - why does name field have 'address' naming conventions? #}
{% if field.displayMultipleFields %}

    {% set addressInput %}

        <div class="sproutaddressfield-input-wrapper">

            {% if field.displayPrefix %}
                <div class="sproutaddressfield-input sproutaddressfield-input-prefix">
                    {{ forms.textField({
                        label: 'Prefix'|t('sprout-fields'),
                        name: name ~ '[address][prefix]',
                        value: value is defined ? value.prefix : ''
                    }) }}
                </div>
            {% endif %}

            <div class="sproutaddressfield-input sproutaddressfield-input-firstname">
                {{ forms.textField({
                    label: 'First'|t('sprout-fields'),
                    name: name ~ '[address][firstName]',
                    value: value is defined ? value.firstName : ''
                }) }}
            </div>

            {% if field.displayMiddleName %}
                <div class="sproutaddressfield-input sproutaddressfield-input-middlename">
                    {{ forms.textField({
                        label: 'Middle'|t('sprout-fields'),
                        name: name ~ '[address][middleName]',
                        value: value is defined ? value.middleName : ''
                    }) }}
                </div>
            {% endif %}

            <div class="sproutaddressfield-input sproutaddressfield-input-lastname">
                {{ forms.textField({
                    label: 'Last'|t('sprout-fields'),
                    name: name ~ '[address][lastName]',
                    value: value is defined ? value.lastName : ''
                }) }}
            </div>

            {% if field.displaySuffix %}
                <div class="sproutaddressfield-input sproutaddressfield-input-suffix">
                    {{ forms.textField({
                        label: 'Suffix'|t('sprout-fields'),
                        name: name ~ '[address][suffix]',
                        value: value is defined ? value.suffix : ''
                    }) }}
                </div>
            {% endif %}
        </div>
    {% endset %}

    {{ forms.field({
    }, addressInput) }}

{% else %}

    {{ forms.text({
        name: name ~ '[address][fullNameShort]',
        value: value is defined ? value.getFullName() : ''
    }) }}

{% endif %}

<style>
    .sproutaddressfield-input-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .sproutaddressfield-input {
        flex-grow: 1;
        margin-right: 10px;
        width: 26%;
    }

    #fields-{{ id }}-field .field {
        margin-bottom: 0;
    }

    .sproutaddressfield-input .heading > label {
        font-weight: normal;
    }

    .sproutaddressfield-input:last-of-type {
        margin-right: 0;
    }

    .sproutaddressfield-input-prefix,
    .sproutaddressfield-input-suffix {
        width: 11%;
    }

    @media (max-width: 600px) {
        .sproutaddressfield-input-wrapper {
            flex-direction: column;
        }

        .sproutaddressfield-input {
            flex-grow: 1;
            margin-left: 0;
            margin-top: 10px;
            width: 100%;
        }

        .sproutaddressfield-input .heading,
        .sproutaddressfield-input .input {
            float: left;
        }

        .sproutaddressfield-input .heading {
            padding-top: 6px;
            padding-right: 2%;
            text-align: right;
            width: 20%;
        }

        .sproutaddressfield-input .input {
            width: 78%;
        }
    }
</style>