{% extends 'admin/_layout.html.twig' %}

{% set active_nav = 'articles' %}

{% block title %}Admin · {{ 'admin.articles.title'|trans }}{% endblock %}

{% block admin_content %}
    <div class="adm__header">
        <h1 class="adm__title">{{ 'admin.articles.title'|trans }}</h1>
        <div class="adm__actions">
            {{ plugin_hook('admin_articles_toolbar') }}
            <a href="{{ path('admin_articles_new') }}" class="adm__btn adm__btn--primary">{{ 'admin.articles.new'|trans }}</a>
        </div>
    </div>

    <form id="bulk-articles-form" method="post" action="{{ path('admin_articles_bulk') }}"
          onsubmit="return document.querySelectorAll('.js-article-checkbox:checked').length > 0;">
        <input type="hidden" name="_token" value="{{ csrf_token('bulk-articles') }}">
        <div class="adm__bulk-bar">
            <span class="adm__bulk-count" id="bulk-articles-count">{{ 'admin.articles.bulk.none_selected'|trans }}</span>
            <button type="submit" name="bulk_action" value="publish" class="adm__btn adm__btn--ghost" disabled>{{ 'admin.articles.publish'|trans }}</button>
            <button type="submit" name="bulk_action" value="unpublish" class="adm__btn adm__btn--ghost" disabled>{{ 'admin.articles.unpublish'|trans }}</button>
            <button type="submit" name="bulk_action" value="delete" class="adm__btn adm__btn--danger" disabled
                    onclick="return confirm('{{ 'admin.articles.bulk.confirm_delete'|trans }}');">{{ 'common.delete'|trans }}</button>
        </div>
    </form>

    <div class="adm__table-wrap">
        <table class="adm__table">
            <thead>
                <tr>
                    <th><input type="checkbox" id="select-all-articles"></th>
                    <th></th>
                    <th>{{ 'admin.articles.table.title'|trans }}</th>
                    <th>{{ 'admin.articles.table.category'|trans }}</th>
                    <th>{{ 'admin.articles.table.tags'|trans }}</th>
                    <th>{{ 'admin.articles.table.author'|trans }}</th>
                    <th>{{ 'admin.articles.table.status'|trans }}</th>
                    <th>{{ 'admin.articles.table.created'|trans }}</th>
                    <th>{{ 'admin.articles.table.updated'|trans }}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for article in articles %}
                    <tr>
                        <td>
                            <input type="checkbox" name="article_ids[]" value="{{ article.id }}" form="bulk-articles-form" class="js-article-checkbox">
                        </td>
                        <td>
                            {% if article.imageUrl %}
                                <img src="{{ article.imageUrl }}" alt="" class="adm__thumb">
                            {% endif %}
                        </td>
                        <td>{{ article.title }}</td>
                        <td><span class="adm__badge adm__badge--category">{{ article.category.name }}</span></td>
                        <td>
                            <div class="adm__badges-list">
                                {% for tag in article.tags %}
                                    <span class="adm__badge adm__badge--tag">{{ tag.name }}</span>
                                {% endfor %}
                            </div>
                        </td>
                        <td>{{ article.author.name }}</td>
                        <td><span class="adm__badge adm__badge--status-{{ article.status.value }}">{{ article.status.label }}</span></td>
                        <td>{{ article.createdAt|date('d/m/Y H:i') }}</td>
                        <td>{{ article.updatedAt|date('d/m/Y H:i') }}</td>
                        <td>
                            <div class="adm__actions">
                                <a href="{{ path('admin_articles_edit', {id: article.id}) }}" class="adm__btn adm__btn--ghost">{{ 'common.edit'|trans }}</a>
                                {% if article.status.value == 'draft' %}
                                    <form method="post" action="{{ path('admin_articles_publish', {id: article.id}) }}">
                                        <input type="hidden" name="_token" value="{{ csrf_token('publish-article-' ~ article.id) }}">
                                        <button type="submit" class="adm__btn adm__btn--primary">{{ 'admin.articles.publish'|trans }}</button>
                                    </form>
                                {% else %}
                                    <form method="post" action="{{ path('admin_articles_unpublish', {id: article.id}) }}">
                                        <input type="hidden" name="_token" value="{{ csrf_token('unpublish-article-' ~ article.id) }}">
                                        <button type="submit" class="adm__btn adm__btn--ghost">{{ 'admin.articles.unpublish'|trans }}</button>
                                    </form>
                                {% endif %}
                                <form method="post" action="{{ path('admin_articles_delete', {id: article.id}) }}"
                                      onsubmit="return confirm('{{ 'admin.articles.confirm_delete'|trans({'%title%': article.title}) }}');">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete-article-' ~ article.id) }}">
                                    <button type="submit" class="adm__btn adm__btn--danger">{{ 'common.delete'|trans }}</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                {% else %}
                    <tr><td colspan="10">{{ 'admin.articles.empty'|trans }}</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <script>
    (function () {
        var selectAll = document.getElementById('select-all-articles');
        var checkboxes = document.querySelectorAll('.js-article-checkbox');
        var count = document.getElementById('bulk-articles-count');
        var buttons = document.querySelectorAll('#bulk-articles-form button[type="submit"]');

        function refresh() {
            var checked = document.querySelectorAll('.js-article-checkbox:checked').length;
            count.textContent = checked > 0
                ? checked + ' {{ 'admin.articles.bulk.selected'|trans }}'
                : '{{ 'admin.articles.bulk.none_selected'|trans }}';
            buttons.forEach(function (button) {
                button.disabled = checked === 0;
            });
            selectAll.checked = checked > 0 && checked === checkboxes.length;
        }

        selectAll.addEventListener('change', function () {
            checkboxes.forEach(function (checkbox) {
                checkbox.checked = selectAll.checked;
            });
            refresh();
        });

        checkboxes.forEach(function (checkbox) {
            checkbox.addEventListener('change', refresh);
        });

        refresh();
    })();
    </script>
{% endblock %}