Ghost/ghost/admin/app/components/modal-import-members.hbs

<header class="modal-header" data-test-modal="import-members">
    <h1>
        {{#if this.importResponse}}
            Import complete{{unless this.importResponse.invalid.count "!"}}
        {{else}}
            Import members
        {{/if}}
    </h1>
</header>
<a class="close" href="" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>

{{#if this.importResponse}}
    {{!-- post upload step with import stats --}}

    <div class="modal-body">
        
        {{!-- Summary --}}
        <div class="ba b--whitegrey br3 middarkgrey bg-whitegrey-l2">
            <div class="flex items-start">
                <div class="w-50 gh-member-import-result-summary">
                    <h2>{{this.importResponse.imported.count}}</h2>
                    <p>{{pluralize this.importResponse.imported.count "Member" without-count=true}} added</p>
                </div>
                <div class="bl b--whitegrey w-50 gh-member-import-result-summary">
                    <h2>{{this.importResponse.invalid.count}}</h2>
                    <p>{{pluralize this.importResponse.invalid.count "Error" without-count=true}}</p>
                </div>
            </div>
        </div>

        {{#if this.importResponse.invalid.count}}
            <div class="mt6 gh-members-upload-errorcontainer error">
                <div class="flex items-start">
                    {{svg-jar "warning" class="w5 h5 fill-red nudge-top--3 mr3"}}
                    <div class="flex-grow w-100">
                        <p class="ma0 pa0">{{pluralize this.importResponse.invalid.count "member"}} were skipped due to the following errors:</p>
                        {{#if this.config.enableDeveloperExperiments}}
                            <ul class="ma0 pa0 mt4 list bt b--whitegrey">
                            {{#each this.importResponse.invalid.errors as |error|}}
                                <li class="gh-members-import-errormessage">{{error.message}} <span class="fw6">({{error.count}})</span></li>
                            {{/each}}
                            </ul>
                        {{/if}}
                    </div>
                </div>
            </div>
        {{/if}}
    </div>
{{else}}
    <div class="modal-body">
        {{#if (and this.filePresent (not this.failureMessage))}}
            {{#if this.validating}}
                {{#if validationErrors}}
                    <div class="failed flex items-start gh-members-upload-errorcontainer {{if this.importDisabled "error" "warning"}}">
                        <div class="mr3">
                            {{#if this.importDisabled}}
                                {{svg-jar "warning" class="nudge-top--2 w5 h5 fill-red"}}
                            {{else}}
                                {{svg-jar "warning" class="nudge-top--2 w5 h5 fill-yellow-d1"}}
                            {{/if}}
                        </div>
                        <div class="ma0">
                            <p class="ma0 pa0 flex-grow w-100">The CSV contains errors! {{unless this.importDisabled "Some members will not be imported."}}</p>
                            {{#if validationErrors}}
                                <ul class="ma0 pa0 mt4 list bt b--whitegrey">
                                {{#each validationErrors as |error|}}
                                    <li class="gh-members-import-errormessage">
                                        <span>{{{error.message}}}</span>
                                        {{#if error.context}}
                                            <p class="gh-members-import-errorcontext">{{{error.context}}}</p>
                                        {{/if}}
                                    </li>
                                {{/each}}
                                </ul>
                            {{/if}}
                        </div>
                    </div>
                {{else}}
                    <div class="bg-whitegrey-l2 ba b--whitegrey br3 gh-image-uploader gh-members-import-spinner">
                        <div class="gh-loading-content">
                            <div class="gh-loading-spinner"></div>
                        </div>
                        <div class="description midgrey">Validating...</div>
                    </div>
                {{/if}}
            {{else}}
                <GhFormGroup>
                    {{#if this.config.enableDeveloperExperiments}}
                        <h4 class="fw6 f8 dib mb1">Mapping</h4>
                        <div class="gh-members-import-scrollarea">
                            <GhMembersImportTable
                                @importData={{this.fileData}}
                                @mapping={{this.mapping}}
                                @updateMapping={{action "updateMapping"}}/>
                        </div>
                        <p>Match the fields in your uploaded file to Ghost members.</p>
                    {{else}}
                        <div class="bg-whitegrey-l2 ba b--whitegrey br3">
                            <div class="flex flex-column items-center justify-center gh-members-import-file">
                                {{svg-jar "file-tabular-data" class="w9 h9 mb1 stroke-midgrey"}}
                                <div class="description midgrey">{{this.file.name}}</div>
                            </div>
                        </div>
                    {{/if}}

                    <div class="mt4">
                        <label for="label-input"><span class="fw6 f8 dib mb1">Labels</span></label>
                        <GhMemberLabelInput @member={{this.labels}} @triggerId="label-input" />
                        <p>Will be applied to all newly imported members</p>
                    </div>
                </GhFormGroup>
            {{/if}}
        {{else}}
            {{#if this.failureMessage}}
                <div class="failed flex items-start gh-members-upload-errorcontainer error">
                    <div class="mr2">{{svg-jar "warning" class="nudge-top--2 w4 h4 fill-red"}}</div>
                    <p class="ma0 pa0">{{this.failureMessage}}</p>
                </div>
            {{/if}}
            <div class="upload-form bg-whitegrey-l2 ba b--whitegrey br3">
                <section class="gh-image-uploader gh-members-import-uploader {{this.dragClass}}">
                    <GhFileInput @multiple={{false}} @alt={{this.labelText}} @action={{action "fileSelected"}} @accept={{this.accept}}>
                        <div class="flex flex-column items-center">
                            {{svg-jar "upload" class="w9 h9 mb1 stroke-midgrey"}}
                            <div class="description midgrey">{{this.labelText}}</div>
                        </div>
                    </GhFileInput>
                </section>
            </div>
        {{/if}}
    </div>
{{/if}}

<div class="modal-footer {{if (and this.filePresent (not this.failureMessage) (not this.importResponse)) "modal-footer-spread"}}">
    {{#if this.importResponse}}
        <button {{action "closeModal"}} disabled={{this.closeDisabled}} class="gh-btn gh-btn-blue" data-test-button="close-import-members">
            <span>{{if this.importResponse.invalid.count "Done" "Awesome"}}</span>
        </button>
    {{else if (and this.filePresent (not this.failureMessage))}}
        {{#if this.validating}}
            {{#if validationErrors}}
                <button {{action "reset"}} class="gh-btn" data-test-button="close-import-members">
                    <span>Start over</span>
                </button>
                {{#unless this.importDisabled}}
                    <button class="gh-btn gh-btn-blue" {{action "continueImport"}}>
                        <span>Continue</span>
                    </button>
                {{/unless}}
            {{/if}}
        {{else}}
            <button {{action "reset"}} class="gh-btn" data-test-button="close-import-members">
                <span>Start over</span>
            </button>
            <button class="gh-btn gh-btn-green" {{action "upload"}} disabled={{this.importDisabled}}>
                <span>Import{{#if this.fileData.length}} {{pluralize this.fileData.length 'member'}}{{/if}}</span>
            </button>
        {{/if}}
    {{else}}
        <button {{action "closeModal"}} disabled={{this.closeDisabled}} class="gh-btn" data-test-button="close-import-members">
            <span>Close</span>
        </button>
    {{/if}}
</div>