{# SPDX-FileCopyrightText: 2025 JWP Consulting GK #}
{# SPDX-License-Identifier: AGPL-3.0-or-later #}
{% extends "help_base.html" %}
{% load i18n %}
{% load projectify %}
{% block title %}
    {% translate "Help - Projectify" %}
{% endblock title %}
{% block help_content %}
    <div class="flex flex-col items-center gap-10 bg-foreground pb-20">
        <div class="flex w-full flex-col items-center bg-background">
            <div class="w-full max-w-4xl px-6 py-6 sm:py-12">
                <header class="flex w-full flex-col items-center gap-4 sm:grid sm:grid-cols-2">
                    <div class="flex flex-col gap-8 text-center font-bold sm:text-left">
                        <h1 class="text-4xl lg:text-6xl">{% trans "Help and tips" %}</h1>
                        <p class="max-w-md text-xl">{% trans "Learn to fly through projects with speed and agility" %}</p>
                    </div>
                    <div class="w-full max-w-xs justify-self-center">
                        {% picture src="hero-help.png" alt=_("Our mascot poly flying into the air using a jetpack") fetchpriority="high" %}
                    </div>
                </header>
            </div>
        </div>
        <main id="main" class="w-full p-6 max-w-4xl">
            <div class="flex w-full flex-col gap-4">
                <div class="flex w-full flex-col gap-6 sm:grid sm:grid-cols-2 md:grid-cols-3">
                    {% for helptopic in helptopics %}
                        <section class="flex flex-col gap-2">
                            <h2 class="text-lg font-bold">{% trans helptopic.title %}</h2>
                            <p>{% trans helptopic.description %}</p>
                            <a href="{{ helptopic.href }}"
                               class="text-primary underline hover:text-primary-hover active:text-primary-pressed text-base">{% blocktrans with topic=helptopic.title %} {{ topic }} help{% endblocktrans %}</a>
                        </section>
                    {% endfor %}
                </div>
            </div>
        </main>
    </div>
{% endblock help_content %}