{# The slide a deck opens on. No bands: a title slide carries no number, as a
   cover carries no folio. The copy is anchored low on the sheet, inset by the
   page margin like every slide's, under an accent rule; positioned, as the
   divider's is, because WeasyPrint ignores a cell's valign attribute. Anchored
   higher (#355), the band spans the sheet less a title band's height at each
   edge, and a cell set by CSS `vertical-align` places the copy in it. #}
<div class="sheet title-slide" style="background-color:{{ title_slide_background }};{% if background_image_url %} background-image:url('{{ background_image_url | escape_html }}'); background-size:cover; background-position:center;{% endif %}">
{% set span = deck_box.height - 2 * deck_box.title_height %}
  <div class="slide-band" align="{{ align | default('left', true) }}" style="{% if valign == 'bottom' %}bottom:{{ deck_box.title_height }}px;{% else %}top:{{ deck_box.title_height }}px; height:{{ span }}px;{% endif %} width:{{ deck_box.width }}px; padding:0 {{ deck_box.inset }}px; text-align:{{ align | default('left', true) }};">
{% if valign != 'bottom' %}
    <table role="presentation" class="anchor" width="100%" cellpadding="0" cellspacing="0" border="0"
           style="width:100%;"><tr><td style="padding:0; height:{{ span }}px; vertical-align:{{ valign }};"{% if align %} align="{{ align | escape_html }}"{% endif %}>
{% endif %}
    {% if logo_url %}
    <img src="{{ logo_url | escape_html }}" alt="{{ resolved_logo_alt | escape_html }}" width="{{ resolved_logo_width }}"
         style="display:block; width:{{ resolved_logo_width }}px; border:0; margin-bottom:{{ size.space.block_gap }}px;{% if align == 'center' %} margin-left:auto; margin-right:auto;{% elif align == 'right' %} margin-left:auto;{% endif %}">
    {% endif %}
    <div style="width:{{ deck_box.inset * 2 }}px; border-top:4px solid {{ theme.palette.accent }}; margin-bottom:{{ size.space.block_gap }}px;{% if align == 'center' %} margin-left:auto; margin-right:auto;{% elif align == 'right' %} margin-left:auto;{% endif %}"></div>
    <h1 style="margin:0 0 {{ size.space.subtitle_gap }}px; font-family:{{ font.heading }}; font-size:{{ size.component.kpi_value }}px; line-height:{{ size.type.title_line | percent }}; font-weight:normal; color:{{ title_slide_text }};">{{ headline | escape_html }}</h1>
    {% if standfirst %}
    <p style="margin:0; font-family:{{ font.body }}; font-size:{{ size.type.section }}px; line-height:{{ size.type.heading_line | percent }}; color:{{ title_slide_text }};">{{ standfirst | escape_html }}</p>
    {% endif %}
    {% if department or date_range %}
    <p style="margin:{{ size.space.block_gap }}px 0 0; font-family:{{ font.label }}; font-size:{{ size.type.small }}px; line-height:{{ size.type.secondary_line | percent }}; color:{{ title_slide_text }};">{{ [department, date_range] | select | join(' · ') | escape_html }}</p>
    {% endif %}
{% if valign != 'bottom' %}
    </td></tr></table>
{% endif %}
  </div>
</div>