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

{% block title %}Help Articles{% endblock %}

{% block styles %}
    {{ parent() }}
{% endblock %}

{% block body %}
    <div class="adm-page" >
        <div class="row p-4">
            <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
                <h1 class="mb-0">Help Articles</h1>
                <div class="d-flex gap-2 flex-wrap">
                    <a href="{{ path('app_adm_help_category') }}" class="button button-blue">Categories</a>
                    <a href="{{ path('app_adm_help_insights') }}" class="button button-blue">Insights</a>
                    <a href="{{ path('app_adm_help_article_new') }}" class="button button-blue"><i class="icofont-plus"></i> New</a>
                </div>
            </div>
            <div class="col-12">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered ">
                        <thead>
                        <tr>
                            <th>Pos</th>
                            <th>Title</th>
                            <th>Category</th>
                            <th>Published</th>
                            <th>Featured</th>
                            <th>Views</th>
                            <th>Preview</th>
                            <th>Edit</th>
                            <th>Delete</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for article in articles %}
                            <tr>
                                <td>{{ article.position }}</td>
                                <td>{{ article.title }}</td>
                                <td>{{ article.category ? article.category.title : '—' }}</td>
                                <td>{{ article.isPublished ? 'Yes' : 'Draft' }}</td>
                                <td>{{ article.isFeatured ? 'Yes' : 'No' }}</td>
                                <td>{{ article.viewCount }}</td>
                                <td>
                                    {% if article.isPublished %}
                                        <a class="btn btn-sm btn-outline-info" target="_blank" rel="noopener" href="{{ path('app_help_article', { slug: article.slug }) }}">Open</a>
                                    {% else %}
                                        <span class="text-muted">—</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <a class="button button-blue" href="{{ path('app_adm_help_article_edit', { id: article.id }) }}">
                                        <i class="icofont-edit"></i>
                                    </a>
                                </td>
                                <td>
                                    <form method="post" action="{{ path('app_adm_help_article_delete', { id: article.id }) }}" onsubmit="return confirm('Delete this article?');">
                                        <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ article.id) }}">
                                        <button type="submit" class="btn btn-sm btn-outline-danger"><i class="icofont-trash"></i></button>
                                    </form>
                                </td>
                            </tr>
                        {% else %}
                            <tr><td colspan="9" class="text-center">No articles yet.</td></tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}