{%- set fieldId = fieldId ?? ((id ?? false) ? "#{id}-field" : "field#{random()}") %}
{%- set labelId = labelId ?? "#{fieldId}-label" %}
{%- set instructionsId = instructionsId ?? "#{fieldId}-instructions"  %}
{%- set status = status ?? null %}
{%- set label = label is defined and label != '__blank__' ? label : (block('label') ?? null) %}
{%- set siteId = ((craft.app.getIsMultiSite() and siteId is defined) ? siteId : null) %}
{%- set site = (siteId ? craft.app.sites.getSiteById(siteId) : null) %}
{%- set required = required ?? false %}
{%- set instructions = instructions ?? block('instructions') ?? null %}
{%- set tip = tip ?? block('tip') ?? null %}
{%- set warning = warning ?? block('warning') ?? null %}
{%- set orientation = orientation ?? (site ? site.getLocale() : craft.app.locale).getOrientation() %}
{%- set translatable = translatable ?? (site is not same as(null)) %}
{%- set errors = (errors is defined ? errors : null) -%}
{%- set fieldClass = (fieldClass ?? [])|explodeClass|merge([
    'field',
    (first is defined and first ? 'first' : null),
    (errors ? 'has-errors' : null),
])|filter %}
{%- set showAttribute = (attribute ?? false) and (currentUser.admin ?? false) and currentUser.getPreference('showFieldHandles') %}


{%- set fieldAttributes = {
    class: fieldClass,
    id: fieldId,
    aria: {
        describedby: instructions ? instructionsId : false,
    }
}|merge(fieldAttributes ?? [], recursive=true) %}

{%- if block('attr') is defined %}
    {%- set fieldAttributes = fieldAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
{% endif %}

{%- set inputContainerAttributes = {
    class: ['input', orientation, errors ? 'errors']|filter,
}|merge(inputContainerAttributes ?? [], recursive=true) %}

<div {{ attr(fieldAttributes) }}>
    {% if status %}
        {{ tag('div', {
            class: ['status-badge', status[0]],
            text: status[1][0:1]|upper,
            title: status[1],
        }) }}
    {% endif %}
    {% if label or showAttribute %}
        <div class="heading">
            {% block heading %}
                {% if label %}
                    {{ tag('label', {
                        id: labelId,
                        class: required ? ['required'] : [],
                        for: id ?? null,
                        html: label,
                    }|merge(labelAttributes ?? [], recursive=true)) }}
                    {%- if translatable %}
                        {{ tag('div', {
                            class: 't9n-indicator',
                            data: {
                                icon: 'language',
                            },
                            title: translationDescription ?? 'This field is translatable.'|t('app'),
                        }) }}
                    {% endif -%}
                {% endif %}
                {% if showAttribute %}
                    <div class="flex-grow"></div>
                    {% include '_includes/forms/copytextbtn' with {
                        id: "#{fieldId}-attribute",
                        class: ['code', 'small', 'light'],
                        value: attribute,
                    } only %}
                {% endif %}
            {% endblock %}
        </div>
    {% endif %}
    {% if instructions %}
        {{ tag('div', {
            id: instructionsId,
            class: ['instructions'],
            html: instructions|md('gfm-comment')|replace('/&amp;(\\w+);/', '&$1;'),
        }) }}
    {% endif %}
    <div {{ attr(inputContainerAttributes) }}>
        {% block input %}
            {{ input|raw }}
        {% endblock %}
    </div>
    {% if tip %}
        {{ tag('p', {
            class: ['notice', 'with-icon'],
            html: tip|md(inlineOnly=true)|replace('/&amp;(\\w+);/', '&$1;'),
        }) }}
    {% endif %}
    {% if warning %}
        {{ tag('p', {
            class: ['warning', 'with-icon'],
            html: warning|md(inlineOnly=true)|replace('/&amp;(\\w+);/', '&$1;'),
        }) }}
    {% endif %}
    {% include "_includes/forms/errorList" with { errors: errors } %}
</div>