{% extends "base.html" %}

{% block content %}
<h1 class="title">
	Selfhosted Services
</h1>

<ul class="list">
	{% for card_path in section.subsections %}
	{% set card = get_section(path=card_path) %}
	<div class="card trunc" _="on click toggle .trunc on me">
		<img class="icon" src="{{ card.extra.icon }}">
		<h2> {{ card.title }} </h2>
		<p class="text">
			{{ card.content | markdown(inline=true) | safe }}
		</p>
		<div class="footer" _="on click halt the event's bubbling">
			{% set footer = get_section(path=card.subsections[0]) %}
			{{ footer.content | markdown(inline=true) | safe }}
		<div>
		{% for page in footer.pages %}
		{{ page.content | markdown(inline=true) | safe }}
		{% endfor %}
		</div>

		</div>
	</div>
	{% endfor %}
</ul>


{% endblock content %}