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

{% block title %}Detalles del post{% endblock %}

{% block content %}

{% import 'breadcrumbs.html.twig' as breadcrumbs %}

<div class="max-w-4xl mx-auto p-3 flex gap-2 flex-col min-h-screen">

  <div class="flex">
      {# Breadcrumbs #}
        {{ breadcrumbs.breadcrumbs([
            {'label': 'Home', 'url': path('app_home')},
            {'label': 'Posts'}
        ]) }}
      {# \breadcrumbs #}
      <div class="w-full flex justify-end items-end">
        <a href="{{ path('category_create') }}" class="bg-green-500 hover:bg-green-700 text-white text-sm py-1 px-2 rounded">
            <i class="fa-solid fa-plus"></i>
            Create Category
        </a>
      </div>
  </div>
  {% for message in app.flashes('success') %}
        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4" role="alert">
            <p class="font-bold">Message</p>
            <p>{{ message }}</p>
        </div>
  {% endfor %}
    <table id="table-categories" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Dscripcion</th>
                <th>Color</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for category in categories %}
                <tr>
                    <td>{{ category.getName()}}</td>
                    <td>{{ category.getDescription()}}</td>
                    <td>{{ category.getColor()}}</td>
                    <td>
                        <a href="{{ path('category_edit', {'id': category.getId()}) }}" title="Edit Comment" class="text-blue-500 hover:text-blue-700 bg-gray-200 text-sm py-1 px-2 rounded"><i class="fa-solid fa-edit"></i></a>
                        <button title="Remove Comment" class="text-green-600 hover:text-green-700 bg-gray-200 text-sm py-1 px-2 rounded"><i class="fa-solid fa-eye"></i></button>
                        <form action="{{ path('category_delete', {'id': category.getId()}) }}" method="post" style="display: inline;">
                            <button title="Remove Comment" class="text-red-500 hover:text-red-700 bg-gray-200 text-sm py-1 px-2 rounded"><i class="fa-solid fa-trash"></i></button>                           
                        </form>
                    </div>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Dscripcion</th>
                <th>Color</th>
                <th>Actions</th>
            </tr>
        </tfoot>
</table>

<script>
    new DataTable('#table-categories');

    $.ajax({
        type: 'GET',
        url: 'http://127.0.0.1:8000/categories',
        data: ({id: '1'}),
        async: true,
        dataType: 'json',
        success: function(data) {
            console.log(data);
        }
    })
</script>

</div>

{% endblock %}