{% extends 'base.html' %}

<!-- START OF NEW CONTENT  -->

{% block content %}

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

    {{ chartjs_config| json_script:'chartjs_config' }}
<script>
    window.onload = function () {
        var ctx = document.getElementById('line-graph').getContext('2d');
        const config = JSON.parse(document.getElementById('chartjs_config').textContent);
        window.Line = new Chart(ctx, config);
    }

</script>

<header class="pt-6">
  <div
    class="flex items-center justify-between max-w-5xl mx-auto pt-4 px-4 sm:px-6 lg:px-8"
  >
    <h3 class="text-xl">
      <span class="cursor-pointer" onclick="window.location.href = '/products';"
        >Products</span
      >
      >
      <span class="cursor-pointer" onclick="window.history.back();"
        >{{product.name}}</span
      >
      > Analytics
    </h3>
  </div>
</header>

    <div id="correlation" class="flex self-center mx-auto my-auto">
      <table class="flex self-center mx-auto my-auto">
            <tr>
                <td> Real Price/Estimated Labor r={{ cor_labor_price | safe }}</td>
            </tr>
            <tr>
                <td> Real Price/Estimated Cost r={{ cor_cost_price | safe }}</td>
            </tr>
        </table>
  </div>

<div id="chart" class="max-w-5xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    <canvas id="line-graph"></canvas>
</div>

{% endblock %}
