{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "general/components/bubble/bubble-macros.njk" as bubble %}
{% import "general/components/circles/circles-macros.njk" as circles %}
{% import "general/components/logo/logo-macros.njk" as logo %}
{% import "general/components/question/question-macros.njk" as question %}

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

	<section class="c-chat {{classes}}">
		<div class="c-chat__container l-container">
			<div class="c-chat__grid l-grid l-grid--with-spacing l-grid--align-middle">
				<div class="l-grid__col l-grid__col--5@desktop">
					<h3 class="c-chat__title">{{data.title}}</h3>

					{{question.default("c-chat__input", {
						id: "question-input",
						name: "question-input",
						input: { type: "text", placeholder: "Hoi lot, kan je me helpen met..." }
					})}}

					<ul class="c-chat__autocomplete">
						<li class="c-chat__autocomplete__item">zonnepanelen</li>
						<li class="c-chat__autocomplete__item">hypotheken</li>
						<li class="c-chat__autocomplete__item">sparen</li>
					</ul>

				</div>

				<div class="l-grid__col l-grid__col--6@desktop l-grid__col--offset-1@desktop u-margin-top-6x@below-desktop">

					{% for item in data.items %}

						{{bubble.default("c-chat__item c-bubble--arrow-left-responsive " + ("c-chat__item--even" if (loop.index % 2 == 0) else "c-chat__item--odd"), item)}}

					{% endfor %}

				</div>
			</div>
		</div>

		<div class="c-chat__circles-container">
			{{circles.default("c-chat__circles c-circle--color-primary")}}
		</div>

	</section>

{% endmacro %}

{# ========================================================================== #}
{# :: Result #}
{# ========================================================================== #}
{% macro result(classes, data) %}

	<section class="c-chat l-section {{classes}}">
		<div class="c-chat__container l-container">
			<div class="c-chat__grid l-grid l-grid--with-spacing l-grid--align-middle">
				<div class="l-grid__col l-grid__col--5@desktop">
					<h3 class="c-chat__title">{{data.title}}</h3>

					{% if data.search %}
						{{bubble.default("c-chat__search c-bubble--theme-pink", {
							text: data.search,
							close: true
						})}}
					{% endif %}

					{{question.default("c-chat__input", {
						id: "question-input",
						name: "question-input",
						input: { type: "text", placeholder: "Hoi lot, kan je me helpen met..." }
					})}}
				</div>

				<div class="l-grid__col l-grid__col--6@desktop l-grid__col--offset-1@screen u-margin-top-6x@below-desktop">

					{{bubble.default("c-chat__item c-bubble--arrow-bottom pulsate-fwd ", data.bubble)}}

				</div>
			</div>
		</div>

		<div class="c-chat__circles-container">
			{{circles.default("c-chat__circles c-circle--color-primary")}}
		</div>

	</section>

{% endmacro %}