{# ========================================================================= #}
{# :: IMPORTS #}
{# ========================================================================= #}
{% import "atoms/button/button-macros.njk" as button %}
{% import "molecules/button-group/button-group-macros.njk" as buttonGroup %}

{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes, data) %}
  <div class="m-cta {{classes}}">
    <div class="m-cta__image-container">
		<img
			class="m-cta__image"
			src="{{data.image}}"
			 width="800"
			 height="600"
			alt="cta-image"
			loading="lazy"
		/>
    </div>

    <div class="m-cta__content">
      <h2 class="m-cta__content__title">{{data.title}}</h2>
      <p class="m-cta__content__text">{{data.text}}</p>

      {% if data.button %}
        {{button.default("m-cta__content__button", {
          text: data.button.text,
          icon: {before: data.button.icon}
        })}}
      {% endif %}

      {% if data.buttons %}
        {{buttonGroup.default("", data.buttons)}}
      {% endif %}
    </div>
  </div>
{% endmacro %}

{% macro sideContent(classes, data) %}
  <div class="m-cta {{classes}}">
    <div class="m-cta__content">
      <h2 class="m-cta__content__title">{{data.title}}</h2>
      <p class="m-cta__content__text">{{data.text}}</p>

      {% if data.button %}
        {{button.default("m-cta__content__button", {
          text: data.button.text,
          icon: {before: data.button.icon}
        })}}
      {% endif %}

      {% if data.buttons %}
        {{buttonGroup.default("", data.buttons)}}
      {% endif %}
    </div>

	<div class="m-cta__side-container">
		{{data.sideContent}}
	</div>
  </div>
{% endmacro %}