{% extends "layout.html" %}
{% block content %}
<section class="ui-shell">
<div class="space-y-6">
  <div class="ui-breadcrumb">
    <a href="/admin/prs">Pull Requests</a>
    <span>›</span>
    <span class="ui-breadcrumb-current">PR #{{ pr.pr_number }}</span>
  </div>

  <div class="ui-surface p-6 md:p-8 space-y-8">
    {# Header #}
    <div class="flex flex-wrap items-start justify-between gap-4">
      <div>
        <p class="ui-eyebrow">Pull Request</p>
        <h1 class="ui-page-title mt-2">#{{ pr.pr_number }}</h1>
        <div class="mt-3 flex flex-wrap items-center gap-2">
          <a href="{{ pr.pr_url }}" target="_blank" rel="noopener"
             class="inline-flex items-center gap-1.5 text-sm font-medium text-brand-500 dark:text-brand-300 hover:underline">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.745 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/></svg>
            {{ pr.pr_url }}
            <svg class="w-3.5 h-3.5 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
          </a>
        </div>
        <div class="mt-2 flex flex-wrap items-center gap-2">
          {% if pr.status == 'open' %}
          <span class="ui-pill ui-pill-blue">Open</span>
          {% elif pr.status == 'merged' %}
          <span class="ui-pill ui-pill-success">Merged</span>
          {% else %}
          <span class="ui-pill ui-pill-neutral">Closed</span>
          {% endif %}
          {% if verified_data %}
            {% if verified_data.status == 'confirmed' %}
            <span class="ui-pill ui-pill-success">Savings Confirmed</span>
            {% elif verified_data.status == 'negative' %}
            <span class="ui-pill ui-pill-danger">Costs Increased</span>
            {% elif verified_data.status == 'collecting' %}
            <span class="ui-pill ui-pill-blue">Collecting Data</span>
            {% elif verified_data.status == 'pending' %}
            <span class="ui-pill ui-pill-neutral">Tracking Pending</span>
            {% elif verified_data.status == 'insufficient_data' %}
            <span class="ui-pill ui-pill-warning">Insufficient Data</span>
            {% endif %}
          {% endif %}
        </div>
      </div>
    </div>

    {# PR details - 2 column layout #}
    <div class="grid gap-4 sm:grid-cols-2">
      <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4">
        <p class="ui-card-label">Repository</p>
        <p class="mt-1.5 ui-type-body-sm font-medium text-slate-900 dark:text-slate-100 break-all">
          {{ pr.repository }}
        </p>
      </div>
      <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4">
        <p class="ui-card-label">Branch</p>
        <p class="mt-1.5 ui-type-body-sm font-medium text-slate-900 dark:text-slate-100 break-all">
          {{ pr.branch_name }}
        </p>
      </div>
      <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4">
        <p class="ui-card-label">Created</p>
        <p class="mt-1.5 ui-type-body-sm font-medium text-slate-900 dark:text-slate-100">
          {{ pr.created_at.strftime('%d %b %Y %H:%M') if pr.created_at else '—' }}
        </p>
      </div>
      <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4">
        <p class="ui-card-label">Merged</p>
        <p class="mt-1.5 ui-type-body-sm font-medium text-slate-900 dark:text-slate-100">
          {{ pr.merged_at.strftime('%d %b %Y %H:%M') if pr.merged_at else '—' }}
        </p>
      </div>
    </div>

    {# Lifecycle #}
    <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4">
      <div class="flex items-center justify-between gap-3">
        <div>
          <p class="ui-card-label">Lifecycle</p>
          <p class="ui-card-meta">Created -> Open -> Verified -> Merged -> Savings collected</p>
        </div>
        {% if pr.pr_url %}
        <a href="{{ pr.pr_url }}" target="_blank" rel="noopener"
           class="inline-flex items-center gap-1.5 text-sm font-medium text-brand-500 dark:text-brand-300 hover:underline">
          Open on GitHub
          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4m4-8v6m0 0h-6m6 0L10 14"/></svg>
        </a>
        {% endif %}
      </div>
      {% set lifecycle_verified = verified_data and verified_data.status in ['confirmed', 'negative'] %}
      {% set lifecycle_collecting = verified_data and verified_data.status in ['collecting', 'pending', 'insufficient_data'] %}
      <div class="mt-4 grid gap-3 md:grid-cols-5">
        <div class="border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 p-3">
          <p class="ui-card-label">Created</p>
          <p class="mt-1 text-sm font-medium text-slate-900 dark:text-slate-100">
            {{ pr.created_at.strftime('%d %b %Y %H:%M') if pr.created_at else '—' }}
          </p>
        </div>
        <div class="border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 p-3">
          <p class="ui-card-label">Open</p>
          <p class="mt-1 text-sm font-medium {% if pr.status == 'open' %}text-brand-700 dark:text-brand-200{% else %}text-slate-900 dark:text-slate-100{% endif %}">
            {% if pr.status == 'open' %}Open{% else %}Archived{% endif %}
          </p>
        </div>
        <div class="border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 p-3">
          <p class="ui-card-label">Verified</p>
          <p class="mt-1 text-sm font-medium {% if lifecycle_verified %}{% if verified_data.status == 'confirmed' %}text-emerald-700 dark:text-emerald-300{% else %}text-red-700 dark:text-red-300{% endif %}{% elif lifecycle_collecting %}text-brand-700 dark:text-brand-200{% else %}text-slate-900 dark:text-slate-100{% endif %}">
            {% if lifecycle_verified %}
              {{ verified_data.status | replace('_', ' ') | title }}
            {% elif lifecycle_collecting %}
              {{ verified_data.status | replace('_', ' ') | title }}
            {% else %}
              Pending
            {% endif %}
          </p>
        </div>
        <div class="border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 p-3">
          <p class="ui-card-label">Merged</p>
          <p class="mt-1 text-sm font-medium {% if pr.merged_at %}text-emerald-700 dark:text-emerald-300{% else %}text-slate-900 dark:text-slate-100{% endif %}">
            {% if pr.merged_at %}Merged{% else %}Waiting{% endif %}
          </p>
        </div>
        <div class="border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 p-3">
          <p class="ui-card-label">Savings Collected</p>
          <p class="mt-1 text-sm font-medium {% if lifecycle_verified %}text-brand-700 dark:text-brand-200{% elif lifecycle_collecting %}text-amber-700 dark:text-amber-300{% else %}text-slate-900 dark:text-slate-100{% endif %}">
            {% if lifecycle_verified %}
              Collected
            {% elif lifecycle_collecting %}
              Collecting
            {% else %}
              Pending
            {% endif %}
          </p>
        </div>
      </div>
    </div>

    {% if opportunity %}
    {# Linked opportunity #}
    <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4">
      <p class="text-xs font-medium uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-3">Linked Opportunity</p>
      <div class="flex flex-wrap items-center gap-3">
        <span class="ui-pill ui-pill-neutral">{{ opportunity.opportunity_type | replace('_', ' ') | title }}</span>
        <span class="text-sm font-mono font-medium text-slate-800 dark:text-slate-200">{{ opportunity.affected_table }}</span>
        {% if opportunity.dbt_model_name %}
        <span class="text-sm text-slate-500 dark:text-slate-400">
          dbt: <code class="font-mono text-slate-700 dark:text-slate-300">{{ opportunity.dbt_model_name }}</code>
        </span>
        {% endif %}
      </div>
      {% if config %}
      <a href="/projects/{{ config.id }}/opportunities/{{ opportunity.id }}"
         class="mt-3 inline-block text-sm text-brand-500 dark:text-brand-300 hover:underline">
        View opportunity details &rarr;
      </a>
      {% endif %}
    </div>
    {% endif %}

    {% if verified_data and verified_data.status in ['confirmed', 'negative'] %}
    {# Verified savings metrics #}
    <div>
      <h2 class="ui-card-label mb-3">Post-Merge Cost Verification</h2>
      <div class="grid gap-4 sm:grid-cols-3">
        <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4">
          <p class="ui-card-label">Pre-Merge Avg Cost</p>
          <p class="mt-1.5 text-lg font-semibold text-slate-900 dark:text-slate-100">
            {% if verified_data.pre_merge_avg_cost is not none %}
            {{ verified_data.pre_merge_avg_cost | format_usd }}
            {% else %}—{% endif %}
          </p>
          <p class="mt-1 ui-card-meta">{{ verified_data.pre_merge_job_count }} jobs</p>
        </div>
        <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4">
          <p class="ui-card-label">Post-Merge Avg Cost</p>
          <p class="mt-1.5 text-lg font-semibold text-slate-900 dark:text-slate-100">
            {% if verified_data.post_merge_avg_cost is not none %}
            {{ verified_data.post_merge_avg_cost | format_usd }}
            {% else %}—{% endif %}
          </p>
          <p class="mt-1 ui-card-meta">{{ verified_data.post_merge_job_count }} jobs</p>
        </div>
        <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4">
          <p class="ui-card-label">Verified Savings</p>
          <p class="mt-1.5 text-lg font-semibold {% if verified_data.status == 'confirmed' %}text-emerald-600 dark:text-emerald-400{% elif verified_data.status == 'negative' %}text-red-600 dark:text-red-400{% endif %}">
            {% if verified_data.verified_savings is not none %}
            {{ verified_data.verified_savings | format_usd }}
            {% else %}—{% endif %}
          </p>
          <p class="mt-1 ui-card-meta">Per run</p>
        </div>
      </div>
    </div>
    {% elif verified_data and verified_data.status == 'collecting' %}
    <div class="border border-blue-200 bg-blue-50 px-4 py-3 dark:border-blue-800 dark:bg-blue-950">
      <p class="text-sm text-blue-700 dark:text-blue-300">
        Collecting post-merge job data. The cost verification chart will populate as new jobs run.
      </p>
    </div>
    {% elif verified_data and verified_data.status == 'pending' %}
    <div class="border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-700 dark:bg-slate-800">
      <p class="text-sm text-slate-600 dark:text-slate-400">
        Cost tracking will begin after the next scheduled sync.
      </p>
    </div>
    {% endif %}

    {% if verified_comparison %}
    <div class="border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 p-4">
      <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
        <div>
          <p class="ui-card-label">Verified Savings Comparison</p>
          <p class="ui-card-meta">Average BigQuery job cost before and after merge</p>
        </div>
        <span class="ui-pill {% if verified_data and verified_data.status == 'confirmed' %}ui-pill-success{% else %}ui-pill-danger{% endif %}">
          {{ verified_data.status | replace('_', ' ') | title }}
        </span>
      </div>
      <div id="pr-verified-comparison-chart"
           class="h-72 w-full"
           data-comparison='{{ verified_comparison | tojson }}'>
      </div>
    </div>
    {% endif %}

    {# ──────────────── Code Diff ──────────────── #}
    <div>
      <h2 class="ui-card-label mb-3">Code Changes</h2>
      {% if solution_diffs and solution_diffs | length > 0 %}
        {% for sol_diff in solution_diffs %}
        <div class="{% if not loop.first %}mt-4{% endif %}">
          {% set file_path = sol_diff.file_path %}
          {% set diff_lines = sol_diff.diff_lines %}
          {% include "components/code_diff.html" %}
        </div>
        {% endfor %}
      {% elif diff_error %}
        <div class="border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950 p-4">
          <p class="text-sm text-amber-700 dark:text-amber-300">
            Could not fetch diff from GitHub: {{ diff_error }}
          </p>
          <a href="{{ pr.pr_url }}/files" target="_blank" rel="noopener"
             class="mt-2 inline-flex items-center gap-1.5 text-sm text-brand-500 dark:text-brand-300 hover:underline">
            View diff on GitHub instead
            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
          </a>
        </div>
      {% else %}
        <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-6 text-center">
          <p class="text-sm text-slate-500 dark:text-slate-400">No code changes available for this PR.</p>
        </div>
      {% endif %}
    </div>

    {# ──────────────── Cost Trend Chart ──────────────── #}
    <div>
      <h2 class="ui-card-label mb-3">Cost Trend</h2>
      {% if cost_trend and cost_trend | length > 0 %}
      <div id="pr-cost-chart" class="h-80 w-full border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 p-2"
           data-trend='{{ cost_trend | tojson }}'
           data-merged-at='{{ merged_at_str | tojson }}'>
      </div>
      {% else %}
      <div class="h-48 flex items-center justify-center border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900">
        <p class="text-sm text-slate-500 dark:text-slate-400">
          {% if pr.status == 'open' %}
          Cost trend will appear after the PR is merged and jobs begin running.
          {% else %}
          No job cost data available for this table yet.
          {% endif %}
        </p>
      </div>
      {% endif %}
    </div>

    {# ──────────────── Cost History Table ──────────────── #}
    {% if cost_history and cost_history | length > 0 %}
    <div>
      <h2 class="ui-card-label mb-3">Cost History</h2>
      <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 overflow-x-auto">
        <table class="w-full text-sm">
          <thead>
            <tr class="border-b border-slate-200 dark:border-slate-800 text-left text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider">
              <th class="py-2.5 px-4">Run Time</th>
              <th class="py-2.5 px-4 text-right">Run Cost</th>
              {% if merged_at_str %}
              <th class="py-2.5 px-4 text-right">Saving</th>
              <th class="py-2.5 px-4 text-right">Cumulative Savings</th>
              {% endif %}
            </tr>
          </thead>
          <tbody class="text-slate-700 dark:text-slate-300">
            {% for row in cost_history %}
            {# Merge date divider row #}
            {% if row.is_merge_date %}
            <tr class="border-y-2 border-emerald-400 dark:border-emerald-500">
              <td colspan="{% if merged_at_str %}4{% else %}2{% endif %}" class="py-2 px-4 text-center">
                <span class="inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-600 dark:text-emerald-400 uppercase tracking-wider">
                  <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                  PR Merged — {{ merged_at_str }}
                </span>
              </td>
            </tr>
            {% endif %}
            <tr class="{% if not loop.last %}border-b border-slate-100 dark:border-slate-800/50{% endif %} {% if row.is_post_merge %}bg-emerald-50/30 dark:bg-emerald-950/10{% endif %}">
              <td class="py-2 px-4 text-xs whitespace-nowrap">{{ row.date }}</td>
              <td class="py-2 px-4 text-right font-mono text-xs">${{ '%.6f' % row.cost }}</td>
              {% if merged_at_str %}
              <td class="py-2 px-4 text-right font-mono text-xs">
                {% if row.is_post_merge and row.saving is defined %}
                  <span class="{% if row.saving >= 0 %}text-emerald-600 dark:text-emerald-400{% else %}text-red-600 dark:text-red-400{% endif %}">
                    {{ '+' if row.saving >= 0 else '' }}${{ '%.6f' % row.saving }}
                  </span>
                {% else %}
                  <span class="text-slate-400 dark:text-slate-600">—</span>
                {% endif %}
              </td>
              <td class="py-2 px-4 text-right font-mono text-xs">
                {% if row.is_post_merge and row.cumulative_savings is defined %}
                  <span class="font-semibold {% if row.cumulative_savings >= 0 %}text-emerald-600 dark:text-emerald-400{% else %}text-red-600 dark:text-red-400{% endif %}">
                    {{ '+' if row.cumulative_savings >= 0 else '' }}${{ '%.6f' % row.cumulative_savings }}
                  </span>
                {% else %}
                  <span class="text-slate-400 dark:text-slate-600">—</span>
                {% endif %}
              </td>
              {% endif %}
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% endif %}

  </div>

  <a href="/admin/prs" class="inline-block text-sm text-brand-500 dark:text-brand-300 hover:underline">
    &larr; Back to Pull Requests
  </a>
</div>
</section>

{% if cost_trend and cost_trend | length > 0 %}
<script>
(function() {
  var el = document.getElementById('pr-cost-chart');
  if (!el) return;

  var trendData = JSON.parse(el.getAttribute('data-trend'));
  var mergedAt = JSON.parse(el.getAttribute('data-merged-at'));
  if (!trendData.length) return;

  var isDark = ChartUtils.isDarkMode();
  var axis = ChartUtils.getAxisStyle(isDark);
  var costColor = ChartUtils.getSeriesColor('cost');

  var dates = trendData.map(function(d) { return d.date; });
  var costs = trendData.map(function(d) { return d.cost; });

  var chart = echarts.init(el, isDark ? 'dark' : null);

  var option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross', crossStyle: { color: '#6a7985' } },
      formatter: function(params) {
        var raw = params[0].axisValue;
        var lines = [raw];
        for (var i = 0; i < params.length; i++) {
          if (params[i].seriesType === 'line') {
            lines.push('Run cost: ' + ChartUtils.formatCurrency(params[i].value));
          }
        }
        return lines.join('<br/>');
      }
    },
    legend: {
      show: false
    },
    grid: { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dates,
      axisLabel: {
        color: axis.textColor,
        fontSize: 10,
        rotate: dates.length > 20 ? 45 : 0
      },
      axisLine: { lineStyle: { color: axis.lineColor } },
      splitLine: { show: false }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: axis.textColor,
        fontSize: 10,
        formatter: function(v) { return ChartUtils.formatCurrency(v); }
      },
      axisLine: { lineStyle: { color: axis.lineColor } },
      splitLine: { lineStyle: { color: axis.splitColor } }
    },
    series: [{
      name: 'Run Cost',
      type: 'line',
      data: costs,
      smooth: false,
      symbolSize: 6,
      lineStyle: { color: costColor, width: 2 },
      itemStyle: { color: costColor },
      areaStyle: {
        color: ChartUtils.getAreaGradient(ChartUtils.BRAND_COLORS.primary, isDark)
      }
    }]
  };

  // Add merge date vertical line — find closest run index by date
  if (mergedAt) {
    var mergeIdx = -1;
    for (var i = 0; i < dates.length; i++) {
      // dates are "YYYY-MM-DD HH:MM", mergedAt is "YYYY-MM-DD"
      if (dates[i].substring(0, 10) >= mergedAt) { mergeIdx = i; break; }
    }
    if (mergeIdx === -1 && dates.length > 0) mergeIdx = dates.length - 1;
    if (mergeIdx >= 0) {
      option.series.push({
        name: 'PR Merged',
        type: 'line',
        markLine: {
          silent: true,
          symbol: 'none',
          lineStyle: {
            color: '#10B981',
            width: 2,
            type: 'dashed'
          },
          label: {
            formatter: 'PR Merged',
            position: 'insideStartTop',
            color: '#10B981',
            fontSize: 11,
            fontWeight: 'bold'
          },
          data: [{ xAxis: mergeIdx }]
        },
        data: []
      });
    }
  }

  chart.setOption(option);
  window.addEventListener('resize', function() { chart.resize(); });
})();
</script>
{% endif %}

{% if verified_comparison %}
<script>
(function() {
  var el = document.getElementById('pr-verified-comparison-chart');
  if (!el) return;

  var comparison = JSON.parse(el.getAttribute('data-comparison'));
  if (!comparison) return;

  var isDark = ChartUtils.isDarkMode();
  var axis = ChartUtils.getAxisStyle(isDark);
  var brandColor = ChartUtils.getSeriesColor('brand');
  var tealColor = ChartUtils.getSeriesColor('consumption');

  var chart = echarts.init(el, isDark ? 'dark' : null);
  chart.setOption({
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      formatter: function(params) {
        var lines = [params[0].axisValue];
        for (var i = 0; i < params.length; i++) {
          lines.push(params[i].marker + ' ' + params[i].seriesName + ': ' + ChartUtils.formatCurrency(params[i].value));
        }
        return lines.join('<br/>');
      }
    },
    legend: {
      data: [comparison.pre_label, comparison.post_label],
      textStyle: { color: axis.textColor }
    },
    grid: { left: '3%', right: '4%', bottom: '3%', top: '16%', containLabel: true },
    xAxis: {
      type: 'category',
      data: ['Cost'],
      axisLabel: { color: axis.textColor },
      axisLine: { lineStyle: { color: axis.lineColor } },
      splitLine: { show: false }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: axis.textColor,
        formatter: function(v) { return ChartUtils.formatCurrency(v); }
      },
      axisLine: { lineStyle: { color: axis.lineColor } },
      splitLine: { lineStyle: { color: axis.splitColor } }
    },
    series: [
      {
        name: comparison.pre_label,
        type: 'bar',
        barWidth: 28,
        data: [comparison.pre_cost],
        itemStyle: { color: brandColor }
      },
      {
        name: comparison.post_label,
        type: 'bar',
        barWidth: 28,
        data: [comparison.post_cost],
        itemStyle: { color: tealColor }
      }
    ],
    graphic: comparison.verified_savings !== undefined ? [{
      type: 'text',
      left: 'center',
      top: 6,
      style: {
        text: 'Verified savings: ' + ChartUtils.formatCurrency(comparison.verified_savings),
        fill: axis.textColor,
        fontSize: 13,
        fontWeight: '600'
      }
    }] : []
  });

  window.addEventListener('resize', function() { chart.resize(); });
})();
</script>
{% endif %}

{% endblock %}