Ghost/ghost/admin/app/templates/posts/debug.hbs

<section class="gh-canvas gh-email-debug {{if (feature "audienceFeedback") "feature-audienceFeedback"}}">
    <GhCanvasHeader class="gh-canvas-header gh-post-analytics-header">
        <div class="flex flex-column flex-grow-1">
            <div class="gh-canvas-breadcrumb">
                <LinkTo @route="posts">
                    Posts
                </LinkTo>
                {{svg-jar "arrow-right-small"}}
                <LinkTo @route="posts.analytics" @model={{@model.id}}>
                    Analytics
                </LinkTo>
                {{svg-jar "arrow-right-small"}}
                Debug
            </div>
            <h2 class="gh-canvas-title gh-post-title">
                Post title
            </h2>
            <div class="gh-post-analytics-meta">
                <div class="gh-post-analytics-meta-text">
                    {{#if this.post.hasBeenEmailed }}
                        {{#if this.post.emailOnly}}
                            Sent
                        {{else}}
                            Published and sent
                        {{/if}}
                    {{else}}
                        Published
                        {{#if @post.didEmailFail}}
                            but failed to send
                        {{else}}
                            on your site
                        {{/if}}
                    {{/if}}

                    {{#let (moment-site-tz this.post.publishedAtUTC) as |publishedAt|}}
                        on
                        {{moment-format publishedAt "D MMM YYYY"}}
                        at
                        {{moment-format publishedAt "HH:mm"}}
                    {{/let}}
                </div>
            </div>
            <div class="gh-box gh-box-error gh-box-tip gh-email-debug-error">
                {{svg-jar "warning"}}
                <div class="gh-email-debug-errortext">
                    <h4>Major error</h4>
                    <p class="mb0">This is the explanation of what happened.</p>
                </div>
                <button type="button" class="gh-btn gh-btn-primary gh-btn-icon gh-btn-red ember-view self-center"><span>Retry</span></button>
            </div>
        </div>
    </GhCanvasHeader>

    <Tabs::Tabs class="gh-tabs-analytics" @forceRender={{true}} as |tabs|>
        <tabs.tab>
            <h3>{{svg-jar "analytics-tab-sent-large"}}23</h3>
            <p><span class="analytics-tab-label">Permanent failures</span></p>
        </tabs.tab>

        <tabs.tabPanel>
            <table class="gh-list gh-email-debug-permanent-failures">
                <tbody>
                <tr>
                    <div class="gh-list-data gh-email-debug-col-member">
                        <div class="gh-email-debug-member">
                            <figure class="gh-member-gravatar w9 h9 mr3 flex-shrink-0 bg-red">
                                <div class="gh-member-initials flex w9 h9 items-center justify-center br-100">
                                    <span class="gh-member-avatar-label gh-member-list-avatar">PD</span>
                                </div>
                                {{#if this.avatarImage}}
                                    <img class="gh-member-avatar-image" src="{{this.avatarImage}}" alt="{{or @member.name @member.email}}" />
                                {{/if}}
                            </figure>
                            <div>
                                <h3 class="ma0 pa0 gh-members-list-name">Permanent Dude</h3>
                                <p class="ma0 pa0 middarkgrey f8 gh-members-list-email">dude@whofails.com</p>
                            </div>
                        </div>
                    </div>
                    <div class="gh-list-data gh-email-debug-col-failure">
                        <div class="gh-email-debug-failure">
                            <div class="gh-email-debug-failure-details">
                                <div class="gh-email-debug-failure-codes">
                                    <span class="gh-email-debug-failure-code">Failure code: <span>402</span></span>
                                    <span class="gh-email-debug-failure-code">Enhanced code: <span>4.2.2</span></span>
                                </div>
                                <span class="gh-email-debug-failure-description"><code>4.2.2 The email account that you tried to reach is over quota. Please direct\n4.2.2 the recipient to\n4.2.2 https://support.google.com/mail/?p=OverQuotaTemp bb1-20020a05622a1b0100b0039ce87e3d49si1009300qtb.292 - gsmtp</code></span>
                            </div>
                        </div>
                    </div>
                </tr>
                <tr>
                    <div class="gh-list-data gh-email-debug-col-member">
                        <div class="gh-email-debug-member">
                            <figure class="gh-member-gravatar w9 h9 mr3 flex-shrink-0 bg-red">
                                <div class="gh-member-initials flex w9 h9 items-center justify-center br-100">
                                    <span class="gh-member-avatar-label gh-member-list-avatar">PD</span>
                                </div>
                                {{#if this.avatarImage}}
                                    <img class="gh-member-avatar-image" src="{{this.avatarImage}}" alt="{{or @member.name @member.email}}" />
                                {{/if}}
                            </figure>
                            <div>
                                <h3 class="ma0 pa0 gh-members-list-name">Permanent Dude</h3>
                                <p class="ma0 pa0 middarkgrey f8 gh-members-list-email">dude@whofails.com</p>
                            </div>
                        </div>
                    </div>
                    <div class="gh-list-data gh-email-debug-col-failure">
                        <div class="gh-email-debug-failure">
                            <div class="gh-email-debug-failure-details">
                                <div class="gh-email-debug-failure-codes">
                                    <span class="gh-email-debug-failure-code">Failure code: <span>402</span></span>
                                    <span class="gh-email-debug-failure-code">Enhanced code: <span>4.2.2</span></span>
                                </div>
                                <span class="gh-email-debug-failure-description"><code>4.2.2 The email account that you tried to reach is over quota. Please direct\n4.2.2 the recipient to\n - gsmtp</code></span>
                            </div>
                        </div>
                    </div>
                </tr>
                <tr>
                    <div class="gh-list-data gh-email-debug-col-member">
                        <div class="gh-email-debug-member">
                            <figure class="gh-member-gravatar w9 h9 mr3 flex-shrink-0 bg-red">
                                <div class="gh-member-initials flex w9 h9 items-center justify-center br-100">
                                    <span class="gh-member-avatar-label gh-member-list-avatar">PD</span>
                                </div>
                                {{#if this.avatarImage}}
                                    <img class="gh-member-avatar-image" src="{{this.avatarImage}}" alt="{{or @member.name @member.email}}" />
                                {{/if}}
                            </figure>
                            <div>
                                <h3 class="ma0 pa0 gh-members-list-name">Permanent Dude</h3>
                                <p class="ma0 pa0 middarkgrey f8 gh-members-list-email">dude@whofails.com</p>
                            </div>
                        </div>
                    </div>
                    <div class="gh-list-data gh-email-debug-col-failure">
                        <div class="gh-email-debug-failure">
                            <div class="gh-email-debug-failure-details">
                                <div class="gh-email-debug-failure-codes">
                                    <span class="gh-email-debug-failure-code">Failure code: <span>402</span></span>
                                    <span class="gh-email-debug-failure-code">Enhanced code: <span>4.2.2</span></span>
                                </div>
                                <span class="gh-email-debug-failure-description"><code>4.2.2 The email account that you tried to reach is over quota. Please direct\n4.2.2 the recipient to\n4.2.2 https://support.google.com/mail/?p=OverQuotaTemp bb1-20020a05622a1b0100b0039ce87e3d49si1009300qtb.292 - gsmtp</code></span>
                            </div>
                        </div>
                    </div>
                </tr>
                </tbody>
            </table>
        </tabs.tabPanel>

        <tabs.tab>
            <h3>{{svg-jar "analytics-tab-opened-large"}}36</h3>
            <p><span class="analytics-tab-label">Temporary failures</span></p>
        </tabs.tab>

        <tabs.tabPanel>
            <table class="gh-list gh-email-debug-permanent-failures">
                <tbody>
                <tr>
                    <div class="gh-list-data gh-email-debug-col-member">
                        <div class="gh-email-debug-member">
                            <figure class="gh-member-gravatar w9 h9 mr3 flex-shrink-0 bg-purple">
                                <div class="gh-member-initials flex w9 h9 items-center justify-center br-100">
                                    <span class="gh-member-avatar-label gh-member-list-avatar">TD</span>
                                </div>
                                {{#if this.avatarImage}}
                                    <img class="gh-member-avatar-image" src="{{this.avatarImage}}" alt="{{or @member.name @member.email}}" />
                                {{/if}}
                            </figure>
                            <div>
                                <h3 class="ma0 pa0 gh-members-list-name">Temporary Dude</h3>
                                <p class="ma0 pa0 middarkgrey f8 gh-members-list-email">dude@whofails.com</p>
                            </div>
                        </div>
                    </div>
                    <div class="gh-list-data gh-email-debug-col-failure">
                        <div class="gh-email-debug-failure">
                            <div class="gh-email-debug-failure-details">
                                <div class="gh-email-debug-failure-codes">
                                    <span class="gh-email-debug-failure-code">Failure code: <span>402</span></span>
                                    <span class="gh-email-debug-failure-code">Enhanced code: <span>4.2.2</span></span>
                                </div>
                                <span class="gh-email-debug-failure-description"><code>4.2.2 The email account that you tried to reach is over quota. Please direct\n4.2.2 the recipient to\n4.2.2 https://support.google.com/mail/?p=OverQuotaTemp bb1-20020a05622a1b0100b0039ce87e3d49si1009300qtb.292 - gsmtp</code></span>
                            </div>
                        </div>
                    </div>
                </tr>
                <tr>
                    <div class="gh-list-data gh-email-debug-col-member">
                        <div class="gh-email-debug-member">
                            <figure class="gh-member-gravatar w9 h9 mr3 flex-shrink-0 bg-purple">
                                <div class="gh-member-initials flex w9 h9 items-center justify-center br-100">
                                    <span class="gh-member-avatar-label gh-member-list-avatar">TD</span>
                                </div>
                                {{#if this.avatarImage}}
                                    <img class="gh-member-avatar-image" src="{{this.avatarImage}}" alt="{{or @member.name @member.email}}" />
                                {{/if}}
                            </figure>
                            <div>
                                <h3 class="ma0 pa0 gh-members-list-name">Temporary Dude</h3>
                                <p class="ma0 pa0 middarkgrey f8 gh-members-list-email">dude@whofails.com</p>
                            </div>
                        </div>
                    </div>
                    <div class="gh-list-data gh-email-debug-col-failure">
                        <div class="gh-email-debug-failure">
                            <div class="gh-email-debug-failure-details">
                                <div class="gh-email-debug-failure-codes">
                                    <span class="gh-email-debug-failure-code">Failure code: <span>402</span></span>
                                    <span class="gh-email-debug-failure-code">Enhanced code: <span>4.2.2</span></span>
                                </div>
                                <span class="gh-email-debug-failure-description"><code>4.2.2 The email account that you tried to reach is over quota. Please direct\n4.2.2 the recipient to\n4.2.2 https://support.google.com/mail/?p=OverQuotaTemp bb1-20020a05622a1b0100b0039ce87e3d49si1009300qtb.292 - gsmtp</code></span>
                            </div>
                        </div>
                    </div>
                </tr>
                </tbody>
            </table>
        </tabs.tabPanel>

        <tabs.tab>
            <h3>{{svg-jar "analytics-tab-clicked-large"}}3</h3>
            <p><span class="analytics-tab-label">Batches errored</span></p>
        </tabs.tab>

        <tabs.tabPanel>
            <table class="gh-list gh-email-debug-batches">
                <thead>
                    <tr class="gh-list-row header">
                        <th class="gh-list-header">Status</th>
                        <th class="gh-list-header">Created</th>
                        <th class="gh-list-header">Segment</th>
                        <th class="gh-list-header">Recipients</th>
                        <th class="gh-list-header">Details</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <div class="gh-list-data gh-email-debug-batch-col-status">
                            <span class="failed">Failed</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-created">
                            <span>22 June, 2022 19:34:29</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-segment">
                            <span>-status:free</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-recipients">
                            <span>1,000</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-details">
                            <div class="flex flex-col items-center space-between w100">
                                <div class="detailtext">
                                    <div>Provider id:  <span>20220824043031.b31949925525913d@m.ghost.io</span></div>
                                    <div>Failure status code: <span>500</span></div>
                                    <code>Mailgun Error 500: Internal server error</code>
                                </div>
                                <div class="download-icon">{{svg-jar "download" title="Download full failure message"}}</div>
                            </div>
                        </div>
                    </tr>
                    <tr>
                        <div class="gh-list-data gh-email-debug-batch-col-status">
                            <span class="pending">Pending</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-created">
                            <span>22 June, 2022 19:34:29</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-segment">
                            <span>-status:free</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-recipients">
                            <span>1,000</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-details">
                            <div class="flex flex-col items-center space-between w100">
                                <div class="detailtext">
                                    <div>Provider id:  <span>20220824043031.b31949925525913d@m.ghost.io</span></div>
                                </div>
                            </div>
                        </div>
                    </tr>
                    <tr>
                        <div class="gh-list-data gh-email-debug-batch-col-status">
                            <span class="submitting">Submitting</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-created">
                            <span>22 June, 2022 19:34:29</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-segment">
                            <span>-status:free</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-recipients">
                            <span>1,000</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-details">
                            <div class="flex flex-col items-center space-between w100">
                                <div class="detailtext">
                                    <div>Provider id:  <span>20220824043031.b31949925525913d@m.ghost.io</span></div>
                                </div>
                            </div>
                        </div>
                    </tr>
                    <tr>
                        <div class="gh-list-data gh-email-debug-batch-col-status">
                            <span class="submitted">Submitted</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-created">
                            <span>22 June, 2022 19:34:29</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-segment">
                            <span>-status:free</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-recipients">
                            <span>1,000</span>
                        </div>
                        <div class="gh-list-data gh-email-debug-batch-col-details">
                            <div class="flex flex-col items-center space-between w100">
                                <div class="detailtext">
                                    <div>Provider id:  <span>20220824043031.b31949925525913d@m.ghost.io</span></div>
                                </div>
                            </div>
                        </div>
                    </tr>
                </tbody>
            </table>
        </tabs.tabPanel>

        <tabs.tab>
            <div class="gh-email-debug-settingstab-icon">{{svg-jar "settings"}}</div>
            <p><span class="analytics-tab-label">Settings</span></p>
        </tabs.tab>

        <tabs.tabPanel>
            <table class="gh-email-debug-settings">
                <tbody>
                    <tr>
                        <td>Status:</td>
                        <td class="gh-email-debug-batch-col-status"><span class="submitted">Submitted</span></td>
                    </tr>
                    <tr>
                        <td>Recipient filter:</td>
                        <td class="gh-email-debug-batch-col-segment"><span>-status:free</span></td>
                    </tr>
                    <tr>
                        <td>Created at:</td>
                        <td>22 June, 2022 19:34:29</td>
                    </tr>
                    <tr>
                        <td>Submitted at:</td>
                        <td>22 June, 2022 19:32:01</td>
                    </tr>
                    <tr>
                        <td colspan="2"><hr></td>
                    </tr>
                    <tr>
                        <td>Emails sent:</td>
                        <td>2,891</td>
                    </tr>
                    <tr>
                        <td>Delivered:</td>
                        <td>2,200</td>
                    </tr>
                    <tr>
                        <td>Failed:</td>
                        <td>691</td>
                    </tr>
                    <tr>
                        <td colspan="2"><hr></td>
                    </tr>
                    <tr>
                        <td>Track opens:</td>
                        <td class="gh-email-debug-settings-icon"><span class="check">{{svg-jar "check-2"}}</span></td>
                    </tr>
                    <tr>
                        <td>Track clicks:</td>
                        <td class="gh-email-debug-settings-icon"><span class="x">{{svg-jar "close"}}</span></td>
                    </tr>
                    <tr>
                        <td>Member feedback:</td>
                        <td class="gh-email-debug-settings-icon"><span class="check">{{svg-jar "check-2"}}</span></td>
                    </tr>
                </tbody>
            </table>
        </tabs.tabPanel>

    </Tabs::Tabs>
</section>