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

{% set seo_entity = article %}
{% set category = article.category %}
{% set body_class = 'help-article' %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-lg-9">
                <div class="breadcrumbs">
                    <div class="breadcrumbs-item">
                        <a href="{{ path('help_index') }}" class="breadcrumbs-link">Help</a>
                    </div>
                    <div class="breadcrumbs-item">
                        <a href="{{ path('help_index') }}#{{ category.urlTitle }}" class="breadcrumbs-link">{{ category.title }}</a>
                    </div>
                </div>

                <h1>{{ article.title }}</h1>

                <div class="help-article-content" data-component="fitvids">
                    {{ article.content|raw }}
                </div>

                {% if article.downloads is not empty %}
                    <div class="help-article-downloads">
                        <h2 class="help-article-downloads-title">Downloads</h2>

                        <div class="downloads help-article-downloads">
                            {% for download in article.downloads %}
                                <div class="downloads-row">
                                    <div class="downloads-row-content">
                                        <div class="downloads-row-content-title">{{ download.title }}</div>
                                        <div class="downloads-row-content-excerpt">{{ download.excerpt|raw }}</div>
                                    </div>
                                    <div class="downloads-row-button">
                                        <a href="{{ download.downloadFile }}" target="_blank" class="btn btn-primary btn-sm">Download</a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            </div>
            <div class="col-lg-3">
                <div class="sidebar sidebar-right help-article-sidebar">
                    <div class="sidebar-block">
                        <div class="sidebar-title">{{ category.title }}</div>
                        <ul class="arrow-list">
                            {% for item in category.articles %}
                                <li>
                                    <a href="{{ path('help_show', {'urlTitle': item.urlTitle}) }}">
                                        {{ item.title }}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="help-article-more">
            <a href="{{ path('help_index') }}" class="btn btn-primary btn-block btn-more">Help index</a>
        </div>
    </div>
{% endblock %}

{% block callouts %}
    {% include '_includes/chat-callout.html.twig' %}
{% endblock %}