{# SPDX-FileCopyrightText: 2025 JWP Consulting GK #}
{# SPDX-License-Identifier: AGPL-3.0-or-later #}
{% extends "storefront/storefront_hero.html" %}
{% load projectify %}
{% load i18n %}
{% block title %}
    {% translate "Terms of service - Projectify" %}
{% endblock title %}
{% block hero_title %}
    {% trans "Terms of service" %}
{% endblock hero_title %}
{% block hero_content %}
    <main id="main"
          class="flex flex-col items-center gap-10 bg-foreground pb-20 pt-10">
        <div class="flex w-full max-w-5xl grow flex-col gap-4 bg-foreground p-6 sm:flex-row sm:gap-8">
            <nav class="flex max-w-xs grow flex-col gap-2">
                <p id="top" class="font-bold">{% trans "Terms of service" %}</p>
                <ol class="list-inside list-disc">
                    <li>{% anchor href="#japanese" label=_("Japanese (original)") %}</li>
                    <li>{% anchor href="#english" label=_("English (translation)") %}</li>
                </ol>
            </nav>
            <div class="flex flex-col gap-10">
                <section class="prose" id="japanese">
                    {% include "storefront/tos/tos-ja-formatted.html" %}
                </section>
                {% anchor label=_("Jump back to top") href="#top" %}
                <section id="english" class="prose">
                    {% include "storefront/tos/tos-en-formatted.html" %}
                </section>
                {% anchor label=_("Jump back to top") href="#top" %}
            </div>
        </div>
    </main>
{% endblock hero_content %}