<div class = "pm-calendar-invite" id="{{ id }}" contenteditable="false" style="width: 100%; max-width: 310px; font-family: -apple-system, 'Helvetica Neue', Helvetica, 'Lucida Grande', -sans-serif !important; font-size: 12px !important; box-sizing: border-box; padding: 0px; margin: 0px; background: white;">
    <div style="box-sizing: border-box; padding: 12px 20px; border-radius: 5px 5px 0px 0px; background: #53A0FD; color: white;">
        <div style="font-size: 15px !important; margin-bottom:4px;"><b>{{ name }}</b></div>
        <div>{{ time }} ({{timeZone}})</div>
    </div>
    <div style="box-sizing: border-box; padding: 12px 18px; border-left: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; color: #7D8FA0; line-height:1.2;">
        <table style="font-size: 13px !important;">
            <tr>
                <td style="width: 20px; margin:0px; padding: 0px;" valign="top"><img src="https://welovepg.polymail.io/v1/img/calendar-invite/location@3x.png" alt="Location Icon" style="width: 16px; height: 16px;"></td>
                <td style="margin: 0px; padding: 0px 0px 0px 9px;">{{ location }}</td>
            </tr>
            <tr>
                <td style="width: 20px; padding: 10px 0px 0px 0px;" valign="top"><img src="https://welovepg.polymail.io/v1/img/calendar-invite/attendees@3x.png" alt="Attendees Icon" style="width: 18px; height: 18px;"></td>
                <td style="margin: 0px; padding: 5px 0px 0px 9px;">
                    {% for participant in participants %}
                    <div>{{ participant }}</div>
                    {% endfor %}
                </td>
            </tr>
            {% if notes %}
            <tr>
                <td style="width: 20px; height: 20px; margin:0px; padding: 10px 0px 0px 0px;" valign="top"><img src="https://welovepg.polymail.io/v1/img/calendar-invite/note@3x.png" alt="Note Icon" style="width: 16px; height: 16px;"></td>
                <td style="margin: 0px; padding: 5px 0px 0px 9px;">{{ notes }}</td>
            </tr>
            {% endif %}
        </table>
        <div style="text-align: center; padding: 10px 0px 0px 0px;">
            You'll receive an invite for this event shortly.
        </div>
    </div>
    <div style="box-sizing: border-box; padding: 0px 10px 10px 10px; border-left: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; border-radius: 0px 0px 5px 5px; text-align: right; font-size: 10px !important; color: #7D8FA0;" valign="middle">
        {% if freeUser %}
        <a href="https://polymail.io/?utm_source=polymail&utm_medium=referral&utm_campaign=cal-invite" style="text-decoration:none; color: #7D8FA0;">Scheduled with Polymail</a>
        <a href="https://polymail.io/?utm_source=polymail&utm_medium=referral&utm_campaign=cal-invite">
            <img src="https://welovepg.polymail.io/v1/img/calendar-invite/logo@3x.png" alt="Polymail Logo" style="width: 16px; height: 16px; margin-left: 9px;">
                </a>
        {% endif %}
    </div>
</div>
