{% extends "base.html" %}
{% block content %}
<h1>Contract {{ contract.id }} {{ contract.version }}</h1>
<p><a href="/contracts/{{ contract.id }}">Back to versions</a></p>
<p>
  <a class="btn btn-secondary btn-sm" href="/api/contracts/{{ contract.id }}/{{ contract.version }}">Download JSON</a>
  <a class="btn btn-primary btn-sm" href="/contracts/{{ contract.id }}/{{ contract.version }}/edit">Edit</a>
</p>

<ul class="nav nav-tabs" id="contractTabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">Overview</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="schema-tab" data-bs-toggle="tab" data-bs-target="#schema" type="button" role="tab">Schema</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="quality-tab" data-bs-toggle="tab" data-bs-target="#quality" type="button" role="tab">Quality</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="access-tab" data-bs-toggle="tab" data-bs-target="#access" type="button" role="tab">Access</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="change-log-tab" data-bs-toggle="tab" data-bs-target="#change-log" type="button" role="tab">Change Log</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="json-tab" data-bs-toggle="tab" data-bs-target="#json" type="button" role="tab">JSON</button>
  </li>
</ul>
<div class="tab-content mt-3" id="contractTabsContent">
  <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
    <dl class="row">
      <dt class="col-sm-3">Name</dt><dd class="col-sm-9">{{ contract.name }}</dd>
      {% if contract.description and contract.description.usage %}
      <dt class="col-sm-3">Description</dt><dd class="col-sm-9">{{ contract.description.usage }}</dd>
      {% endif %}
      {% if contract.servers %}
      <dt class="col-sm-3">Servers</dt>
      <dd class="col-sm-9">
        <ul class="list-unstyled mb-0">
        {% for s in contract.servers %}
          <li>
            {{ s.server }}{% if s.type %} ({{ s.type }}){% endif %}:
            {% if s.path %}{{ s.path }}{% elif s.dataset %}{{ s.dataset }}{% endif %}
          </li>
        {% endfor %}
        </ul>
      </dd>
      {% endif %}
    </dl>
    {% if datasets %}
    <h5>Datasets</h5>
    <ul>
      {% for d in datasets %}
      <li><a href="/datasets/{{ d.dataset_name }}/{{ d.dataset_version }}">{{ d.dataset_name }} {{ d.dataset_version }}</a> - {{ d.status }}</li>
      {% endfor %}
    </ul>
    {% endif %}
    {% set metrics_summary = metrics_summary | default({}) %}
    {% set latest_metrics = metrics_summary.get('latest') %}
    {% set previous_metrics = metrics_summary.get('previous', []) %}
    {% set chronological_history = metrics_summary.get('chronological_history', []) %}
    {% set numeric_metric_keys = metrics_summary.get('numeric_metric_keys', []) %}
    {% if metrics_error %}
    <div class="alert alert-warning">
      <strong>Metrics unavailable.</strong>
      <div class="small mb-0">{{ metrics_error }}</div>
    </div>
    {% endif %}
    {% if numeric_metric_keys and chronological_history %}
    <div class="card mb-3" id="contract-metric-trends">
      <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
        <div>
          <strong>Metric trends</strong>
          <span class="text-muted ms-2">{{ contract.id }} {{ contract.version }}</span>
        </div>
        <div class="text-muted small">
          {% if latest_metrics %}
          Latest {{ latest_metrics.recorded_label or latest_metrics.recorded_at or 'snapshot' }}
          {% else %}
          Latest snapshot
          {% endif %}
        </div>
      </div>
      <div class="card-body">
        <div class="chart-wrapper">
          <canvas id="contractMetricsChart" aria-label="Metric history chart" role="img"></canvas>
        </div>
      </div>
      <div class="card-footer small text-muted">
        Hover points to explore recorded timestamps, dataset versions, and upstream contract links. Only metrics with numeric values are plotted.
      </div>
    </div>
    {% endif %}
    {% if latest_metrics %}
    <h5 class="mt-4">Metrics</h5>
    <div class="card mb-3">
      <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
        <div>
          <strong>{{ latest_metrics.recorded_label or latest_metrics.recorded_at or 'Latest snapshot' }}</strong>
          {% if latest_metrics.dataset_version %}
          <span class="text-muted ms-2">Dataset {{ latest_metrics.dataset_version }}</span>
          {% endif %}
        </div>
        {% if latest_metrics.contract_id %}
        <div class="text-muted small">
          Contract {{ latest_metrics.contract_id }}{% if latest_metrics.contract_version %}:{{ latest_metrics.contract_version }}{% endif %}
        </div>
        {% endif %}
      </div>
      <div class="table-responsive">
        <table class="table table-sm mb-0">
          <thead>
            <tr><th scope="col">Metric</th><th scope="col">Value</th></tr>
          </thead>
          <tbody>
            {% for metric in latest_metrics.metrics %}
            <tr>
              <td><code>{{ metric.key }}</code></td>
              <td>{{ metric.value }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% elif not metrics_error %}
    <p class="text-muted">No metrics recorded for this contract yet.</p>
    {% endif %}
    {% if previous_metrics %}
    <details class="mb-3">
      <summary>Earlier metric snapshots</summary>
      <div class="mt-3">
        {% for snapshot in previous_metrics %}
        <div class="card mb-3">
          <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
            <div>
              <strong>{{ snapshot.recorded_label or snapshot.recorded_at or 'Snapshot' }}</strong>
              {% if snapshot.dataset_version %}
              <span class="text-muted ms-2">Dataset {{ snapshot.dataset_version }}</span>
              {% endif %}
            </div>
            {% if snapshot.contract_id %}
            <div class="text-muted small">
              Contract {{ snapshot.contract_id }}{% if snapshot.contract_version %}:{{ snapshot.contract_version }}{% endif %}
            </div>
            {% endif %}
          </div>
          <div class="table-responsive">
            <table class="table table-sm mb-0">
              <thead>
                <tr><th scope="col">Metric</th><th scope="col">Value</th></tr>
              </thead>
              <tbody>
                {% for metric in snapshot.metrics %}
                <tr>
                  <td><code>{{ metric.key }}</code></td>
                  <td>{{ metric.value }}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
        {% endfor %}
      </div>
    </details>
    {% endif %}
    {% if data_products %}
    <h5>Data products</h5>
    <div class="list-group mb-3">
      {% for entry in data_products %}
      <div class="list-group-item">
        <div class="d-flex justify-content-between align-items-start">
          <div>
            <div>
              <a href="/data-products/{{ entry.product_id }}">{{ entry.product_name }}</a>
              {% if entry.port_name %}
                <span class="text-muted">/</span>
                <code>{{ entry.port_name }}</code>
              {% endif %}
            </div>
            <div class="small text-muted">
              {{ entry.direction | capitalize }} port{% if entry.port_version %} · version {{ entry.port_version }}{% endif %}
            </div>
          </div>
          <span class="badge bg-secondary text-uppercase">{{ entry.direction }}</span>
        </div>
        {% if entry.custom_properties %}
        <details class="mt-2">
          <summary class="small text-muted">Custom properties</summary>
          <pre class="small bg-light p-2 mt-2 rounded">{{ entry.custom_properties | tojson(indent=2) }}</pre>
        </details>
        {% endif %}
      </div>
      {% endfor %}
    </div>
    {% endif %}
  </div>
  <div class="tab-pane fade" id="schema" role="tabpanel" aria-labelledby="schema-tab">
    {% for s in contract.schema %}
      <h5>{{ s.name }}</h5>
      <table class="table table-sm">
        <thead><tr><th>Name</th><th>Type</th><th>Required</th></tr></thead>
        <tbody>
        {% for p in s.properties %}
        <tr><td>{{ p.name }}</td><td>{{ p.physicalType }}</td><td>{{ 'yes' if p.required else 'no' }}</td></tr>
        {% endfor %}
        </tbody>
      </table>
    {% endfor %}
  </div>
  <div class="tab-pane fade" id="quality" role="tabpanel" aria-labelledby="quality-tab">
    {% if field_quality %}
    <h5>Field quality rules</h5>
    {% for field in field_quality %}
    <div class="card mb-3">
      <div class="card-header d-flex justify-content-between align-items-center">
        <div>
          <strong>{{ field.name }}</strong>
          {% if field.type %}<span class="text-muted">({{ field.type }})</span>{% endif %}
        </div>
        <span class="badge {{ 'bg-success' if field.required else 'bg-secondary' }}">{{ 'Required' if field.required else 'Optional' }}</span>
      </div>
      <div class="card-body">
        {% if field.rules %}
          {% for rule in field.rules %}
          <div class="mb-3">
            <h6 class="mb-1">{{ rule.title }}</h6>
            <ul class="small mb-2">
              {% for text in rule.conditions %}
              <li>{{ text }}</li>
              {% endfor %}
            </ul>
            {% if rule.severity or rule.dimension %}
            <p class="small text-muted mb-0">
              {% if rule.severity %}<span class="me-3">Severity: {{ rule.severity }}</span>{% endif %}
              {% if rule.dimension %}<span>Dimension: {{ rule.dimension }}</span>{% endif %}
            </p>
            {% endif %}
          </div>
          {% endfor %}
        {% else %}
        <p class="text-muted mb-0">No quality rules defined for this field.</p>
        {% endif %}
      </div>
    </div>
    {% endfor %}
    {% else %}
    <p>No field-level quality rules defined.</p>
    {% endif %}

    {% if dataset_quality %}
    <h5>Dataset-level quality rules</h5>
    {% for section in dataset_quality %}
    <div class="card mb-3">
      <div class="card-header">
        <strong>{{ section.name }}</strong>
      </div>
      <div class="card-body">
        {% for rule in section.rules %}
        <div class="mb-3">
          <h6 class="mb-1">{{ rule.title }}</h6>
          <ul class="small mb-2">
            {% for text in rule.conditions %}
            <li>{{ text }}</li>
            {% endfor %}
          </ul>
          {% if rule.severity or rule.dimension %}
          <p class="small text-muted mb-0">
            {% if rule.severity %}<span class="me-3">Severity: {{ rule.severity }}</span>{% endif %}
            {% if rule.dimension %}<span>Dimension: {{ rule.dimension }}</span>{% endif %}
          </p>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
    {% endif %}

    {% if expectations %}
    <h5>SQL predicates</h5>
    <table class="table table-sm">
      <thead><tr><th>Name</th><th>Predicate</th></tr></thead>
      <tbody>
      {% for name, expr in expectations.items() %}
      <tr><td>{{ name }}</td><td><code>{{ expr }}</code></td></tr>
      {% endfor %}
      </tbody>
    </table>
    {% endif %}
  </div>
  <div class="tab-pane fade" id="access" role="tabpanel" aria-labelledby="access-tab">
    {% if server_info %}
    <div class="card mb-3">
      <div class="card-header">Server definition</div>
      <div class="card-body">
        <dl class="row mb-0">
          <dt class="col-sm-3">Server</dt><dd class="col-sm-9">{{ server_info.server or '—' }}</dd>
          <dt class="col-sm-3">Type</dt><dd class="col-sm-9">{{ server_info.type or '—' }}</dd>
          <dt class="col-sm-3">Format</dt><dd class="col-sm-9">{{ server_info.format or '—' }}</dd>
          {% if server_info.path %}
          <dt class="col-sm-3">Path</dt><dd class="col-sm-9"><code>{{ server_info.path }}</code></dd>
          {% endif %}
          {% if server_info.dataset %}
          <dt class="col-sm-3">Dataset</dt><dd class="col-sm-9"><code>{{ server_info.dataset }}</code></dd>
          {% endif %}
          {% if server_info.dataset_id %}
          <dt class="col-sm-3">Dataset ID</dt><dd class="col-sm-9"><code>{{ server_info.dataset_id }}</code></dd>
          {% endif %}
        </dl>
      </div>
      {% if server_info.path_pattern or server_info.versioning or server_info.custom %}
      <div class="card-footer">
        {% if server_info.path_pattern %}
        <p class="mb-2"><strong>Path pattern:</strong> <code>{{ server_info.path_pattern }}</code></p>
        {% endif %}
        {% if server_info.versioning %}
        <div class="mb-2">
          <strong>Versioning guidance</strong>
          <pre class="small bg-light p-2 rounded mb-0">{{ server_info.versioning | tojson(indent=2) }}</pre>
        </div>
        {% endif %}
        {% if server_info.custom %}
        <details>
          <summary class="small text-muted">View raw custom properties</summary>
          <pre class="small bg-light p-2 mt-2 rounded">{{ server_info.custom | tojson(indent=2) }}</pre>
        </details>
        {% endif %}
      </div>
      {% endif %}
    </div>
    {% endif %}

    <div class="mb-3">
      <h5>Compatibility matrix</h5>
      {% if compatibility_versions %}
      <ul class="list-unstyled mb-0">
        {% for entry in compatibility_versions %}
        <li class="mb-1"><span class="badge {{ entry.badge }} me-2">{{ entry.status_label }}</span>{{ entry.version }}</li>
        {% endfor %}
      </ul>
      {% else %}
      <p class="text-muted mb-0">No compatibility verdicts recorded for this dataset yet.</p>
      {% endif %}
    </div>

    {% if preview_versions %}
    <div class="card" id="contract-data-panel"
         data-contract-id="{{ contract.id }}"
         data-contract-version="{{ contract.version }}"
         data-dataset-id="{{ preview_dataset_id }}"
         data-versions='{{ preview_versions | tojson | safe }}'
         data-status-map='{{ preview_status_map | tojson | safe }}'
         {% if preview_default_index is not none %}data-default-index="{{ preview_default_index }}"{% endif %}>
      <div class="card-header d-flex justify-content-between align-items-center">
        <div>
          <strong>Data preview</strong>
          {% if preview_dataset_id %}<div class="small text-muted">Dataset <code>{{ preview_dataset_id }}</code></div>{% endif %}
        </div>
        <div class="small text-muted">Showing first <span class="preview-limit-display">100</span> rows</div>
      </div>
      <div class="card-body">
        <div class="mb-3">
          <label for="data-version-slider" class="form-label">Select version</label>
          <input type="range" class="form-range data-version-slider" id="data-version-slider" min="0" max="{{ preview_versions|length - 1 }}" step="1" value="{{ preview_default_index if preview_default_index is not none else 0 }}" {% if preview_versions|length <= 1 %}disabled{% endif %}>
          <div class="d-flex justify-content-between small text-muted">
            <span>{{ preview_versions[0] }}</span>
            <span>{{ preview_versions[-1] }}</span>
          </div>
          <div class="mt-2">
            <span class="fw-semibold data-version-label"></span>
            <span class="badge bg-secondary ms-2 data-status-badge"></span>
          </div>
        </div>
        <div class="mb-3">
          <label for="data-limit-input" class="form-label">Rows to display</label>
          <input type="number" class="form-control form-control-sm data-limit-input" id="data-limit-input" value="100" min="1" max="500">
        </div>
        <div class="table-responsive">
          <table class="table table-sm table-striped data-preview-table">
            <thead></thead>
            <tbody></tbody>
          </table>
        </div>
        <p class="small text-muted data-preview-placeholder"></p>
      </div>
    </div>
    {% else %}
    <p class="text-muted">No dataset versions available for preview.</p>
    {% endif %}
  </div>
  <div class="tab-pane fade" id="change-log" role="tabpanel" aria-labelledby="change-log-tab">
    {% if change_log %}
    <div class="list-group">
      {% for entry in change_log %}
      <div class="list-group-item">
        <div class="d-flex justify-content-between align-items-start">
          <div>
            <span class="badge {{ status_badges.get(entry.status, 'bg-secondary') }}">{{ entry.status_label }}</span>
            <strong class="ms-2">{{ entry.scope_label }}</strong>
          </div>
          {% if entry.kind %}
          <small class="text-muted text-uppercase">{{ entry.kind }}</small>
          {% endif %}
        </div>
        {% if entry.summary %}
        <p class="mb-1 mt-2">{{ entry.summary }}</p>
        {% endif %}
        {% if entry.constraint %}
        <p class="mb-1 small text-muted"><strong>Constraint:</strong> {{ entry.constraint }}</p>
        {% endif %}
        {% if entry.rule %}
        <p class="mb-1 small text-muted"><strong>Rule:</strong> {{ entry.rule }}</p>
        {% endif %}
        {% if entry.details_text %}
        <pre class="small bg-light p-2 rounded">{{ entry.details_text }}</pre>
        {% endif %}
      </div>
      {% endfor %}
    </div>
    {% else %}
    <p class="text-muted">No change log entries available.</p>
    {% endif %}
  </div>
  <div class="tab-pane fade" id="json" role="tabpanel" aria-labelledby="json-tab">
    <pre class="small">{{ contract | tojson(indent=2) }}</pre>
  </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const panel = document.getElementById('contract-data-panel');
  if (!panel) {
    return;
  }
  const contractId = panel.dataset.contractId || '';
  const contractVersion = panel.dataset.contractVersion || '';
  const datasetId = panel.dataset.datasetId || '';
  let versions = [];
  try {
    versions = JSON.parse(panel.dataset.versions || '[]');
  } catch (err) {
    versions = [];
  }
  let statusMap = {};
  try {
    statusMap = JSON.parse(panel.dataset.statusMap || '{}');
  } catch (err) {
    statusMap = {};
  }
  const slider = panel.querySelector('.data-version-slider');
  const label = panel.querySelector('.data-version-label');
  const badge = panel.querySelector('.data-status-badge');
  const limitInput = panel.querySelector('.data-limit-input');
  const limitDisplay = panel.querySelector('.preview-limit-display');
  const table = panel.querySelector('.data-preview-table');
  const thead = table ? table.querySelector('thead') : null;
  const tbody = table ? table.querySelector('tbody') : null;
  const placeholder = panel.querySelector('.data-preview-placeholder');

  if (!slider || !label || !badge || !table || !thead || !tbody || !limitInput || versions.length === 0) {
    return;
  }

  const applyStatus = (version) => {
    const info = statusMap[version] || {};
    badge.className = 'badge ' + (info.badge || 'bg-secondary');
    badge.textContent = info.label || (info.status ? info.status.replace(/_/g, ' ').replace(/^./, c => c.toUpperCase()) : 'Unknown');
  };

  const updateLabel = (index) => {
    const safeIndex = Math.max(0, Math.min(index, versions.length - 1));
    const version = versions[safeIndex];
    label.textContent = version || '';
    applyStatus(version);
  };

  const formatValue = (value) => {
    if (value === null || value === undefined) {
      return '';
    }
    if (typeof value === 'object') {
      try {
        return JSON.stringify(value);
      } catch (err) {
        return String(value);
      }
    }
    return String(value);
  };

  const renderTable = (columns, rows) => {
    if (!thead || !tbody) {
      return;
    }
    thead.innerHTML = '';
    tbody.innerHTML = '';
    const resolvedColumns = Array.isArray(columns) && columns.length ? columns : (rows[0] ? Object.keys(rows[0]) : []);
    if (resolvedColumns.length) {
      const headerRow = document.createElement('tr');
      resolvedColumns.forEach((col) => {
        const th = document.createElement('th');
        th.textContent = col;
        headerRow.appendChild(th);
      });
      thead.appendChild(headerRow);
    }
    if (!rows.length) {
      if (placeholder) {
        placeholder.textContent = 'No rows available for this version.';
      }
      return;
    }
    rows.forEach((row) => {
      const tr = document.createElement('tr');
      resolvedColumns.forEach((col) => {
        const td = document.createElement('td');
        td.textContent = formatValue(row[col]);
        tr.appendChild(td);
      });
      tbody.appendChild(tr);
    });
    if (placeholder) {
      placeholder.textContent = '';
    }
  };

  const setVersions = (nextVersions, currentVersion) => {
    if (!Array.isArray(nextVersions) || !nextVersions.length) {
      return;
    }
    versions = nextVersions;
    slider.max = String(Math.max(versions.length - 1, 0));
    if (versions.length > 1) {
      slider.removeAttribute('disabled');
    } else {
      slider.setAttribute('disabled', 'disabled');
    }
    const idx = currentVersion ? versions.indexOf(currentVersion) : -1;
    const targetIndex = idx >= 0 ? idx : versions.length - 1;
    slider.value = String(Math.max(0, targetIndex));
    updateLabel(Number(slider.value));
  };

  const fetchPreview = async () => {
    const index = Number(slider.value) || 0;
    const version = versions[Math.max(0, Math.min(index, versions.length - 1))];
    if (placeholder) {
      placeholder.textContent = 'Loading preview…';
    }
    const limit = Number(limitInput.value) || 100;
    if (limitDisplay) {
      limitDisplay.textContent = String(limit);
    }
    const params = new URLSearchParams();
    params.set('dataset_version', version);
    params.set('limit', String(limit));
    if (datasetId) {
      params.set('dataset_id', datasetId);
    }
    let response;
    try {
      response = await fetch(`/api/contracts/${encodeURIComponent(contractId)}/${encodeURIComponent(contractVersion)}/preview?${params.toString()}`);
    } catch (err) {
      if (placeholder) {
        placeholder.textContent = 'Preview unavailable.';
      }
      return;
    }
    if (!response.ok) {
      if (placeholder) {
        placeholder.textContent = `Preview unavailable (status ${response.status}).`;
      }
      thead.innerHTML = '';
      tbody.innerHTML = '';
      return;
    }
    const data = await response.json();
    if (Array.isArray(data.known_versions) && data.known_versions.length) {
      setVersions(data.known_versions, data.dataset_version || version);
    }
    if (data.status && data.status.status) {
      statusMap[data.dataset_version] = {
        status: data.status.status,
        label: data.status.status_label,
        badge: data.status.badge,
      };
      applyStatus(data.dataset_version);
    }
    renderTable(data.columns || [], Array.isArray(data.rows) ? data.rows : []);
    if (!Array.isArray(data.rows) || !data.rows.length) {
      if (placeholder) {
        placeholder.textContent = 'No rows available for this version.';
      }
    }
  };

  slider.addEventListener('input', () => {
    updateLabel(Number(slider.value));
  });
  slider.addEventListener('change', fetchPreview);
  limitInput.addEventListener('change', fetchPreview);

  const defaultIndex = Number(panel.dataset.defaultIndex || slider.max || 0);
  slider.value = String(Math.max(0, Math.min(defaultIndex, versions.length - 1)));
  updateLabel(Number(slider.value));
  fetchPreview();
});
</script>
{% endblock %}
{% block page_scripts %}
{{ super() }}
{% if numeric_metric_keys and chronological_history %}
<script>
  (function () {
    const canvas = document.getElementById('contractMetricsChart');
    if (!canvas || !window.Chart) {
      return;
    }
    const history = {{ chronological_history | tojson }};
    const metricKeys = {{ numeric_metric_keys | tojson }};
    if (!Array.isArray(history) || !Array.isArray(metricKeys) || !history.length || !metricKeys.length) {
      return;
    }
    const labels = history.map((snapshot) => snapshot.recorded_label || snapshot.recorded_at || 'Snapshot');
    const datasetVersions = history.map((snapshot) => snapshot.dataset_version || '');
    const contractLabels = history.map((snapshot) => {
      if (!snapshot.contract_id) {
        return '';
      }
      return snapshot.contract_version ? `${snapshot.contract_id}:${snapshot.contract_version}` : snapshot.contract_id;
    });
    const palette = ['#0d6efd', '#198754', '#dc3545', '#fd7e14', '#6610f2', '#20c997', '#6f42c1', '#0dcaf0', '#ffc107', '#343a40'];
    const datasets = metricKeys.map((key, index) => {
      const colour = palette[index % palette.length];
      const data = history.map((snapshot) => {
        const metric = (snapshot.metrics || []).find((item) => item.key === key);
        if (metric && metric.numeric_value !== null && metric.numeric_value !== undefined) {
          const value = Number(metric.numeric_value);
          return Number.isFinite(value) ? value : null;
        }
        return null;
      });
      if (!data.some((value) => value !== null)) {
        return null;
      }
      return {
        label: key,
        data,
        spanGaps: true,
        tension: 0.25,
        borderWidth: 2,
        pointRadius: 3,
        pointHoverRadius: 4,
        borderColor: colour,
        backgroundColor: `${colour}33`,
      };
    }).filter(Boolean);
    if (!datasets.length) {
      const wrapper = canvas.closest('.card');
      if (wrapper) {
        wrapper.classList.add('d-none');
      }
      return;
    }
    new window.Chart(canvas, {
      type: 'line',
      data: {
        labels,
        datasets,
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        interaction: {
          mode: 'nearest',
          axis: 'x',
          intersect: false,
        },
        scales: {
          y: {
            ticks: {
              precision: 3,
            },
            title: {
              display: true,
              text: 'Value',
            },
          },
        },
        plugins: {
          tooltip: {
            callbacks: {
              title(items) {
                if (!items.length) {
                  return '';
                }
                const index = items[0].dataIndex;
                const lines = [];
                if (labels[index]) {
                  lines.push(labels[index]);
                }
                if (datasetVersions[index]) {
                  lines.push(`Dataset ${datasetVersions[index]}`);
                }
                if (contractLabels[index]) {
                  lines.push(contractLabels[index]);
                }
                return lines;
              },
            },
          },
          legend: {
            display: true,
          },
        },
      },
    });
  })();
</script>
{% endif %}
{% endblock %}