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

{{ forms.autosuggestField({
    label: "Hostname"|t('app'),
    id: 'host',
    name: 'host',
    suggestEnvVars: true,
    value: adapter.host,
    required: true,
    errors: adapter.getErrors('host')
}) }}

{{ forms.autosuggestField({
    label: "Port"|t('app'),
    id: 'port',
    name: 'port',
    suggestEnvVars: true,
    value: adapter.port,
    size: 20,
    errors: adapter.getErrors('port')
}) }}

{{ forms.booleanMenuField({
    label: "Use authentication"|t('app'),
    id: 'useAuthentication',
    name: 'useAuthentication',
    includeEnvVars: true,
    value: adapter.useAuthentication,
    toggle: 'auth-credentials'
}) }}

<div id="auth-credentials" class="nested-fields{% if not adapter.useAuthentication %} hidden{% endif %}">
    {{ forms.autosuggestField({
        label: "Username"|t('app'),
        id: 'username',
        name: 'username',
        suggestEnvVars: true,
        value: adapter.username,
        errors: adapter.getErrors('username')
    }) }}

    {{ forms.autosuggestField({
        label: "Password"|t('app'),
        id: 'password',
        name: 'password',
        suggestEnvVars: true,
        value: adapter.password,
        errors: adapter.getErrors('password')
    }) }}
</div>