{#
  CHART BLOCK — Image/chart with source attribution.

  Context:
    align        — Optional alignment for this component's copy; empty means
                   inherit the container's, by ordinary CSS inheritance (#127)
    subtitle          — Optional sub-heading rendered above the chart
    chart_image_url   — Resolved src (hosted URL, cid: reference, or data: URI)
    chart_alt_text    — Alt text for accessibility
    chart_image_width — Display width in px, or "" for full width.  The
                        ATTRIBUTE is what Outlook's Word engine honours; it
                        ignores CSS max-width.  The CSS repeats it as a cap
                        on 100%, for a print engine, which reads no
                        attribute (#201).
    chart_source      — Attribution string (optional)
    caption           — The heading line, already numbered by the document
    anchor            — The figure's `id`, empty when it has none (#181)
    disclosure        — Compliance copy beneath the attribution; the key is
                        bare rather than `chart_`-prefixed because all three
                        exhibits include one shared partial
    legend            — The chart's key, already rendered (#337); empty for none
#}
{% from "common/notes.html" import marked with context %}
{% if subtitle %}
<p class="subtitle"{% if align %} align="{{ align | escape_html }}"{% endif %} style="font-family: {{ font.body }}; font-size: {{ size.type.secondary }}px; font-style: italic; color: {{ theme.text.secondary }}; margin: 0 0 {% if qualifier %}0{% else %}{{ size.space.subtitle_gap }}px{% endif %} 0; line-height: {{ size.type.secondary_line | percent }};{% if align %} text-align:{{ align }};{% endif %}">{{ subtitle | escape_html }}</p>
{% endif %}
{% include "common/qualifier.html" %}
{# The caption is a row of the figure table rather than a paragraph above
   it, so the figure's break rule keeps it with its chart and the anchor on
   the table lands on the heading a reader was sent to. #}
<table class="figure"{% if anchor %} id="{{ anchor | escape_html }}"{% endif %} role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
{% if caption %}
  <tr>
    <td{% if align %} align="{{ align | escape_html }}"{% endif %} style="padding: 0 0 {{ size.space.caption_gap }}px 0; font-family: {{ font.label }}; font-size: {{ size.type.label }}px; font-weight: bold; color: {{ theme.text.heading }}; letter-spacing: 0.5px; line-height: {{ size.type.body_line | percent }};{% if align %} text-align:{{ align }};{% endif %}">{{ marked(caption_parts) }}</td>
  </tr>
{% endif %}
  <tr>
    <td{% if align %} align="{{ align | escape_html }}"{% endif %} style="padding: 0;{% if align %} text-align:{{ align }};{% endif %}">
      {# An aligned chart is inline in a zero-leading line box, as image-block.html's
         image is and for its reason; an unaligned one keeps the block image. #}
      {% if align %}
      <div align="{{ align | escape_html }}" style="font-size: 0; line-height: 0; text-align: {{ align }};">
      {% endif %}
      <img src="{{ chart_image_url | escape_html }}" alt="{{ chart_alt_text | escape_html }}"
           {% if chart_image_width %}width="{{ chart_image_width }}"{% else %}width="100%"{% endif %}
           style="display: {% if align %}inline-block; vertical-align: top{% else %}block{% endif %}; width: 100%; max-width: {% if chart_image_width %}{{ chart_image_width }}px{% else %}100%{% endif %}; height: auto; border: 1px solid {{ theme.palette.rule }}; margin: 0;">
      {% if align %}
      </div>
      {% endif %}
    </td>
  </tr>
</table>
{% if legend %}
{{ legend }}
{% endif %}
{% if chart_source %}
<p class="fine-print"{% if align %} align="{{ align | escape_html }}"{% endif %} style="font-family: {{ font.label }}; font-size: {{ size.type.micro }}px; color: {{ theme.text.light }}; font-style: italic; margin: {{ size.space.caption_gap }}px 0 0 0; line-height: {{ size.type.body_line | percent }};{% if align %} text-align:{{ align }};{% endif %}">{{ marked(chart_source_parts) }}</p>
{% endif %}
{% include "common/disclosure.html" %}