{% extends "base.html" %}

{% block title %}{{ _('about.title', current_locale) }} - {{ _('base.default_title', current_locale) }}{% endblock %}
{% block meta_description %}{{ _('about.description', current_locale) }}{% endblock %}

{% block content %}
<div class="page-header" data-testid="page-header-about">
    <h1 class="page-title" data-testid="page-title-about">{{ _('about.page_title', current_locale) }}</h1>
</div>

<div class="card" data-testid="about-card">
    <div class="card-body" data-testid="about-card-body">
        <p data-testid="about-description">
            {{ _('about.description', current_locale) }}
        </p>

        <div class="divider" data-testid="about-divider"></div>

        <p data-testid="about-user">
            {% if user %}
            {{ _('about.signed_in', current_locale).format(username=user.username) }}
            {% else %}
            {{ _('about.browsing_guest', current_locale) }}
            {% endif %}
        </p>
    </div>

    <div class="card-footer" data-testid="about-card-footer">
        <a href="/web/" class="btn" data-testid="btn-back-home">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 0.5rem;">
                <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            {{ _('about.back_home', current_locale) }}
        </a>
    </div>
</div>
{% endblock %}