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

<header class="modal-header" data-test-modal="import-members">
    <h1>
        {{#if this.importResponse}}
            Import complete
        {{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 bg-whitegrey-l2 ba b--whitegrey br3 pa4">
        <div class="flex items-center">
            {{svg-jar "check-circle" class="w4 h4 stroke-green mr2"}}
            <p class="ma0 pa0"><span class="fw6">{{this.importResponse.imported.count}}</span> members were added</p>
        </div>
        {{#if this.importResponse.invalid.count}}
            <div class="flex items-start mt2">
                {{svg-jar "warning" class="w4 h4 fill-red mr2 nudge-top--3"}}
                <div>
                    <p class="ma0 pa0"><span class="fw5">{{this.importResponse.invalid.count}}</span> members were skipped</p>
                </div>
            </div>
            {{#if this.config.enableDeveloperExperiments}}
            {{#each this.importResponse.invalid.errors as |error|}}
                <p class="gh-members-import-errordetail">{{error.message}} <span class="fw6">({{error.count}})</span></p>
            {{/each}}
            {{/if}}
        {{/if}}
    </div>
{{else}}
    <div class="modal-body">
        {{#if (and this.filePresent (not this.failureMessage))}}
            {{#if this.validating}}
                {{#if validationErrors}}
                    <div class="flex">
                        <div class="mr2">{{svg-jar "warning" class="nudge-top--2 w5 h5 fill-yellow-d1"}}</div>
                        <p>The CSV contains errors some members will not be imported</p>
                    </div>

                    {{#each validationErrors as |error|}}
                    <div class="failed items-start gh-members-upload-errorcontainer gh-members-upload-warningmessage">
                        <p class="ma0 pa0 fw6 gh-members-import-errorheading">{{{error.message}}}</p>
                        {{#if error.context}}
                            <p class="ma0 pa0 gh-members-import-errorheading">{{{error.context}}}</p>
                        {{/if}}
                    </div>
                    {{/each}}
                {{else}}
                    Validating...
                {{/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 gh-members-upload-errormessage">
                    <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>Done</span>
        </button>
    {{else if (and this.filePresent (not this.failureMessage))}}
        <button {{action "reset"}} class="gh-btn" data-test-button="close-import-members">
            <span>Start over</span>
        </button>
        {{#if this.validating}}
            <button class="gh-btn gh-btn-green" {{action "continueImport"}} disabled={{this.importDisabled}}>
                <span>Continue</span>
            </button>
        {{else}}
            <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>