<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
        <title>{{post.title}}</title>
        {{>styles}}
    </head>
    <body>
        <span class="preheader">{{preheader}}</span>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" width="100%">
            <!-- Outlook doesn't respect max-width so we need an extra centered table -->
            <!--[if mso]>
            <tr>
                <td>
                    <center>
                        <table border="0" cellpadding="0" cellspacing="0" width="600">
            <![endif]-->
            <tr>
                <td>&nbsp;</td>
                <td class="container">
                    <div class="content">
                        <!-- START CENTERED WHITE CONTAINER -->
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main" width="100%">

                            <!-- START MAIN CONTENT AREA -->
                            <tr>
                                <td class="wrapper">
                                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                                        {{#if headerImage}}
                                            <tr class="header-image-row">
                                                <td class="header-image" width="100%" align="center">
                                                    <img
                                                        src="{{headerImage}}"
                                                        {{#if headerImageWidth}}
                                                            width="{{headerImageWidth}}"
                                                        {{/if}}
                                                    >
                                                </td>
                                            </tr>
                                        {{/if}}

                                        {{#if (or showHeaderIcon showHeaderTitle showHeaderName) }}
                                            <tr>
                                                <td class="{{#if (and newsletter.showPostTitleSection showHeaderTitle) }}site-info-bordered{{else}}site-info{{/if}}" width="100%" align="center">
                                                    <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                                                        {{#if (and showHeaderIcon site.iconUrl) }}
                                                            <tr>
                                                                <td class="site-icon"><a href="{{site.url}}"><img src="{{site.iconUrl}}" alt="{{site.title}}" border="0" width="48" height="48"></a></td>
                                                            </tr>
                                                        {{/if}}
                                                        {{#if showHeaderTitle }}
                                                            <tr>
                                                                <td class="site-url {{#unless showHeaderName}}site-url-bottom-padding{{/unless}}"><div style="width: 100% !important;"><a href="{{site.url}}" class="site-title">{{site.title}}</a></div></td>
                                                            </tr>
                                                        {{/if}}
                                                        {{#if (and showHeaderName showHeaderTitle) }}
                                                            <tr>
                                                                <td class="site-url site-url-bottom-padding"><div style="width: 100% !important;"><a href="{{site.url}}" class="site-subtitle">{{newsletter.name}}</a></div></td>
                                                            </tr>
                                                        {{/if}}
                                                        {{#if (and showHeaderName (not showHeaderTitle)) }}
                                                            <tr>
                                                                <td class="site-url site-url-bottom-padding"><div style="width: 100% !important;"><a href="{{site.url}}" class="site-title">{{newsletter.name}}</a></div></td>
                                                            </tr>
                                                        {{/if}}

                                                    </table>
                                                </td>
                                            </tr>
                                        {{/if}}

                                        {{#if newsletter.showPostTitleSection}}
                                            <tr>
                                                <td class="{{classes.title}}">
                                                    <a href="{{post.url}}" class="{{classes.titleLink}}">{{post.title}}</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="width: 100%">
                                                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-bottom: 48px;">
                                                        <tr>
                                                            <td height="20" class="{{classes.meta}}" style="padding: 0;">
                                                                By {{post.authors}} • <span class="post-meta-date">{{post.publishedAt}} </span>
                                                                {{#if newsletter.showCommentCta}}
                                                                    <a href="{{post.commentUrl}}" class="comment-link" valign="middle">
                                                                        • <img src="https://static.ghost.org/v5.0.0/images/comment-icon.png" border="0" width="16" height="16" alt="Comment">
                                                                    </a>
                                                                {{/if}}
                                                            </td>
                                                            <td class="{{classes.meta}} view-online desktop">
                                                                <a href="{{post.url}}" class="view-online-link">View in browser</a>
                                                            </td>
                                                        </tr>
                                                        <tr class="{{classes.meta}} view-online-mobile">
                                                            <td height="20" class="view-online">
                                                                <a href="{{post.url}}" class="view-online-link">View in browser</a>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        {{/if}}

                                        {{#if showFeatureImage }}
                                            <tr class="feature-image-row">
                                                <td class="feature-image
                                                    {{#if post.feature_image_caption }}
                                                        feature-image-with-caption
                                                    {{/if}}
                                                "><img
                                                    src="{{post.feature_image}}"
                                                    {{#if post.feature_image_width }}
                                                        width="{{post.feature_image_width}}"
                                                    {{/if}}
                                                    {{#if post.feature_image_alt }}
                                                        alt="{{post.feature_image_alt}}"
                                                    {{/if}}
                                                ></td>
                                            </tr>
                                            {{#if post.feature_image_caption }}
                                                <tr>
                                                    <td class="feature-image-caption" align="center">{{{post.feature_image_caption}}}</td>
                                                </tr>
                                            {{/if}}
                                        {{/if}}
                                        <tr class="post-content-row">
                                            <td class="{{classes.body}}">
                                                <!-- POST CONTENT START -->
                                                {{{html}}}
                                                <!-- POST CONTENT END -->

                                                {{#if paywall}}
                                                    {{>paywall}}
                                                {{/if}}
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>

                            <!-- END MAIN CONTENT AREA -->

                            {{#if (or feedbackButtons newsletter.showCommentCta) }}
                                <tr>
                                    <td dir="ltr" width="100%" style="background-color: #ffffff; text-align: center; padding: 32px 0 24px; border-bottom: 1px solid #e5eff5;" align="center">
                                        <table class="feedback-buttons" role="presentation" border="0" cellpadding="0" cellspacing="0">
                                            <tr>
                                                {{#if feedbackButtons }}
                                                    {{> feedbackButton feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/more-like-this.png" width="145" height="36" }}
                                                    {{> feedbackButton feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/less-like-this.png" width="142" height="36" }}
                                                {{/if}}
                                                {{#if newsletter.showCommentCta}}
                                                    {{> feedbackButton href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/comment.png" width="122" height="36" }}
                                                {{/if}}
                                            </tr>
                                        </table>
                                        <table class="feedback-buttons-mobile" role="presentation" border="0" cellpadding="0" cellspacing="0">
                                            <tr>
                                                {{#if feedbackButtons }}
                                                    {{> feedbackButtonMobile feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/more-like-this-mobile.png" width="42" height="42" }}
                                                    {{> feedbackButtonMobile feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/less-like-this-mobile.png" width="42" height="42" }}
                                                {{/if}}
                                                {{#if newsletter.showCommentCta}}
                                                    {{> feedbackButtonMobile href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/comment-mobile.png" width="42" height="42" }}
                                                {{/if}}
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            {{/if}}

                             {{#if latestPosts.length}}
                                <tr>
                                    <td style="padding: 24px 0; border-bottom: 1px solid #e5eff5;">
                                        <h3 class="latest-posts-header">Keep reading</h3>
                                        {{> latestPosts}}
                                    </td>
                                </tr>
                            {{/if}}

                            {{#if newsletter.showSubscriptionDetails}}
                                <tr>
                                    <td class="subscription-box">
                                        <h3>Subscription details</h3>
                                        <p style="margin-bottom: 16px;">
                                            <span>You are receiving this because you are a <strong>%%{status}%% subscriber</strong> to {{site.title}}.</span> %%{status_text}%%
                                        </p>
                                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td class="subscription-details">
                                                    <p class="%%{name_class}%%">Name: %%{name, "not provided"}%%</p>
                                                    <p>Email: <a href="#">%%{email}%%</a></p>
                                                    <p>Member since: %%{created_at}%%</p>
                                                </td>
                                                <td align="right" valign="bottom" class="manage-subscription">
                                                    <a href="%%{manage_account_url}%%"> Manage subscription &rarr;</a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            {{/if}}

                            <tr>
                                <td class="wrapper" align="center">
                                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-top: 40px; padding-bottom: 30px;">
                                        {{#if footerContent }}
                                            <tr><td class="footer">{{{footerContent}}}</td></tr>
                                        {{/if}}
                                        <tr>
                                            <td class="footer">{{site.title}} &copy; {{year}} – <a href="%%{unsubscribe_url}%%">Unsubscribe</a></td>
                                        </tr>

                                        {{#if showBadge }}
                                            <tr>
                                                <td class="footer-powered"><a href="https://ghost.org/"><img src="https://static.ghost.org/v4.0.0/images/powered.png" border="0" width="142" height="30" class="gh-powered" alt="Powered by Ghost"></a></td>
                                            </tr>
                                        {{/if}}
                                    </table>
                                </td>
                            </tr>

                        </table>
                        <!-- END CENTERED WHITE CONTAINER -->
                    </div>
                </td>
                <td>&nbsp;</td>
            </tr>

            <!--[if mso]>
                            </table>
                        </center>
                    </td>
                </tr>
            <![endif]-->
        </table>
    </body>
</html>
