{% if sections.time_series_decomposition is defined
      and sections.time_series_decomposition.chart is defined
      and sections.time_series_decomposition.chart.images is defined %}
{% set images = sections.time_series_decomposition.chart.images %}

<section>
  <h2>📊 &#12316; Time Series Decomposition</h2>
  <p class="section-desc">
    This section shows decomposition of the target series into observed, trend, seasonal, and residual components.
  </p>

  <div style="overflow-x:auto; margin-bottom:24px;">
    <table style="width:100%; border-collapse:collapse; table-layout:fixed;">
      <colgroup>
        <col style="width:220px;">
        <col style="width:420px;">
      </colgroup>
      <thead>
        <tr>
          <th style="text-align:left; padding:10px; border-bottom:1px solid #ddd;">Description</th>
          <th style="text-align:center; padding:10px; border-bottom:1px solid #ddd;">Chart</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="padding:10px; border-bottom:1px solid #eee; vertical-align:top; font-size:16px; color:#222;">
            Actual (Observed) KPI values over time before decomposition.
          </td>
          <td style="padding:10px; border-bottom:1px solid #eee; text-align:center;">
            {% if images.observed %}
            <a style="display:inline-block; width:100%; height:180px; border:1px solid #ddd; border-radius:6px; overflow:hidden; background:#fafafa;">
              <img src="{{ images.observed }}"
                   alt="Observed series chart"
                   style="width:100%; height:100%; padding:10px; object-fit:contain; display:block;">
            </a>
            {% else %}
            -
            {% endif %}
          </td>
        </tr>

        <tr>
          <td style="padding:10px; border-bottom:1px solid #eee; vertical-align:top; font-size:16px; color:#222;">
            Trend component showing the underlying trend in the data over time.
          </td>
          <td style="padding:10px; border-bottom:1px solid #eee; text-align:center;">
            {% if images.trend %}
            <a style="display:inline-block; width:100%; height:180px; border:1px solid #ddd; border-radius:6px; overflow:hidden; background:#fafafa;">
              <img src="{{ images.trend }}"
                   alt="Trend component chart"
                   style="width:100%; height:100%; padding:10px; object-fit:contain; display:block;">
            </a>
            {% else %}
            -
            {% endif %}
          </td>
        </tr>

        <tr>
          <td style="padding:10px; border-bottom:1px solid #eee; vertical-align:top; font-size:16px; color:#222;">
            Seasonal component showing repeating patterns or cycles in the data over time.
          </td>
          <td style="padding:10px; border-bottom:1px solid #eee; text-align:center;">
            {% if images.seasonal %}
            <a style="display:inline-block; width:100%; height:180px; border:1px solid #ddd; border-radius:6px; overflow:hidden; background:#fafafa;">
              <img src="{{ images.seasonal }}"
                   alt="Seasonal component chart"
                   style="width:100%; height:100%; padding:10px; object-fit:contain; display:block;">
            </a>
            {% else %}
            -
            {% endif %}
          </td>
        </tr>

        <tr>
          <td style="padding:10px; border-bottom:1px solid #eee; vertical-align:top; font-size:16px; color:#222;">
            Unexplained residuals after removing trend and seasonal components, indicating noise or irregular patterns in the data.
          </td>
          <td style="padding:10px; border-bottom:1px solid #eee; text-align:center;">
            {% if images.residuals %}
            <a style="display:inline-block; width:100%; height:180px; border:1px solid #ddd; border-radius:6px; overflow:hidden; background:#fafafa;">
              <img src="{{ images.residuals }}"
                   alt="Residuals component chart"
                   style="width:100%; height:100%; padding:10px; object-fit:contain; display:block;">
            </a>
            {% else %}
            -
            {% endif %}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
{% endif %}