{#
  The two pieces of chrome every transactional mail needs.

  Both are tables rather than styled block elements, because a <div> with
  padding and a background colour is the one thing Outlook's Word renderer
  reliably gets wrong. Every rule is inline for the same reason: Gmail's web
  client strips <style> from the document it renders on some paths, so the
  stylesheet in _layout.html is only allowed to hold things a message can
  survive losing (the media query).
#}

{# The call to action. `url` is already absolute; `label` is short enough not
   to wrap on a phone, which is why it is not a block. #}
{% macro button(url, label) -%}
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
  <tr>
    <td align="center" bgcolor="#2f6fed" style="border-radius: 8px;">
      <a href="{{ url }}"
         style="display: inline-block; padding: 14px 32px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 20px; color: #ffffff; text-decoration: none; border-radius: 8px; border: 1px solid #2f6fed;">
        {{ label }}
      </a>
    </td>
  </tr>
</table>
{%- endmacro %}

{# The same secret as text, for the reader whose client swallowed the link or
   who is reading this on a different device than the one they started on. #}
{% macro code_block(code) -%}
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="center" bgcolor="#f4f5f7" style="padding: 16px; border: 1px solid #dfe3e8; border-radius: 8px;">
      <span style="font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 13px; line-height: 22px; color: #1f2733; word-break: break-all;">{{ code }}</span>
    </td>
  </tr>
</table>
{%- endmacro %}