{% set classes = settings.classes | merge([ base_styles.base ]) | join(' ') | trim %}
{% set id_attribute = settings._cssid is not empty ? 'id=' ~ settings._cssid | e('html_attr') : '' %}
{% set interactions_attribute = interactions is not empty ? 'data-interactions=' ~ interactions | json_encode | e('html_attr') : '' %}
{% set placeholder_attribute = settings.placeholder is not empty ? 'placeholder=' ~ settings.placeholder | e('html_attr') : '' %}
{% set required_attribute = settings.required ? 'required' : '' %}
{% set readonly_attribute = settings.readonly ? 'readonly' : '' %}
{% set name = settings.name is not empty ? settings.name : settings._cssid is not empty ? settings._cssid : id %}
{% set name_attribute = 'name=' ~ name | e('html_attr') %}

{% set country_enabled = settings.country_code and settings.type == 'tel' %}
{% set mask_control = settings.fme_mask_control|default('mask') %}
{% set mask_enabled = settings.type == 'text' and mask_control != 'mask' %}
{% set mask_auto_ph = settings.fme_mask_auto_placeholders|default(false) ? 'yes' : '' %}
{% set conditions_enabled = settings.cfef_logic|default(false) %}
{% set field_group_class = 'elementor-field-group elementor-field-group-' ~ name ~ ' cfef-atomic-field-group' %}

{# create a container tag for conditional when conditional enable #}

{% if conditions_enabled %}
<div class="{{ field_group_class | e('html_attr') }}" data-field-id="{{ name | e('html_attr') }}">
{% endif %}

{# create a container tag for country when country enable #}

{% if country_enabled %}
<div class="ccfef-wrapper"
     data-default="{{ settings.default_country }}"
     data-include="{{ settings.include }}"
     data-exclude="{{ settings.exclude }}"
     data-strictMode="{{settings.strict_mode}}"
     data-dialCodeVisibilty={{settings.dial_code_visibility}}>
{% endif %}


{# create a container tag for mask when mask enable #}

{% if mask_enabled %}
<div class="ccfef-mask-wrapper">
{% endif %}

<input 
    {{ id_attribute }}
    {{ name_attribute }}
    class="{{ classes }} {{ country_enabled ? 'ccfef-phone-input' : '' }}{% if mask_enabled %} fme-mask-input mask_control_@{{ mask_control }} money_mask_format_@{{ settings.fme_money_mask_format|default('dot') }} mask_prefix_@{{ settings.fme_money_mask_prefix|default('') }} mask_decimal_places_@{{ settings.fme_money_mask_decimal_places|default('2') }} mask_time_mask_format_@{{ settings.fme_time_mask_format|default('one') }} fme_phone_format_@{{ settings.fme_phone_format|default('phone_usa') }} credit_card_options_@{{ settings.fme_credit_card_options|default('hyphen') }} mask_auto_placeholder_@{{ mask_auto_ph }} fme_brazilian_formats_@{{ settings.fme_brazilian_formats|default('fme_cpf') }}{% endif %}"
    type="{{ settings.type }}"
    data-interaction-id="{{ interaction_id | default(id) }}"
    {{ settings.attributes | raw }} 
    {{ interactions_attribute }}
    {{ placeholder_attribute | raw }}
    {{ required_attribute }}
    {{ readonly_attribute }}

    {% if country_enabled %}
        data-ccfef="true"
    {% endif %}
    {% if mask_enabled %}
        data-mask="{{ mask_control }}"
    {% endif %}
/>

{% if mask_enabled %}
</div>
{% endif %}
{% if country_enabled %}
</div>
{% endif %}

{% if conditions_enabled %}
{% set logic_data_json = settings.cfef_logic_repeater is not empty ? settings.cfef_logic_repeater : '[]' %}
{% set safe_field_key = name|replace({'\\':'\\\\','"':'\\"'}) %}
<template class="cfef_logic_data_js cfef-atomic-field-logic cfef-hidden" data-field-id="{{ name | e('html_attr') }}">
{"{{ safe_field_key }}":{"display_mode":"{{ settings.cfef_logic_mode|default('show') | e('js') }}","fire_action":"{{ settings.cfef_logic_meet|default('All') | e('js') }}","logic_data":{{ logic_data_json | raw }}}}
</template>
</div>
{% endif %}