{%- comment -%}

Cabecera y menú con toggler

@param :logo_open_src [String] La imagen del logo con menú abierto
@param :logo_open_alt [String] El alt de la imagen del logo con menú abierto
@param :btn_open_src [String] La imagen del botón con menú abierto
@param :logo_close_src [String] La imagen del logo con menú cerrado
@param :logo_close_alt [String] El alt de la imagen del logo con menú cerrado
@param :btn_close_src [String] La imagen del botón con menú cerrado
@param :btn_alt [String] El alt de la imagen del botón
@param :btn_href [String] El link de la imagen del botón
@param :background_class [String] Las clases de la imagen de fondo del header
{%- endcomment -%}

{%- assign menu_id = menu | prepend: 'r-' -%}
{%- assign items = site.posts | where: "layout", "menu" -%}
{%- assign posts = site.posts | where: "layout", "post" -%}
{%- assign back_cover = site.posts | find: "layout", "back_cover" -%}
{%- assign footer = site.posts | find: "layout", "footer" -%}

<div data-controller="body-scroll" class="position-relative {{ include.background_class }}">
	<div class="d-flex justify-content-between align-items-center container mx-auto">
		{%- capture menu_svg -%}
			{% include menu_close.html class="w-36px w-md-54px" container_class="stroke-white" %}
		{%- endcapture -%}

		{% include toggler/toggler_label.html id=menu_id class="m-0" content=menu_svg %}

		{% capture toggled_content %}
			<div class="background-image-menu-open background-size-100 w-100 pt-3 px-2 pb-12 border-bottom-dashed border-black">
				<div class="d-flex justify-content-between align-items-center container mx-auto">
					{%- capture menu_svg -%}
						{% include menu_open.html class="w-36px w-md-54px" container_class="fill-black" %}
					{%- endcapture -%}

					{% include toggler/toggler_label.html id=menu_id class="m-0" content=menu_svg %}

					{% include
						header.html
						logo_src=include.logo_open_src
						logo_alt=include.logo_open_alt
						btn_src=include.btn_open_src
						btn_href=include.btn_href
						btn_alt=include.btn_alt %}
				</div>
			</div>

			<div class="background-white pt-5">
				<div class="container-lg mx-auto">
					<div class="ml-14 mt-3">
						{% for item in items %}
							{% include menu_item.html text=item.title href=item.post.url %}
						{% endfor %}
					</div>

					<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 no-gutters mt-40 px-20 px-md-0">
						{% for post in posts %}
							<div class="col pb-5">
								{% include cover_post/menu.html authors=post.authors title=post.title src=post.image.path alt=post.image.description href=post.url %}
							</div>
						{% endfor %}

						<div class="col pb-5">
							{% include cover_post/menu.html title=back_cover.title src=back_cover.image.path alt=back_cover.image.description href=back_cover.url %}
						</div>
					</div>
				</div>

				{% include footer.html col_1=footer.column_1 col_2=footer.column_2 col_3=footer.column_3 col_4=footer.column_4 src=footer.image.path %}
			</div>
		{% endcapture %}

		{% include toggler/toggler.html id=menu_id extra='data-action="toggle-media#toggle" data-menu-target="toggler"' toggled_content=toggled_content toggled_class="top-0 left-0 w-100 zindex-dropdown position-absolute" %}

		{% include
			header.html
			logo_src=include.logo_close_src
			logo_alt=include.logo_close_alt
			btn_src=include.btn_close_src
			btn_href=include.btn_href
			btn_alt=include.btn_alt %}
	</div>
</div>