{#
  IMAGE BLOCK — A single image, optionally linked and captioned.

  Email-client notes baked into the markup below:
    * The `width` ATTRIBUTE is what Outlook's Word engine honours; it
      ignores CSS `max-width`.  `max-width:100%` + `height:auto` then let
      every other client scale the image down on a narrow screen.
    * The same width is stated again as CSS, as a cap on `width:100%`: a
      print engine maps no presentational hint, and a fixed CSS width would
      widen a column narrower than it rather than shrink to fit (#201).
    * The image is inline-block in a zero-leading line box, so `text-align`
      places it and no descender gap opens under it; `border:0` kills the
      blue border Outlook draws around a linked one.
    * The caption sits outside the <a>, so tapping it does not navigate.

  Context:
    subtitle       — Optional sub-heading rendered above the image
    image_src      — Resolved src (hosted URL, cid: reference, or data: URI)
    image_alt      — Alt text; what the reader sees while images are blocked
    image_width    — Display width in px, or "" for full width
    image_align    — "left" | "center" | "right"
    link_url       — Optional href wrapping the image ("" for none)
    caption        — Optional caption rendered beneath the image, numbered
    anchor         — The figure's `id`, empty when it has none (#181)
    disclosure     — Compliance copy beneath the caption, from the partial
                     all three exhibits share
#}
{% from "common/notes.html" import marked with context %}
{% if subtitle %}
<p class="subtitle" 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 }};">{{ subtitle | escape_html }}</p>
{% endif %}
{% include "common/qualifier.html" %}
<table class="figure"{% if anchor %} id="{{ anchor | escape_html }}"{% endif %} role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
  <tr>
    <td align="{{ image_align | escape_html }}" style="padding: 0; text-align: {{ image_align }};">
      {# Inline, in a zero-leading line box placed by text-align: a block image
         ignores text-align, so a centred one sat at the left edge in every
         client but Outlook, and WeasyPrint resolves margin:auto against
         width:100% before the cap. The fix and its measurements are math.md's. #}
      <div align="{{ image_align | escape_html }}" style="font-size: 0; line-height: 0; text-align: {{ image_align }};">
      {% if link_url %}
      <a href="{{ link_url | escape_html }}" style="text-decoration: none; border: 0;">
      {% endif %}
      {# A decorative image is drawn as a CSS background in a paged render, and
         as an img everywhere else (#202). The print engine marks a background
         as an artifact, which is what PDF/UA wants for a mark that carries no
         information — where an img with alt="" becomes a Figure the tagger
         then reports as missing its required alt text. Nothing changes for
         email: Outlook needs the img, and medium.paged is false there, so the
         email goldens cannot move on this branch.

         Gated on image_height as well, because a background box has to be
         given a height where an img brings its own. Unknowable for a hosted
         image, and a guessed one would crop the mark — so that case keeps the
         img and the Figure, which is a smaller fault than a misdrawn rule. #}
      {% if medium.paged and image_decorative and image_height %}
      <div role="presentation" style="width: {{ image_width }}px; height: {{ image_height }}px; max-width: 100%; margin: {% if image_align == "center" %}0 auto{% elif image_align == "right" %}0 0 0 auto{% else %}0{% endif %};
           background-image: url('{{ image_src | escape_html }}'); background-repeat: no-repeat;
           background-size: contain; background-position: {{ image_align }} center;"></div>
      {% else %}
      {# role="presentation" travels with the empty alt, never alone: in the
         render the two spellings of alt="" are identical, so the annotation is
         the only thing that says which one this is — the same job it does on a
         layout table, and what the img-alt lint rule reads (#149). #}
      <img src="{{ image_src | escape_html }}" alt="{{ image_alt | escape_html }}"{% if image_decorative %} role="presentation"{% endif +%}
           {% if image_width %}width="{{ image_width }}"{% else %}width="100%"{% endif %}
           style="display: inline-block; vertical-align: top; border: 0; outline: none; text-decoration: none; width: 100%; max-width: {% if image_width %}{{ image_width }}px{% else %}100%{% endif %}; height: auto;">
      {% endif %}
      {% if link_url %}
      </a>
      {% endif %}
      </div>
      {% if caption %}
      <p 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 }};">{{ marked(caption_parts) }}</p>
      {% endif %}
      {% include "common/disclosure.html" %}
    </td>
  </tr>
</table>