{% extends "templates/web.html" %}

{% block content %}
<section class="section section-padding-top section-padding-bottom">
	<div class='container'>
		<div class="hero-content">
			<h1 class="h1">{{ _(greeting_title) or _("We're here to help") }}</h1>
			<p class="hero-subtitle">{{ greeting_subtitle or _("Browse help topics.") }}</p>
		</div>
	</div>
</section>

{% if favorite_article_list %}
<section class="section section-padding-top section-padding-bottom">
	<div class='container'>
		<h3>{{ _("Frequently Read Articles") }}</h3>
		<div class="row">
			{% for favorite_article in favorite_article_list %}
				<div class="mt-4 col-12 col-sm-6 col-lg-4">
					<div class="card card-md h-100">
						<div class="card-body">
							<h6 class="card-subtitle mb-2 text-uppercase small text-muted">{{ favorite_article['category'] }}</h6>
							<h3 class="card-title">{{ favorite_article['title'] }}</h3>
							<p class="card-text">{{ favorite_article['description'] }}</p>
						</div>
						<a href="{{ favorite_article['route'] }}" class="stretched-link"></a>
					</div>
				</div>
			{% endfor %}
		</div>
	</div>
</section>
{% endif %}

{% if help_article_list %}
<section class="section section-padding-top section-padding-bottom bg-light">
	<div class='container'>
		<h3>{{ _("Help Articles") }}</h3>
		<div class="row">
			{% for item in help_article_list %}
			<div class="mt-5 col-12 col-sm-6 col-lg-4">
				<h5>{{ item['category'].name }}</h5>
				<div>
					{% for article in item['articles'] %}
					<a href="{{ article.route }}" class="mt-2 d-block">{{ article.title }}</a>
					{% endfor %}
				</div>
			</div>
			{% endfor %}
		</div>
	</div>
</section>
{% endif %}

{% endblock %}