{% import 'elementor/macros' as m %}
{% set html_tag = tag | e('html_tag') %}
{% set state_class = '' %}
{% if settings.state == 'playing' %}{% set state_class = 'e-background-video--playing' %}{% endif %}
{% if settings.state == 'paused' %}{% set state_class = 'e-background-video--paused' %}{% endif %}
{% set classes = ['e-background-video', 'e-con', 'e-atomic-element', base_styles.base, state_class, m.default_tag_class(html_tag)] | merge(settings.classes | default([])) | join(' ') %}
<{{ html_tag }} class="{{ classes }} {{ editor_classes | default('') }}"
	data-id="{{ id }}"
	data-element_type="{{ type }}"
	data-e-type="{{ type }}"
	data-interaction-id="{{ interaction_id }}"
	data-interactions="{{ interactions | json_encode | e('html_attr') }}"
	x-data="eBackgroundVideo{{ id }}"
	x-bind="rootState"
	data-e-settings="{{ settings | json_encode | e('html_attr') }}"
	{% 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 }}>
	{% if settings.source.url is not empty %}
		<video class="e-background-video__media"
			aria-hidden="true"
			{% if settings.autoplay %}autoplay{% endif %}
			{% if settings.mute %}muted{% endif %}
			{% if settings.loop %}loop{% endif %}
			playsinline
			preload="auto">
			<source src="{{ settings.source.url | e('full_url') }}{{ video_timings }}">
		</video>
	{% endif %}
	<!-- elementor-children-placeholder -->
</{{ html_tag }}>