{% extends "layouts/base.twig" %}

{% block title %}{{ translations.knowledge_base }}{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.knowledge_base }}</h3>
        <p class="text-subtitle text-muted">{{ translations.knowledge_base_subtitle }}</p>
    </div>
{% endblock %}

{% block content %}
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">
                {{ translations.manage_knowledge_base_categories }}
                <a href="{{ root }}/knowledge-base/categories/new" role="button" class="btn btn-primary">{{ translations.add }}</a>
            </h4>
        </div>
        <div class="card-content">
            <div class="card-body px-3 py-4-5">
                <div class="row">
                    <div class="col-12">
                        <table class="table table-striped">
                            <thead>
                            <th style="width: 80%">{{ translations.name }}</th>
                            <th style="width: 10%"></th>
                            <th style="width: 10%"></th>
                            </thead>
                            <tbody>
                            {% for category in categories %}
                                <tr>
                                    <td>{{ category.getName() }}</td>
                                    <td>
                                        <a href="{{ root }}/knowledge-base/categories/{{ category.getId() }}/edit"
                                        class="btn btn-warning">{{ translations.edit }}</a>
                                    </td>
                                    <td>
                                        <button class="btn btn-danger" onclick="removeCategory({{ category.getId() }}, this)">
                                            <i class="icon dripicons-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td colspan="4" class="text-center">{{ translations.no_categories_found }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script type="text/javascript">

        function removeCategory(id, btn) {
            Swal.fire({
                title: '{{ translations.are_you_sure }}',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '{{ translations.yes_delete_it }}',
                cancelButtonText: '{{ translations.cancel }}'
            }).then((result) => {
                if (result.isConfirmed) {
                    api(`/ajax/knowledge-base/categories/${id}/delete`, {
                        method : "DELETE"
                    })
                        .then(function (res) {
                            console.log(res)
                            if (res.ok) {
                                showSnack(true, '{{ translations.category_deleted }}');
                                btn.parentNode.parentNode.remove();
                            } else {
                                showSnack(false, '{{ translations.error }}');
                            }
                        })
                        .catch();
                }
            });
        }
    </script>
{% endblock %}