{% set classes = ['aae-a-countdown', 'e-con', 'e-atomic-element', base_styles.base] | merge(settings.classes | default([])) | join(' ') %}
{% set show_separator = (settings.show_separator is defined and settings.show_separator == false) ? 'no' : 'yes' %}
{% set layout = settings.layout | default('horizontal') %}

<div class="{{ classes }} {{ editor_classes | default('') }}"
    data-id="{{ id }}"
    data-element_type="{{ type }}"
    data-e-type="{{ type }}"
    data-interaction-id="{{ interaction_id | default('') }}"
    data-due-date="{{ settings.due_date | default('') | e('html_attr') }}"
    data-expire-title="{{ settings.expire_title | default('') | e('html_attr') }}"
    data-expire-desc="{{ settings.expire_desc | default('') | e('html_attr') }}"
    data-layout="{{ layout }}"
    data-show-separator="{{ show_separator }}"
    {% if settings._cssid is defined and settings._cssid is not empty %}
        id="{{ settings._cssid | e('html_attr') }}"
    {% endif %}
    {% if settings.attributes is defined and settings.attributes is not empty %}
        {{ settings.attributes | raw }}
    {% endif %}
    {{ editor_attributes | default('') | raw }}>

    <style>
        [data-id="{{ id }}"] .aae-a-countdown-expire {
            display: none;
            text-align: center;
            width: 100%;
        }
        [data-id="{{ id }}"][data-expired="true"] .aae-a-countdown-unit {
            display: none;
        }
        [data-id="{{ id }}"][data-expired="true"] .aae-a-countdown-expire {
            display: block;
        }
        [data-id="{{ id }}"][data-show-separator="no"] .aae-a-countdown-separator {
            display: none;
        }
    </style>

    {{ children_placeholder | raw }}

    {# Hidden until the JS handler flips [data-expired="true"] on the wrapper. #}
    <div class="aae-a-countdown-expire" data-aae-countdown-expire role="status" aria-live="polite">
        <h3 class="aae-a-countdown-expire-title">{{ settings.expire_title | default('') }}</h3>
        <p class="aae-a-countdown-expire-desc">{{ settings.expire_desc | default('') }}</p>
    </div>
</div>