{%- macro open(id = None, classes = []) -%}
	{%- set attr = {"id": id, "classes": ["cards"], "extra_classes": classes} -%}
	<ul {{ common.render_attr(attr, None) }}>
{%- endmacro -%}

{%- macro close() -%}
	</ul>
{%- endmacro -%}

{%- macro card(title, link, catcolor, lang) -%}
	{%- set attr = namespace(classes=[], style={"--category-color": catcolor}) -%}
	{%- set page = link.page -%}

	{%- if page.metadata.has_image -%}
		{%- set attr.classes = ["has-image"] -%}
		{%- set imageurl = ["url('", [siteurl, page.metadata.image.link.url]|join("/"), "')"]|join() -%}
		{#- set imageurl = ["url('", ["http://127.0.0.1:8000/output", page.metadata.image.link.url]|join("/"), "')"]|join() -#}
		{#- AHHHHHHHHH... Firefox interpretiert relative background-image urls falsch, wenn diese nicht direkt im inline-style sind! -#}
		{%- set attr.style = {"--category-color": catcolor, "--card-image": imageurl, "background-image": imageurl } -%}
	{%- endif -%}
	<li>{{ common.render_link(link, title, lang, attr=attr) }}</li>
{%- endmacro -%}

{%- macro card_from_link(link, lang) -%}
	{{ card(title=None, link=link, catcolor=link.category.color, lang=lang) }}
{%- endmacro -%}

{%- macro card_from_page(page, lang) -%}
	{%- if not page.slug.startswith('tag-') -%}
		{{ card_from_link(link=page.link, lang=lang) }}
	{%- endif -%}
{%- endmacro -%}

{%- macro cards_from_pages(pages, lang, max = None, standalone = True) -%}
	{%- if standalone -%}
		{{ open() }}
	{%- endif -%}
	{%- for page in pages -%}
		{%- if max is none or loop.index <= max -%}
			{{ card_from_page(page, lang) }}
		{%- endif -%}
	{%- endfor -%}
	{%- if standalone -%}
		{{ close() }}
	{%- endif -%}
{%- endmacro -%}