{{!-- template-lint-disable no-invalid-interactive --}}
<li class="gh-list-row gh-posts-list-item gh-post-list-plain-status gh-post-list-analytics"
    data-testid="posts-list-item"
    {{on "mouseover" this.mouseOver}}
    {{on "mouseleave" this.mouseLeave}}
    ...attributes
>

    {{!-- Title column --}}
    {{#if (and this.session.user.isContributor @post.isPublished)}}
        <a href={{@post.url}} class="permalink gh-list-data gh-post-list-title gh-post-with-feature-image" target="_blank" rel="noopener noreferrer">
            <div class="gh-post-list-feature-image" style={{html-safe (concat "background-image: url(" @post.featureImage ");")}}>
                {{#unless @post.featureImage}}
                    <div class="gh-post-list-feature-image-placeholder">
                        {{svg-jar "post-feature-image-placeholder"}}
                    </div>
                {{/unless}}
            </div>
            <div>
                <h3 class="gh-content-entry-title">
                    {{@post.title}}
                </h3>
                {{#unless @hideAuthor }}
                    <p class="gh-content-entry-meta">
                        <span class="gh-content-entry-author">
                            By {{post-author-names @post}}

                            {{#if @post.primaryTag}}
                                in <span class="midgrey-l2 fw5">{{@post.primaryTag.name}}</span>
                            {{/if}}

                            -
                        </span>
                        {{#if (or @post.isDraft @post.isScheduled)}}
                            <span class="gh-content-entry-date" title="Updated {{gh-format-post-time @post.updatedAtUTC absolute=true}}">
                                {{gh-format-post-time @post.updatedAtUTC absolute=true short=true}}
                            </span>
                        {{else}}
                            <span class="gh-content-entry-date" title="Published {{gh-format-post-time @post.publishedAtUTC absolute=true}}">
                                {{gh-format-post-time @post.publishedAtUTC absolute=true short=true}}
                            </span>
                        {{/if}}
                    </p>
                    <p class="gh-content-entry-status" data-test-editor-post-status>
                        <span class="published">
                            Published
                            {{#if @post.hasEmail}}
                                {{#if this.isHovered}}
                                    and sent to {{gh-pluralize @post.email.emailCount "member"}}
                                {{else}}
                                    and sent
                                {{/if}}
                            {{/if}}
                        </span>
                    </p>
                {{/unless}}
            </div>
        </a>
    {{else}}
        <LinkTo @route="lexical-editor.edit" @models={{array this.post.displayName this.post.id}} class="permalink gh-list-data gh-post-list-title gh-post-with-feature-image">
            <div class="gh-post-list-feature-image" style={{html-safe (concat "background-image: url(" @post.featureImage ");")}}>
                {{!-- Fallback to placeholder --}}
                {{#unless @post.featureImage}}
                    <div class="gh-post-list-feature-image-placeholder">
                        {{svg-jar "post-feature-image-placeholder"}}
                    </div>
                {{/unless}}
            </div>
            <div>
                <h3 class="gh-content-entry-title">
                    {{#if @post.featured}}
                        {{svg-jar "star-fill" class="gh-featured-post"}}
                    {{/if}}
                    {{@post.title}}

                    {{! Display lexical/mobiledoc indicators for easier testing of the feature --}}
                    {{#if (feature 'lexicalIndicators')}}
                        {{#if @post.lexical}}
                            <span class="gh-lexical-indicator">L</span>
                        {{else if @post.mobiledoc}}
                            <span class="gh-lexical-indicator">M</span>
                        {{/if}}
                    {{/if}}

                </h3>
                {{#unless @hideAuthor }}
                    <p class="gh-content-entry-meta">
                        <span class="gh-content-entry-author">
                            By {{post-author-names @post}}

                            {{#if @post.primaryTag}}
                                in <span class="midgrey-l2 fw5">{{@post.primaryTag.name}}</span>
                            {{/if}}
                            -
                        </span>
                        {{#if (or @post.isDraft @post.isScheduled)}}
                            <span class="gh-content-entry-date" title="Updated {{gh-format-post-time @post.updatedAtUTC absolute=true}}">
                                {{gh-format-post-time @post.updatedAtUTC absolute=true short=true}}
                            </span>
                        {{else}}
                            <span class="gh-content-entry-date" title="Published {{gh-format-post-time @post.publishedAtUTC absolute=true}}">
                                {{gh-format-post-time @post.publishedAtUTC absolute=true short=true}}
                            </span>
                        {{/if}}
                        {{!-- {{#if @post.lexical}}
                            <span class="gh-content-entry-date">– Lexical</span>
                        {{/if}} --}}
                    </p>
                    <p class="gh-content-entry-status" data-test-editor-post-status>
                        {{#if @post.isScheduled}}
                            <span class="scheduled">
                                Scheduled
                                {{#if this.isHovered}}
                                    <span class="schedule-details" {{css-transition "anim-fade-in-scale"}}>
                                        {{#if @post.emailOnly}}
                                            to be sent
                                            {{this.scheduledText}} to {{humanize-recipient-filter @post.emailSegment}}
                                        {{else}}
                                            to be published {{if @post.newsletter "and sent "}}
                                            {{this.scheduledText}}
                                            {{#if @post.newsletter}}
                                                to {{humanize-recipient-filter @post.emailSegment}}
                                            {{/if}}
                                        {{/if}}
                                    </span>
                                {{/if}}
                            </span>
                        {{/if}}

                        {{#if @post.isDraft}}
                            <span class="draft">
                                Draft
                            </span>
                        {{/if}}

                        {{#if @post.isPublished}}
                            <span class="published {{this.errorClass}}">
                                Published
                                {{#if @post.didEmailFail}}
                                    but failed to send newsletter
                                {{else if @post.hasBeenEmailed}}
                                    and sent
                                    {{#if this.isHovered}}
                                        <span {{css-transition "anim-fade-in-scale"}}>to {{gh-pluralize @post.email.emailCount "member"}}</span>
                                    {{/if}}
                                {{/if}}
                            </span>
                        {{/if}}

                        {{#if @post.isSent}}
                            <span class="sent {{this.errorClass}}">
                                {{#if @post.didEmailFail}}
                                    Failed to send newsletter
                                {{else}}
                                    Sent
                                    {{#if this.isHovered}}
                                        <span {{css-transition "anim-fade-in-scale"}}>to {{gh-pluralize @post.email.emailCount "member"}}</span>
                                    {{/if}}
                                {{/if}}
                            </span>
                        {{/if}}
                    </p>
                {{/unless}}
            </div>
        </LinkTo>
    {{/if}}

    {{!-- Metrics columns wrapper --}}
    <div class="gh-post-list-analytics-right">
        <div class="gh-post-list-metrics-container">

            {{!-- Visitor count column (only when web analytics is enabled) --}}
            {{#if this.settings.webAnalyticsEnabled}}
                {{#if @post.isPublished}}
                    <LinkTo @route="posts-x.posts-x" @models={{array @post.id "web"}} class="permalink gh-list-data gh-post-list-metrics gh-post-list-analytics-tt-container">
                        <div class="gh-post-list-analytics-tooltip {{this.tooltipPosition}}">
                            <h3>Web traffic</h3>
                            <div class="metrics">
                                <div class="metric">
                                    <div class="data">
                                        {{svg-jar "analytics-visitors"}}
                                        Unique visitors
                                    </div>
                                    <span>
                                        {{#if this.hasVisitorData}}
                                            {{format-number this.visitorCount}}
                                        {{else}}
                                            0
                                        {{/if}}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="gh-post-list-analytics-metric" data-test-analytics-visitors>
                            {{svg-jar "analytics-visitors" class="gh-list-analytics-icon"}}
                            <span class="gh-content-email-stats-value">
                                {{#if this.hasVisitorData}}
                                    {{abbreviate-number this.visitorCount}}
                                {{else}}
                                    0
                                {{/if}}
                            </span>
                        </div>
                    </LinkTo>
                {{/if}}
            {{/if}}

            {{#if @post.email}}
            <div class="gh-post-analytics-email-metrics gh-post-list-analytics-tt-container">
                <div class="gh-post-list-analytics-tooltip {{this.tooltipPosition}}">
                    <h3>Newsletter performance</h3>
                    <div class="metrics">
                        {{!-- Always show sent count --}}
                        <div class="metric">
                            <div class="data">
                                {{svg-jar "analytics-sent"}}
                                Sent
                            </div>
                            <span>{{format-number @post.email.emailCount}}</span>
                        </div>
                        {{!-- Show opens when enabled --}}
                        {{#if @post.showEmailOpenAnalytics}}
                        <div class="metric">
                            <div class="data">
                                {{svg-jar "analytics-opens"}}
                                Opens
                            </div>
                            <span>{{format-number @post.email.openedCount}}</span>
                        </div>
                        {{/if}}
                        {{!-- Show clicks when enabled --}}
                        {{#if @post.showEmailClickAnalytics}}
                        <div class="metric">
                            <div class="data">
                                {{svg-jar "analytics-clicks"}}
                                Clicks
                            </div>
                            <span>{{format-number @post.count.clicks}}</span>
                        </div>
                        {{/if}}
                    </div>
                </div>
                {{!-- Opens column --}}
                {{#if @post.showEmailOpenAnalytics}}
                    <LinkTo @route="posts-x.posts-x" @models={{array @post.id "newsletter"}} class="permalink gh-list-data gh-post-list-metrics">
                        <div class="gh-post-list-analytics-metric" data-test-analytics-opens>
                            {{svg-jar "analytics-opens" class="gh-list-analytics-icon"}}
                            <span class="gh-content-email-stats-value">
                                {{@post.email.openRate}}%
                            </span>
                        </div>
                    </LinkTo>
                {{/if}}

                {{!-- Clicks column --}}
                {{#if @post.showEmailClickAnalytics}}
                    <LinkTo @route="posts-x.posts-x" @models={{array @post.id "newsletter"}} class="permalink gh-list-data gh-post-list-metrics">
                        <div class="gh-post-list-analytics-metric" data-test-analytics-clicks>
                            {{svg-jar "analytics-clicks" class="gh-list-analytics-icon"}}
                            <span class="gh-content-email-stats-value">
                                {{@post.clickRate}}%
                            </span>
                        </div>
                    </LinkTo>
                {{/if}}

                {{!-- Sent column (only when both clicks and opens are disabled) --}}
                {{#if (and (not @post.showEmailClickAnalytics) (not @post.showEmailOpenAnalytics))}}
                    <LinkTo @route="posts-x.posts-x" @models={{array @post.id "newsletter"}} class="permalink gh-list-data gh-post-list-metrics">
                        <div class="gh-post-list-analytics-metric" data-test-analytics-sent>
                            {{svg-jar "analytics-sent" class="gh-list-analytics-icon"}}
                            <span class="gh-content-email-stats-value">
                                {{abbreviate-number @post.email.emailCount}}
                            </span>
                        </div>
                    </LinkTo>
                {{/if}}
            </div>
            {{/if}}

            {{!-- Member conversions column (only show for published posts when traffic analytics is enabled AND web analytics is enabled) --}}
            {{#if this.settings.membersTrackSources}}
                {{#if @post.isPublished}}
                    <LinkTo @route="posts-x.posts-x" @models={{array @post.id "growth"}} class="permalink gh-list-data gh-post-list-metrics gh-post-list-analytics-tt-container">
                    <div class="gh-post-list-analytics-tooltip {{this.tooltipPosition}}">
                        <h3>New members</h3>
                        <div class="metrics">
                            <div class="metric">
                                <div class="data">
                                    {{svg-jar "analytics-free-members"}}
                                    Free
                                </div>
                                <span>
                                    {{#if this.hasMemberData}}
                                        {{format-number this.memberCounts.free}}
                                    {{else}}
                                        0
                                    {{/if}}
                                </span>
                            </div>
                            {{#if this.membersUtils.paidMembersEnabled}}
                                <div class="metric">
                                    <div class="data">
                                        {{svg-jar "analytics-paid-members"}}
                                        Paid
                                    </div>
                                    <span>
                                        {{#if this.hasMemberData}}
                                            {{format-number this.memberCounts.paid}}
                                        {{else}}
                                            0
                                        {{/if}}
                                    </span>
                                </div>
                            {{/if}}
                        </div>
                    </div>
                        <div class="gh-post-list-analytics-metric" data-test-analytics-member-conversions>
                            {{svg-jar "analytics-members" class="gh-list-analytics-icon"}}
                            <span class="gh-content-email-stats-value">
                                {{#if this.hasMemberData}}
                                    {{format-number this.totalMemberConversions}}
                                {{else}}
                                    0
                                {{/if}}
                            </span>
                        </div>
                    </LinkTo>
                {{/if}}
            {{/if}}
        </div>

        {{!-- Button column --}}
        {{#if @post.hasAnalyticsPage }}
            <LinkTo @route="posts-x" @model={{@post.id}} class="permalink gh-list-data gh-post-list-button" title="">
                <span class="gh-post-list-cta stats {{if this.isHovered "is-hovered"}}" title="Go to Analytics" data-ignore-select>
                    {{svg-jar "stats" title="Go to Analytics"}}
                </span>
            </LinkTo>
        {{else}}
            {{#if (and this.session.user.isContributor @post.isPublished)}}
                <a href={{@post.url}} class="permalink gh-list-data gh-post-list-button" target="_blank" rel="noopener noreferrer">
                    <span class="gh-post-list-cta view {{if this.isHovered "is-hovered"}}" title="View post" data-ignore-select>
                        {{svg-jar "arrow-top-right" title="View post"}}
                    </span>
                </a>
            {{else}}
                <LinkTo @route="lexical-editor.edit" @models={{array this.post.displayName this.post.id}} class="permalink gh-list-data gh-post-list-button" title="">
                    <span class="gh-post-list-cta edit {{if this.isHovered "is-hovered"}}" title="Go to Editor" data-ignore-select>
                        {{svg-jar "pen" title="Go to Editor"}}
                    </span>
                </LinkTo>
            {{/if}}
        {{/if}}
    </div>
</li>
