<section class="gh-canvas {{if (feature "audienceFeedback") "feature-audienceFeedback"}}" {{did-insert this.loadData}}>
    <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"}}Analytics
            </div>
            <h2 class="gh-canvas-title gh-post-title">
                {{this.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 style="display: flex; gap: 8px;">
                    <GhTaskButton
                        @buttonText="Refresh"
                        @task={{this.fetchPostTask}}
                        @showIcon={{true}}
                        @idleIcon="reload"
                        @successText="Refreshed"
                        @class="gh-btn gh-btn-icon refresh"
                        @successClass="gh-btn gh-btn-icon refresh" />
                    {{#unless this.post.emailOnly}}
                        <button type="button" class="gh-btn gh-btn-icon share" {{on "click" this.togglePublishFlowModal}}>
                            <span>{{svg-jar "share" title="Share post"}} Share</span>
                        </button>
                    {{/unless}}

                    <span class="dropdown">
                        <GhDropdownButton
                            @dropdownName="analytics-actions-menu"
                            @classNames="gh-btn gh-btn-icon icon-only gh-btn-action-icon"
                            @title="Analytics Actions"
                            data-test-button="analytics-actions"
                        >
                            <span>
                                {{svg-jar "dotdotdot"}}
                                <span class="hidden">Actions</span>
                            </span>
                        </GhDropdownButton>
                        <GhDropdown
                            @name="analytics-actions-menu"
                            @tagName="ul"
                            @classNames="gh-analytics-actions-menu dropdown-menu dropdown-triangle-top-right"
                            @closeOnClick={{true}}
                        >
                            <li>
                                <LinkTo class="edit-post" @route="lexical-editor.edit" @models={{array this.post.displayName this.post.id}}>Edit post</LinkTo>
                            </li>
                            <li>
                                <a class="view-browser" href="{{this.post.url}}" target="_blank" rel="noopener noreferrer">View in browser</a>
                            </li>
                            {{#if (and (gh-user-can-admin this.session.user) (or (feature "trafficAnalytics") (feature "ui60")))}}
                                <li>
                                    <LinkTo class="edit-post" @route="posts-x" @model={{this.post.id}}>Switch to Analytics (beta)</LinkTo>
                                </li>
                            {{/if}}
                            <li>
                                <button
                                    type="button"
                                    class="delete-post mr2"
                                    {{on "click" this.confirmDeleteMember}}
                                    data-test-button="delete-post"
                                >
                                    <span class="red">Delete post</span>
                                </button>
                            </li>
                        </GhDropdown>
                    </span>
                </div>
            </div>
        </div>
    </GhCanvasHeader>

    <div class="gh-post-analytics-content">
        <div>
            <Tabs::Tabs class="gh-tabs-analytics {{if (eq this.post.hasBeenEmailed null) "no-tabs"}}" @forceRender={{true}} as |tabs|>
                {{#if this.post.hasBeenEmailed}}
                    <tabs.tab>
                        <h3>
                            {{svg-jar "analytics-tab-sent-large"}}
                            <span class="animated-number sent" {{did-update this.applyClasses this.post.email.emailCount}}>{{split-number this.post.email.emailCount this.previousSentCount}}</span>
                        </h3>
                        <p>{{svg-jar "analytics-tab-sent"}}<span class="analytics-tab-label">Sent</span></p>
                    </tabs.tab>

                    <tabs.tabPanel>
                        <Posts::PostActivityFeed
                            @post={{this.post}}
                            @eventType="sent"
                            @linkQuery={{hash filterParam=(concat "emails.post_id:" this.post.id) }}
                        />
                    </tabs.tabPanel>

                    {{#if this.post.showEmailOpenAnalytics }}
                        <tabs.tab>
                            <h3>
                                {{svg-jar "analytics-tab-opened-large"}}
                                <span class="animated-number opened" {{did-update this.applyClasses this.post.email.openedCount}}>{{split-number this.post.email.openedCount this.previousOpenedCount}}</span>
                            </h3>
                            <p>{{svg-jar "analytics-tab-opened"}}<span class="analytics-tab-label">Opened<span class="analytics-tab-percentage">&nbsp;— {{this.post.email.openRate}}%</span></span></p>
                        </tabs.tab>

                        <tabs.tabPanel>
                            <Posts::PostActivityFeed
                                @post={{this.post}}
                                @eventType="opened"
                                @linkQuery={{hash filterParam=(concat "opened_emails.post_id:" this.post.id) }}
                            />
                        </tabs.tabPanel>
                    {{/if}}

                    {{#if this.post.showEmailClickAnalytics }}
                        <tabs.tab>
                            <h3>
                                {{svg-jar "analytics-tab-clicked-large"}}
                                <span class="animated-number clicked" {{did-update this.applyClasses this.post.count.clicks}}>{{split-number this.post.count.clicks this.previousClickedCount}}</span>
                            </h3>
                            <p>{{svg-jar "analytics-tab-clicked"}}<span class="analytics-tab-label">Clicked<span class="analytics-tab-percentage">&nbsp;— {{this.post.clickRate}}%</span></span></p>
                        </tabs.tab>

                        <tabs.tabPanel>
                            <Posts::PostActivityFeed
                                @post={{this.post}}
                                @eventType="clicked"
                                @linkQuery={{hash filterParam=(concat "clicked_links.post_id:" this.post.id) }}
                            />
                        </tabs.tabPanel>
                    {{/if}}

                    {{#if this.post.isFeedbackEnabledForEmail }}
                        <tabs.tab>
                            <h3>
                                {{svg-jar "analytics-tab-feedback-large"}}
                                <span class="animated-number feedback" {{did-update this.applyClasses this.totalFeedback}}>{{split-number this.totalFeedback this.previousFeedbackCount}}</span>
                            </h3>
                            <p>{{svg-jar "analytics-tab-feedback"}}<span class="analytics-tab-label">Feedback<span class="analytics-tab-percentage">&nbsp;— {{this.post.sentiment}}%</span></span></p>
                        </tabs.tab>

                        <tabs.tabPanel>
                            <Posts::PostActivityFeed
                                @post={{this.post}}
                                @eventType="feedback"
                                @data={{this.feedbackChartData}}
                            />
                        </tabs.tabPanel>
                    {{/if}}
                {{/if}}

                {{#if this.post.showAttributionAnalytics }}
                    <tabs.tab>
                        <h3>
                            {{svg-jar "analytics-tab-conversions-large"}}
                            {{#if this.post.hasBeenEmailed}}
                                <span class="animated-number conversions" {{did-update this.applyClasses this.post.count.conversions}}>{{split-number this.post.count.conversions this.previousConversionsCount}}</span>
                            {{else}}
                                Conversions
                            {{/if}}
                        </h3>
                        <p>{{svg-jar "analytics-tab-conversions"}}<span class="analytics-tab-label">{{gh-pluralize this.post.count.conversions "Conversions" without-count=true}}</span></p>
                    </tabs.tab>

                    <tabs.tabPanel>
                        <Posts::PostActivityFeed @post={{this.post}} @eventType="conversion" />
                    </tabs.tabPanel>
                {{/if}}
            </Tabs::Tabs>

            {{#if this.isLoaded }}
                <div class="gh-post-analytics-split {{if this.showMentions "gh-post-analytics-with-mentions"}}">
                    {{#if this.showLinks }}
                        {{#if (is-empty this.links) }}
                        {{!-- Empty state --}}
                        {{else}}
                            <Posts::LinksTable
                                @links={{this.links}}
                                @updateLink={{this.updateLink}}
                                @showSuccess={{this.showSuccess}}
                            />
                        {{/if}}
                    {{/if}}

                    {{#if this.showMentions }}
                        <div class="gh-post-analytics-box gh-post-analytics-mentions {{unless this.showLinks "is-full-width"}}">
                            <h3 class="gh-post-analytics-mentions-header">Mentions</h3>
                            <div class="gh-post-analytics-mentions-list">
                                {{#if this.mentions}}
                                    {{#each this.mentions as |mention|}}
                                        <a href="{{mention.source}}" class="gh-post-analytics-mention" rel="noreferrer noopener" target="_blank">
                                            <img src="{{mention.sourceFavicon}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0" />
                                            <span class="gh-post-analytics-mention-title">{{if mention.sourceTitle mention.sourceTitle mention.source}}</span>
                                            <span class="gh-post-analytics-mention-timestamp">{{moment-from-now mention.timestamp}}</span>
                                        </a>
                                    {{/each}}
                                {{else}}
                                    <div>
                                        <p>No mentions yet.</p>
                                    </div>
                                {{/if}}
                            </div>
                            {{#if this.mentions}}
                                <div class="gh-dashboard-list-footer">
                                    <LinkTo @route="posts.mentions" @model={{this.post.id}}>View all mentions &rarr;</LinkTo>
                                </div>
                            {{/if}}
                        </div>
                    {{/if}}
                </div>

                <div class="gh-post-analytics-box resources">
                    <a href="https://ghost.org/help/post-analytics/" target="_blank" class="gh-post-analytics-resource" rel="noopener noreferrer">
                        <div class="thumbnail" style="background-image: url(assets/img/marketing/analytics-1.jpg);"></div>
                        <div class="flex flex-column justify-between">
                            <div>
                                <h4 class="gh-main-section-header small bn">
                                    Ghost help
                                </h4>
                                <div>
                                    <h3>Understanding analytics in Ghost</h3>
                                    <p>Find out how to review the performance of your content and get the most out of post analytics in Ghost.</p>
                                </div>
                            </div>
                            <div class="gh-btn gh-btn-link">Read more &rarr;</div>
                        </div>
                    </a>
                    <a href="https://ghost.org/resources/content-distribution/" target="_blank" class="gh-post-analytics-resource" rel="noopener noreferrer">
                        <div class="thumbnail" style="background-image: url(assets/img/marketing/analytics-2.jpg);"></div>
                        <div class="flex flex-column justify-between">
                            <div>
                                <h4 class="gh-main-section-header small bn">
                                    Ghost resources
                                </h4>
                                <div>
                                    <h3>How to get your content seen online</h3>
                                    <p>Use these content distribution tactics to get more people to discover your work and increase engagement.</p>
                                </div>
                            </div>
                            <div class="gh-btn gh-btn-link">Read more &rarr;</div>
                        </div>
                    </a>
                </div>
            {{else}}
                <div class="gh-post-analytics-loading">
                    <div class="gh-loading-spinner-outer">
                        <div class="gh-loading-spinner"></div>
                    </div>
                </div>
            {{/if}}
        </div>
    </div>
</section>
