<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
    xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
    <title>{{page_title}}</title>
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        #outlook a {
            padding: 0;
        }

        body {
            margin: 0;
            padding: 0;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        table,
        td {
            border-collapse: collapse;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        img {
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
            -ms-interpolation-mode: bicubic;
        }

        p {
            display: block;
            margin: 13px 0;
        }

        .color-info {
            background: #4CAF50;
            background-color: #4CAF50;
        }

        .color-warning {
            background: #FF9800;
            background-color: #FF9800;
        }

        .color-danger {
            background: #f44336;
            background-color: #f44336;
        }

        :root {
            color-scheme: light only;
        }
    </style>
    <!--[if mso]>
        <noscript>
        <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
        </noscript>
        <![endif]-->
    <!--[if lte mso 11]>
        <style type="text/css">
          .mj-outlook-group-fix { width:100% !important; }
        </style>
        <![endif]-->
    <style type="text/css">
        @media only screen and (min-width:480px) {
            .mj-column-per-100 {
                width: 100% !important;
                max-width: 100%;
            }

            .mj-column-per-33-3 {
                width: 33.3% !important;
                max-width: 33.3%;
            }
        }
    </style>
    <style media="screen and (min-width:480px)">
        .moz-text-html .mj-column-per-100 {
            width: 100% !important;
            max-width: 100%;
        }

        .moz-text-html .mj-column-per-33-3 {
            width: 33.3% !important;
            max-width: 33.3%;
        }
    </style>
    <style type="text/css">
        @media only screen and (max-width:480px) {
            table.mj-full-width-mobile {
                width: 100% !important;
            }

            td.mj-full-width-mobile {
                width: auto !important;
            }
        }
    </style>
</head>

<body style="word-spacing:normal;background-color:#f4f4f4;">
    <div style="background-color:#f4f4f4;">
        <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#4CAF50" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
        {{#if header}}
        <div class="color-{{color}}" style="margin:0px auto;max-width:600px;">
            <table class="color-{{color}}" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
                style="width:100%;">
                <tbody>
                    <tr>
                        <td style="direction:ltr;font-size:0px;padding:5px;text-align:center;">
                            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:590px;" ><![endif]-->
                            <div class="mj-column-per-100 mj-outlook-group-fix"
                                style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                    style="vertical-align:top;" width="100%">
                                    <tbody>
                                        <tr>
                                            <td align="center"
                                                style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                                <div
                                                    style="font-family:Arial, sans-serif;font-size:16px;font-weight:bold;line-height:1.4;text-align:center;color:white;">
                                                    {{header}}</div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        {{/if header}}

        <!--[if mso | IE]></td></tr></table><![endif]-->
        <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="white" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
        <div style="background:white;background-color:white;margin:0px auto;max-width:600px;">
            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
                style="background:white;background-color:white;width:100%;">
                <tbody>
                    <tr>
                        <td style="direction:ltr;font-size:0px;padding:5px 5px 5px 5px;text-align:center;">
                            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:590px;" ><![endif]-->
                            <div class="mj-column-per-100 mj-outlook-group-fix"
                                style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                    style="vertical-align:top;" width="100%">
                                    <tbody>
                                        <tr>
                                            <td align="center"
                                                style="font-size:0px;padding:10px 25px;padding-bottom:20px;word-break:break-word;">
                                                <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                                    style="border-collapse:collapse;border-spacing:0px;">
                                                    <tbody>
                                                        <tr>
                                                            <td style="width:200px;">
                                                                <img height="auto" src="{{logo_cid}}"
                                                                    style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
                                                                    width="200">
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                        {{#each event_details}}
                                        <tr>
                                            <td align="left" class="event-detail"
                                                style="margin-bottom: 16px; font-size: 0px; padding: 10px 25px; word-break: break-word;">
                                                <div
                                                    style="font-family:Arial, sans-serif;font-size:14px;line-height:1.4;text-align:left;color:#333333;">
                                                    <div class="event-detail-label"
                                                        style="font-weight: bold; color: #666666; margin-bottom: 4px;">
                                                        {{key}}
                                                        {{#if changed}}<span class="changed-pill"
                                                            style="background-color: #4CAF50; color: white; padding: 4px 8px; border-radius: 12px; font-size: 8px; font-weight: bold; margin-left: 8px; display: inline-block;">{{changed}}</span>
                                                        {{/if changed}}
                                                    </div>
                                                    {{#if old_value}}<div class="strikethrough"
                                                        style="text-decoration: line-through; color: #999999;">
                                                        {{old_value}}</div>{{/if old_value}}
                                                    <div style="display: flex; align-items: center;">
                                                        <span>{{value}}</span>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        {{/each event_details}}
                                        {{#if attendees}}
                                        <tr>
                                            <td align="left" class="event-detail"
                                                style="margin-bottom: 16px; font-size: 0px; padding: 10px 25px; padding-bottom: 30px; word-break: break-word;">
                                                <div
                                                    style="font-family:Arial, sans-serif;font-size:14px;line-height:1.4;text-align:left;color:#333333;">
                                                    <div class="event-detail-label"
                                                        style="font-weight: bold; color: #666666; margin-bottom: 4px;">
                                                        {{attendees_title}}</div>
                                                    {{#each attendees}}<div class="guest-item"
                                                        style="margin-bottom: 4px;">• {{key}}
                                                        ({{value}})</div>{{/each attendees}}

                                                </div>
                                            </td>
                                        </tr>
                                        {{/if attendees}}
                                        {{#if rsvp}}
                                        <tr>
                                            <td align="center"
                                                style="font-size:0px;padding:10px 0;word-break:break-word;">
                                                <p
                                                    style="border-top:solid 1px #e0e0e0;font-size:1px;margin:0px auto;width:100%;">
                                                </p>
                                                <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #e0e0e0;font-size:1px;margin:0px auto;width:590px;" role="presentation" width="590px" ><tr><td style="height:0;line-height:0;"> &nbsp;
</td></tr></table><![endif]-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left"
                                                style="font-size:0px;padding:10px 0px 5px 20px;word-break:break-word;">
                                                <div
                                                    style="font-family:Arial, sans-serif;font-size:14px;line-height:1.4;text-align:left;color:#333333;">
                                                    {{rsvp}}
                                                </div>
                                            </td>
                                        </tr>
                                        {{/if rsvp}}
                                    </tbody>
                                </table>
                            </div>
                            <!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!--[if mso | IE]></td></tr></table><![endif]-->
        {{#if rsvp}}
        <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="white" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
        <div style="background:white;background-color:white;margin:0px auto;max-width:600px;">
            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
                style="background:white;background-color:white;width:100%;">
                <tbody>
                    <tr>
                        <td style="direction:ltr;font-size:0px;padding:0 5px 5px 5px;text-align:center;">
                            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:590px;" ><![endif]-->
                            <div class="mj-column-per-100 mj-outlook-group-fix"
                                style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;">
                                <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><![endif]-->

                                {{#each actions}}
                                <!--[if mso | IE]><td style="vertical-align:top;width:196px;" ><![endif]-->
                                <div class="mj-column-per-33-3 mj-outlook-group-fix"
                                    style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:33.3%;">
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                        style="vertical-align:top;" width="100%">
                                        <tbody>
                                            <tr>
                                                <td align="left" vertical-align="middle"
                                                    style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                                    <table border="0" cellpadding="0" cellspacing="0"
                                                        role="presentation"
                                                        style="border-collapse:separate;width:100%;line-height:100%;">
                                                        <tr>
                                                            <td align="center" bgcolor="#4CAF50" role="presentation"
                                                                class="color-{{color}}"
                                                                style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:8px 4px;"
                                                                valign="middle">
                                                                <a href="{{!action_url}}" class="color-{{color}}"
                                                                    style="display:inline-block;color:white;font-family:Arial, sans-serif;font-size:11px;font-weight:bold;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:8px 4px;mso-padding-alt:0px;border-radius:4px;"
                                                                    target="_blank"> {{action_name}} </a>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!--[if mso | IE]></td><![endif]-->
                                {{/each actions}}
                                <!--[if mso | IE]></tr></table><![endif]-->
                            </div>
                            <!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!--[if mso | IE]></td></tr></table><![endif]-->
        {{/if rsvp}}
        {{#if footer}}
        <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#f8f8f8" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
        <div style="background:#f8f8f8;background-color:#f8f8f8;margin:0px auto;max-width:600px;">
            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
                style="background:#f8f8f8;background-color:#f8f8f8;width:100%;">
                <tbody>
                    <tr>
                        <td style="direction:ltr;font-size:0px;padding:20px;text-align:center;">
                            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:560px;" ><![endif]-->
                            <div class="mj-column-per-100 mj-outlook-group-fix"
                                style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                    style="vertical-align:top;" width="100%">
                                    <tbody>
                                        {{#each footer}}
                                        <tr>
                                            <td align="center"
                                                style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                                <div
                                                    style="font-family:Arial, sans-serif;font-size:12px;line-height:1.5;text-align:center;color:#666666;">
                                                    {{key}}</div>
                                            </td>
                                        </tr>
                                        {{/each footer}}
                                    </tbody>
                                </table>
                            </div>
                            <!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!--[if mso | IE]></td></tr></table><![endif]-->
        {{/if footer}}
    </div>
</body>

</html>