{% import "../components/button.html" %}
{% import "../components/image-icon.html" %}
{% import "../components/text.html" %}

{% macro blurbComponent(data) %}
	{% set args = {
		"layout" : {
			"media_type" 	: "none",
			"blurb_bg" 	 	: false,
			"border_color" 	: false,
			"add_hover" 	: false,
			"add_shadow" 	: false,
			"full_height" 	: false
		},
		"icon"			 	: { "icon_type" : "fa", "fa_code" : "", "fa_color" : "", "image" : {} },
		"image"			 	: {},
		"animated_number"	: { "prefix" : "", "number" : "", "suffix" : "", "subtitle" : "" },
		"text"			 	: { "heading" : "", "description" : "" },
		"buttons" 			: [],
		"class" 			: ''
	} %}
	{% do args.update(data) %} 

	{% set item_class = ['blurb-item','w-100'] %}
	{% do args.class ? item_class.append(args.class) : '' %}
	{% do args.layout.full_height ? item_class.append('d-md-flex h-100') : '' %}
	{% do args.layout.add_hover ? item_class.append('has-hover-effect') : '' %}

	<div class="{{ item_class|join(' ') }}">

		{# check if we have blurb background #}
		{% set item_inner_class = ['item-inner','d-inline-block','flex-grow-1'] %}
		{% do args.layout.blurb_bg ? item_inner_class.append('p-3 swatch-'+args.layout.blurb_bg) : '' %}
		{% do args.layout.border_color ? item_inner_class.append('border border-2 border-'+args.layout.border_color) : '' %}
		{% do args.layout.add_shadow ? item_inner_class.append('shadow-sm') : '' %}

		<div class="{{ item_inner_class|join(' ') }}">
			<div>
				
				{% if args.layout.media_type == 'icon' %}
					{{ iconComponent({
						"icon_type"		 : args.icon.icon_type,
						"fa_code"		 : args.icon.fa_code,
						"fa_color"		 : args.icon.fa_color,
						"image"			 : args.icon.image,
						"class"			 : 'mb-2',
					}) }}
				{% endif %}
				
				<div>

					{% if args.layout.media_type == 'image' %}
						{% if args.image.image.src %}
							<div class="item-img mb-3">
								{% set context = args.image %}
								{{ imageComponent(context) }}
							</div>
						{% endif %}
					{% endif %}

					{% if args.layout.media_type == 'animation' %}
						<div class="item-kpi kpi-container mb-2">
							<div>
								{{ !!args.animated_number.prefix ? '<span class="h2 color-inherit kpi-prefix">' + args.animated_number.prefix +'</span>' : '' }}
								<span class="h1 color-inherit kpi-number animate-number mx-1">{{args.animated_number.number}}</span>
								{{ !!args.animated_number.suffix ? '<span class="h2 color-inherit kpi-suffix">' + args.animated_number.suffix +'</span>' : '' }}
							</div>
							<div class="h4 color-inherit mb-0 kpi-subtitle">{{ args.animated_number.subtitle}}</div>
						</div>
					{% endif %}

					<div class="item-content flex-grow-1">
						{{ headingComponent({ "tag" : "h4" ,"text" : args.text.heading, "class" : "mb-1 heading-inherit" }) }}
						{{ textComponent({ "text" : args.text.description, "class" : "item-description mb-2" }) }}

						{% set buttons = type(args.buttons) == 'list' ? args.buttons : [] %}
						{{ buttonSet({ "show" : !!buttons|length , "buttons" : buttons}) }}
					</div>

				</div>

			</div>
		</div>

	</div>

{% endmacro %}