{% extends 'base.html.twig' %}

{% block title %}{{ article.localizedMetaTitle(app.request.locale) ?: article.localizedTitle(app.request.locale) }}{% endblock %}
{% block navigation %}{% endblock %}

{% block seo %}
    <meta name="description" content="{{ article.localizedMetaDescription(app.request.locale) ?: article.localizedSummary(app.request.locale) }}">
    <link rel="canonical" href="{{ canonical_url }}">
    <meta property="og:title" content="{{ article.localizedMetaTitle(app.request.locale) ?: article.localizedTitle(app.request.locale) }}">
    <meta property="og:description" content="{{ article.localizedMetaDescription(app.request.locale) ?: article.localizedSummary(app.request.locale) }}">
    <meta property="og:type" content="article">
    <meta property="og:url" content="{{ canonical_url }}">
{% endblock %}

{% block styles %}
    {% include 'help/_styles.html.twig' %}
{% endblock %}

{% block body %}
<div class="help-page">
    <div class="gradient-background container-fluid p-0 mb-4">
        <div class="home-container-new-content">
            {% include 'general/navigation.html.twig' %}
            <div class="pt-5 pb-3">
                <nav class="help-breadcrumb" aria-label="Breadcrumb">
                    <a href="{{ path('app_help_index') }}">{{ 'help.breadcrumb.home'|trans }}</a>
                    <span aria-hidden="true">/</span>
                    <a href="{{ path('app_help_category', {slug: article.category.localizedSlug(app.request.locale)}) }}">{{ article.category.localizedTitle(app.request.locale) }}</a>
                    <span aria-hidden="true">/</span>
                    <span>{{ article.localizedTitle(app.request.locale) }}</span>
                </nav>
                <p class="orange-subtitle mb-2">{{ article.category.localizedTitle(app.request.locale) }}</p>
                <h1 class="dark-blue-title">{{ article.localizedTitle(app.request.locale) }}</h1>
                {% if article.localizedSummary(app.request.locale) %}
                    <p style="max-width:760px;color:#475569;">{{ article.localizedSummary(app.request.locale) }}</p>
                {% endif %}
                <div class="help-meta">
                    <span>{{ 'help.article.updated'|trans({'%date%': article.updatedAt|date('d.m.Y')}) }}</span>
                    <span>{{ 'help.article.readingTime'|trans({'%min%': reading_time}) }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="container pb-5">
        <div class="help-layout">
            {% if toc is not empty %}
                <aside class="help-toc" aria-label="{{ 'help.article.toc'|trans }}">
                    <h2>{{ 'help.article.toc'|trans }}</h2>
                    <ol>
                        {% for item in toc %}
                            <li style="{{ item.level == 3 ? 'margin-left:12px;' : '' }}">
                                <a href="#{{ item.id }}">{{ item.text }}</a>
                            </li>
                        {% endfor %}
                    </ol>
                </aside>
            {% endif %}

            <article class="help-content">
                {{ content_html|raw }}

                <section class="help-related" aria-label="{{ 'help.article.related'|trans }}">
                    <h2 class="h4">{{ 'help.article.related'|trans }}</h2>
                    <ul class="help-article-list">
                        {% for related in related_articles %}
                            <li><a href="{{ path('app_help_article', {slug: related.localizedSlug(app.request.locale)}) }}">{{ related.localizedTitle(app.request.locale) }}</a></li>
                        {% else %}
                            <li>{{ 'help.empty.articles'|trans }}</li>
                        {% endfor %}
                    </ul>
                </section>

                <section class="help-feedback" aria-labelledby="help-feedback-title" data-feedback-url="{{ feedback_url }}" data-csrf="{{ csrf_token('help_feedback') }}">
                    <h2 id="help-feedback-title" class="h5">{{ 'help.article.feedbackTitle'|trans }}</h2>
                    <p class="help-feedback__prompt">{{ 'help.article.feedbackPrompt'|trans }}</p>
                    <div class="help-feedback__actions">
                        <button type="button" class="button button-blue" data-helpful="1">{{ 'help.article.feedbackYes'|trans }}</button>
                        <button type="button" class="button" data-helpful="0">{{ 'help.article.feedbackNo'|trans }}</button>
                    </div>
                    <div class="help-feedback__comment" hidden>
                        <label for="help-feedback-comment">{{ 'help.article.feedbackComment'|trans }}</label>
                        <textarea id="help-feedback-comment" rows="3" maxlength="2000"></textarea>
                        <button type="button" class="button button-blue mt-2" data-feedback-submit>{{ 'help.article.feedbackSend'|trans }}</button>
                    </div>
                    <p class="help-feedback__thanks" hidden role="status">{{ 'help.article.feedbackThanks'|trans }}</p>
                    <p class="mt-3">
                        <a href="{{ path('app_help_contact') }}">{{ 'help.cta.support'|trans }}</a>
                    </p>
                </section>
            </article>
        </div>
    </div>
</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": {{ article.localizedTitle(app.request.locale)|json_encode|raw }},
  "description": {{ (article.localizedSummary(app.request.locale) ?: '')|json_encode|raw }},
  "dateModified": "{{ article.updatedAt|date('c') }}",
  "datePublished": "{{ (article.publishedAt ?: article.createdAt)|date('c') }}",
  "mainEntityOfPage": {{ canonical_url|json_encode|raw }}
}
</script>
{% include 'help/_assistant.html.twig' %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('help') }}
{% endblock %}