{# TCPDF writeHTML fragment — keep markup simple (tables + inline styles). #}
{% set navyDark = '#002766' %}
{% set orange = '#C2410C' %}
{% set muted = '#5b6b82' %}
{% set ink = '#1a2740' %}

<div style="text-align:center;">
    <div style="font-size:20px; font-weight:bold; color:{{ navyDark }};">{{ certificateTitle|e }}</div>
    <div style="font-size:10px; color:{{ muted }}; margin-top:4px;">{{ certificateIntro|e }}</div>
</div>
<hr style="border:none; border-top:1px solid #d8dee8; margin:10px 0 12px 0;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
        <td width="54%" valign="top" style="padding-right:8px;">
            <div style="font-size:9px; letter-spacing:1px; color:{{ orange }}; font-weight:bold;">{{ documentTitleLabel|e }}</div>
            <div style="font-size:13px; font-weight:bold; color:{{ navyDark }}; margin:4px 0 8px 0;">{{ documentTitle|e }}</div>
            <table cellpadding="2" cellspacing="0" border="0" width="100%">
                {% for row in metaRows %}
                    <tr>
                        <td width="32%" style="color:{{ muted }}; font-size:9px;">{{ row.label|e }}</td>
                        <td width="68%" style="color:{{ ink }}; font-size:9px;">{{ row.value|e }}</td>
                    </tr>
                {% endfor %}
            </table>
        </td>
        <td width="46%" valign="top" style="padding-left:8px;">
            <div style="font-size:9px; letter-spacing:1px; color:{{ orange }}; font-weight:bold;">{{ hashLabel|e }}</div>
            <div style="margin-top:6px; padding:8px; background-color:#f3f6fb; border:1px solid #e1e7f0; font-size:8px; color:{{ navyDark }}; font-family:courier;">{{ fileHash|e }}</div>
            <div style="margin-top:5px; font-size:8px; color:{{ muted }};">{{ hashHelp|e }}</div>
        </td>
    </tr>
</table>
<div style="margin-top:14px; font-size:9px; letter-spacing:1px; color:{{ orange }}; font-weight:bold;">{{ signerOverviewLabel|e }}</div>
<div style="margin-top:6px;">
    {% for signer in signers %}
        <table cellpadding="6" cellspacing="0" border="0" style="margin-bottom:6px; width:100%;">
            <tr>
                <td width="4%" style="background-color:{{ signer.color|e }};">&nbsp;</td>
                <td width="96%" style="border:1px solid #e4eaf3; background-color:#ffffff;">
                    <div style="font-size:11px; font-weight:bold; color:{{ ink }};">{{ signer.name|e }}</div>
                    <div style="font-size:9px; color:{{ muted }}; line-height:1.45;">
                        {{ signer.email|e }}<br>
                        {{ statusLabel|e }}: {{ signer.status|e }}
                        {% if signer.signedAt %}
                            <br>{{ signedAtLabel|e }}: {{ signer.signedAt|e }}
                        {% endif %}
                        {% if signer.authMethod %}
                            <br>{{ authMethodLabel|e }}: {{ signer.authMethod|e }}
                        {% endif %}
                    </div>
                    {% if signer.showBadge %}
                        <div style="margin-top:4px; display:inline-block; background-color:#e7f6ee; color:#0C7040; font-size:8px; font-weight:bold; padding:2px 6px;">{{ signer.statusUpper|e }}</div>
                    {% endif %}
                </td>
            </tr>
        </table>
    {% endfor %}
</div>
<hr style="border:none; border-top:1px solid #d8dee8; margin:10px 0 8px 0;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
        <td width="50%" style="font-size:8px; color:{{ muted }};">CUMAS365 · Secure File Transfer</td>
        <td width="50%" align="right" style="font-size:8px; color:{{ muted }};">{{ issuedAtLabel|e }}: {{ issuedAt|e }}</td>
    </tr>
</table>