{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "general/building-blocks/input/input-macros.njk" as input %}
{% import "general/building-blocks/button/button-macros.njk" as button %}
{% import "general/components/formfield/formfield-macros.njk" as formfield %}

{# ========================================================================== #}
{# :: Default #}
{# ========================================================================== #}
{% macro default(classes, data) %}

	<div class="c-bubble {{classes}}">

		<div class="c-bubble__content">
			{% if data.text %}
				<div class="c-bubble__text">{{data.text | safe}}</div>
				{% if data.close %}
					<div class="c-bubble__close">					
						<span class="fa fa-times"></span>
					</div>
				{% endif %}
			{% endif %}

			{% if data.image %}
				<div class="c-bubble__visual">
					<div class="c-bubble__image-background {{'c-bubble__image-background--blue' if data.background === 'blue' else 'c-bubble__image-background--pink'}}"></div>
					<div class="c-bubble__image-container" style="background-image: url('{{data.image}}');">
						<svg class="c-bubble__image" viewBox="0 0 1 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<clipPath class="c-bubble__mask" id="c-bubble__mask" clipPathUnits="objectBoundingBox">
								<path id="c-bubble__path" d="M.2337.1505.7211.1846A.3253.3253,0,0,1,.8627.2155.197.197,0,0,1,.9379.2838a.324.324,0,0,1,.0444.138L.997.5094A.2186.2186,0,0,1,.8177.761L.8043.7628.2617.82a.2185.2185,0,0,1-.24-.1945l0-.0038L.0008.3875A.2186.2186,0,0,1,.2337.1505Z"/>
							</clipPath>
						</svg>
					</div>
				</div>
			{% endif %}
		</div>

		{% if data.button %}
			<button class="c-bubble__button">
				<span class="{{data.button}} c-bubble__icon" aria-hidden="true"></span>
			</button>
		{% endif %}
	</div>

{% endmacro %}