{% include 'admin_menu.html.twig' %}

{% block body %}
    <div class="container">
        <table class="table" id="product-table">
            <thead>
            <th>
                Id
            </th>
            <th>
                Name
            </th>
            <th>
                Description
            </th>
            <th>
                Images
            </th>
            <th>
                Actions
            </th>
            </thead>
            <tbody>
            {% for product in products %}
                <tr>
                    <td>
                        {{ product.id }}
                    </td>
                    <td>
                        {{ product.name }}
                    </td>
                    <td>
                        {{ product.description }}
                    </td>
                    <td>
                        {% for image in product.images %}
                            <img src="{{ asset('uploads/images/') ~ image.fileName }}" style="width: 10%">
                        {% endfor %}
                    </td>
                    <td>
                        <a class="btn btn-info" href="{{ path('product_images', {'id': product.id}) }}">Replace images</a>
                        <a class="btn btn-info" href="{{ path('product_texts', {'id': product.id}) }}">Edit text</a>
                        <a class="btn btn-danger" href="{{ path('delete_product', {'id': product.id}) }}">Delete</a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <a class="btn btn-dark" href={{ path('create_product') }}>Create product</a>
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        $(document).ready(function() {
            $('#product-table').DataTable();
        });
    </script>
{% endblock %}