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

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

	<section class="c-spotlight c-spotlight--{{data.visual.shape}} l-section {{classes}}">
		<div class="c-spotlight__container l-container">
			<div class="c-spotlight__content">
				<{{data.tag}} class="c-spotlight__title">{{data.title}}</{{data.tag}}>

				<p class="c-spotlight__text">{{data.text | safe}}</p>

				{% if data.button %}
					{{button.default("c-spotlight__button " + data.button.classes, data.button)}}
				{% endif %}

				{% if data.link %}
					{{link.default("c-spotlight__link " + data.link.classes, data.link)}}
				{% endif %}
			</div>

			{% if data.visual %}
				<div class="c-spotlight__visual">
					<div class="c-spotlight__visual-background" style="background-image: url('{{data.visual.background}}');"></div>

					<div class="c-spotlight__visual-container">
						<div class="c-spotlight__visual-image-wrapper">
							<div class="c-spotlight__visual-image" style="background-image: url('{{data.visual.image}}');"></div>
						</div>

						{% if data.visual.shape == "polygon" %}
							<svg viewbox="0 0 120 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="c-spotlight__svg c-spotlight__svg--polygon">
								<clipPath class ="c-spotlight__mask" id="c-spotlight__mask--polygon" clipPathUnits="objectBoundingBox">

									<path id="polygon-mask" class="st0" d="M0.1486929,0.1659945l0.6913671,0.0921038
										c0.0468215,0.0062375,0.0633131,0.0124304,0.0800204,0.0226191c0.0167074,0.0101887,0.0298082,0.023864,0.039271,0.0409929
										c0.0094628,0.0171289,0.0149427,0.0338709,0.0191666,0.0809169l0.0223333,0.2487547
										c0.0059763,0.0665646-0.0431402,0.1253705-0.1097048,0.1313468C0.8886916,0.782949,0.8862305,0.7830944,0.8837667,0.7831645
										L0.1257953,0.8047264C0.0589901,0.8066267,0.0032931,0.754011,0.0013927,0.6872057
										C0.0013303,0.6850092,0.0013276,0.6828115,0.0013848,0.6806148l0.0103587-0.3978194
										c0.0017396-0.0668096,0.0573098-0.1195593,0.1241194-0.1178197C0.1401546,0.1650875,0.1444373,0.1654276,0.1486929,0.1659945z"/>

								</clipPath>
							</svg>
						{% endif %}

						{% if data.visual.shape == "pin" %}

							<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="c-spotlight__svg c-spotlight__svg--pin" >
								<clipPath class ="c-spotlight__mask" id="c-spotlight__mask--pin" clipPathUnits="objectBoundingBox">
									<path id="path-1" d="M0.8192139,0.3130229C0.8190209,0.317438,0.8188219,	0.3201157,0.8187975,0.322794
									c-0.0004107,0.0480868-0.0102759,0.094047-0.0309892,0.1374471C0.7527668,0.533656,0.7175125,0.6069729,0.6823836,0.6803491
									C0.6780927,0.6893134,0.6740157,0.6983848,0.6696597,0.7077934L0.6649402,0.7171145
									c-0.0085013,0.0176694-0.0165169,0.034237-0.0244553,0.0508418c-0.0317951,0.066522-0.0639828,0.1328581-0.0951381,0.1996831
									C0.533394,0.9932795,0.5054442,1.0064251,0.4816836,0.9993209c-0.014463-0.0043262-0.0258243-0.0127492-0.0327192-0.0266714
									c-0.0015397-0.0031109-0.0029321-0.0063012-0.004382-0.0094578C0.391771,0.8482155,0.3389063,0.7332678,0.2861808,0.618251
									C0.2596766,0.5604345,0.2328863,0.5027471,0.2073001,0.4445152C0.1938273,0.4138573,0.187002,0.3811387,0.1846333,0.3475283
									c-0.0033347-0.0472881,0.0028429-0.093262,0.0196246-0.1375381c0.0246701-0.0651009,0.065542-0.1173715,0.1233816-0.1555174
									c0.0132158-0.0087151,0.0270414-0.0167926,0.0413761-0.0234027C0.4221236,0.0065781,0.4778502-0.0033968,0.5359349,0.00324
									C0.6080576,0.0114843,0.670526,0.0410818,0.7227831,0.0920749c0.0221285,0.0215952,0.0402817,0.0463097,0.0554203,0.073538
									C0.8003097,0.2053698,0.8129159,0.2479224,0.8173191,0.29315C0.8173191,0.29315,0.8189732,0.3073257,0.8192139,0.3130229"/>
								</clipPath>
							</svg>
						{% endif %}
					</div>
				</div>
			{% endif %}
		</div>
	</section>

{% endmacro %}


{# ========================================================================== #}
{# :: Polygon #}
{# ========================================================================== #}

{% macro polygon(classes, data) %}

	{{default(classes, data)}}

{% endmacro %}

{# ========================================================================== #}
{# :: Pin #}
{# ========================================================================== #}

{% macro pin(classes, data) %}

	{{default(classes, data)}}

{% endmacro %}