{% extends "base.html" %}
{% block title %}{{ name }} — Compare{% endblock %}

{% block content %}
<div class="page-header d-print-none mt-3">
  <div class="row align-items-center">
    <div class="col">
      <div class="page-pretitle"><a href="{{ url_for('.items') }}">Line Items</a></div>
      <h2 class="page-title">{{ name }}</h2>
    </div>
  </div>
</div>

<div class="card mt-3">
  <div class="card-body">
    <div id="compare-chart"></div>
  </div>
</div>

<div class="card mt-3">
  <div class="card-body p-0">
    {{ table_html | safe }}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
  var spec = {{ chart_data | safe }};
  var options = apexOptionsFromSpec(spec, 320);
  new ApexCharts(document.querySelector('#compare-chart'), options).render();
}());
</script>
{% endblock %}