<%- include ('../../partials/header.ejs') %>
    <%- include ('../../partials/navbar.ejs') %>
        <div class="container p-2">


            <div class="card">
                <div class="card-header">
                    <h2 class="text-wrap ">
                        Artigos
                    </h2>

                    <a class="btn btn-succes my-1" href="/admin/articles/new">Criar novo artigo</a>
                </div>
                <div class="card-body">
                    <table class="table table-secondary table-hover table-bordered">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Título</th>
                                <th>Slug</th>
                                <th>Categoria</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody>

                            <% articles.forEach(article=> { %>
                                <tr>
                                    <td>
                                        <%= article.id %>

                                    </td>
                                    <td>
                                        <%= article.title %>
                                    </td>
                                    <td>
                                        <%= article.slug %>

                                    </td>
                                    <td>
                                        <%= article.category.title %>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center justify-between gap-3">

                                            <a class="btn btn-warning mr-1"
                                                href="/admin/articles/edit/<%= article.id %>">Editar</a>
                                            <form action="/admin/articles/delete" method="post"
                                                onsubmit="HandleDelete(event, this)">
                                                <input type="hidden" name="id" value="<%= article.id %>">
                                                <button type="submit" class="btn btn-danger">Deletar</button>
                                            </form>
                                        </div>
                                    </td>

                                </tr>
                                <% }) %>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <%- include ('../../partials/footer.ejs') %>

            <script>

                function HandleDelete(event, form) {
                    event.preventDefault()
                    console.log("FORM NÂO ENVIADO");
                    const resp = confirm("Tem certeza?")
                    if (resp) {
                        console.log("DELETANDO");
                        form.submit()
                    } else {
                        console.log("Não DELETADO");
                    }
                }
            </script>