{% extends "template.html.twig" %}

{% block content %}
    <table class='table table-hover'>
        <tr>
            <td class="align-middle font-weight-bold h3"><a class="text-warning text-decoration-none"
                                                            href="{{ path('app_star', {'productId': product.id}) }}">{% if product.starred %}★{% else %} ☆ {% endif %}</a></td>
            <td><img src='{{ product.image }}&width=150' class='border rounded p-1' alt='{{ product.name }}'/></td>
            <td><a href='{{ path('app_home') }}/product/{{ product.id }}' class="text-decoration-none">{{ product.name }}</a></td>
            <td>{{ product.subTitle }}</td>
            <td>
                <ul class='nav'>
                    {% for category in product.categories %}
                        <li class="nav-item"><a class="nav-link" href="{{ path('app_category', {'category': category}) }}"> {{ category }} </a></li>
                    {% endfor %}
                </ul>
            </td>
            <td><a href='https://pl.ryobitools.eu/{{ product.url }}'>link</a></td>
        </tr>
        <tr>
            <td colspan="4">
                <div style="width: 800px;">
                    <canvas id="price"></canvas>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <table class='table table-hover table-sm mb-0'>
                    <thead>
                    <tr>
                        <th>price</th>
                        <th>lowest product price in 30 days</th>
                        <th colspan='2'>standard price</th>
                    </tr>
                    </thead>
                    {% for price in product.price %}
                        <tr>
                            <td>{{ price.price }}</td>
                            <td>{{ price.lowestProductPrice30Days }}</td>
                            <td>{{ price.productStandardPrice }}</td>
                            <td>{{ price.created_at }}</td>
                        </tr>
                    {% endfor %}
                </table>
            </td>
        </tr>
    </table>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        const ctx = document.getElementById('price');

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['{{ price_dates|raw }}'],
                datasets: [{
                    label: 'Price (PLN)',
                    data: [{{ price_list }}],
                    borderWidth: 1
                }]
            },
            options: {
                animation: false,
                plugins: {
                    title: {
                        display: true,
                        text: 'Price in time'
                    },
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Date'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Price'
                        }
                    }
                }
            }
        });
    </script>
{% endblock %}