{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "molecules/search-bar/search-bar-macros.njk" as searchBar %}

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

<div class="m-hero {{classes}}">
  <div class="m-hero__background"></div>

  <div class="m-hero__image-container">
	<img
		class="m-hero__image"
		src="{{data.image}}"
		alt="{{data.title | safe}}"
		width="800"
		height="600"
		loading="lazy"
	/>
  </div>

  <div class="m-hero__content-container">
    <div class="m-hero__content">
      {% if data.title %}
        <h1 class="m-hero__title">{{data.title | safe}}</h1>
      {% endif %}

      {% if data.subtitle %}
        <h3 class="m-hero__subtitle">{{data.subtitle}}</h3>
      {% endif %}

      {% if data.text %}
        <p class="m-hero__text">{{data.text}}</p>
      {% endif %}

      {% if data.search %}
        {{searchBar.default("m-hero__search")}}
      {% endif %}
    </div>
  </div>
</div>

{% endmacro %}