Ghost/ghost/admin/app/components/gh-member-details.hbs

<section class="gh-member-details" ...attributes>
    <div class="flex flex-column">
        <div class="gh-member-details-identity">
            {{#if (or @member.name @member.email)}}
                <GhMemberAvatar
                    @member={{@member}}
                    @sizeClass={{if @member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-subheadline fw4 lh-zero tracked-1'}}
                    @containerClass="w20 h20 mr4 gh-member-detail-avatar"
                />
            {{else}}
                <div class="flex items-center justify-center br-100 mr4 gh-new-member-avatar">
                    <span class="gh-member-avatar-label f-subheadline fw5 lh-zero tracked-1">N</span>
                </div>
            {{/if}}
            <div>
                <h3>
                    {{or @member.name @member.email}}
                    {{#unless (or @member.name @member.email)}}
                        {{#if @member.isNew}}
                        <span class="midgrey">New member</span>
                        {{/if}}
                    {{/unless}}
                </h3>
                <p>
                    {{#if (and @member.name @member.email)}}
                        <a href="mailto:{{@member.email}}">{{@member.email}}</a>
                    {{/if}}
                </p>
            </div>
        </div>
        {{#unless @member.isNew}}
            <div class="gh-member-details-meta">
                <p>
                    {{svg-jar "pin"}}
                    {{#if @member.geolocation}}
                        {{#if (and (eq @member.geolocation.country_code "US") @member.geolocation.region)}}
                            {{@member.geolocation.region}}, US
                        {{else}}
                            {{or @member.geolocation.country "Unknown location"}}
                        {{/if}}
                    {{else}}
                        Unknown location
                    {{/if}}
                </p>
                <p class="gh-member-last-seen">
                    {{svg-jar "eye"}}
                    {{#if (not (is-empty @member.lastSeenAtUTC))}}
                        Last seen on {{moment-format (moment-site-tz @member.lastSeenAtUTC) "D MMM YYYY"}}
                    {{else}}
                        <span>Not seen yet</span>
                    {{/if}}
                </p>
            </div>
            <div class="gh-member-details-attribution">
                <h4 class="gh-main-section-header small bn">Signup info</h4>
                <p>
                    {{svg-jar "member-add"}}
                    Created&nbsp;&mdash;&nbsp;<span>{{moment-format (moment-site-tz @member.createdAtUTC) "D MMM YYYY"}}</span>
                </p>
                {{#if this.referrerSource}}
                    <p>
                        {{svg-jar "earth"}}
                        Source&nbsp;&mdash;&nbsp;<span title="{{this.referrerSource}}">{{this.referrerSource}}</span>
                    </p>
                {{/if}}
                {{#if (and @member.attribution.url @member.attribution.title)}}
                <p>
                    {{svg-jar "posts"}}
                    Page&nbsp;&mdash;&nbsp;<a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer" title="{{ @member.attribution.title }}">{{ @member.attribution.title }}</a>
                </p>
                {{!-- <a href="#" class="gh-member-details-attribution-docs">Learn more →</a> --}}
                {{/if}}
            </div>

            {{#if (and (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled"))}}
                <div class="gh-member-details-stats-container">
                    <h4 class="gh-main-section-header small bn">Engagement</h4>
                    {{#if (eq @member.emailCount 0)}}
                        <div class="gh-members-no-stats">
                            <p>
                                {{#if @member.name}}
                                    We'll show {{first-name @member.name}}'s email stats here once they receive their first newsletter.
                                {{else}}
                                    We'll show this member's email stats here once they receive their first newsletter.
                                {{/if}}
                            </p>
                        </div>
                    {{else}}
                        <div class="gh-member-details-stats">
                            <div class="gh-member-details-stat">
                                <p>Emails received</p>
                                <div class="gh-data-summary gh-cp-data-summary">{{@member.emailCount}}</div>
                            </div>
                            <div class="gh-member-details-stat">
                                <p>Emails opened</p>
                                <div class="gh-data-summary gh-cp-data-summary">{{@member.emailOpenedCount}}</div>
                            </div>
                            <div class="gh-member-details-stat open-rate">
                                <p>Average open rate</p>
                                <div class="gh-data-summary gh-cp-data-summary {{if (is-empty @member.emailOpenRate) "gh-data-unavailable-label"}}">
                                    {{#if (is-empty @member.emailOpenRate)}}
                                        This metric is calculated once a member has received 5 newsletters.
                                    {{else}}
                                        {{@member.emailOpenRate}}<span>%</span>
                                    {{/if}}
                                </div>
                            </div>
                        </div>
                    {{/if}}
                </div>
            {{/if}}
        {{/unless}}
    </div>
</section>