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

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

<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>
            {{/if}}
        {{/if}}

        {{#if this.customizing}}
            <GhFormGroup>
                {{#if this.config.enableDeveloperExperiments}}
                    <div class="gh-members-import-scrollarea">
                        <GhMembersImportTable
                            @importData={{this.fileData}}
                            @mapping={{this.mapping}}
                            @updateMapping={{action "updateMapping"}}/>
                    </div>
                {{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">Label these members</span></label>
                    <GhMemberLabelInput @member={{this.labels}} @triggerId="label-input" />
                </div>
            </GhFormGroup>
        {{/if}}

        {{#if this.uploading}}
            <div class="progress-container pt20 pb20">
                <div class="gh-progress-container-progress">
                    <div class="gh-progress-bar {{if this.failureMessage "-error"}}" style={{this.progressStyle}}></div>
                </div>
            </div>
        {{/if}}

        {{#if this.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>{{format-number 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>{{format-number 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">{{format-number this.importResponse.invalid.count}} {{pluralize this.importResponse.invalid.count "member" without-count=true}} 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="fw4">({{format-number error.count}})</span></li>
                                {{/each}}
                                </ul>
                            {{/if}}
                        </div>
                    </div>
                </div>
            {{/if}}
        {{/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>

<div class="modal-footer {{unless 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}}
        {{/if}}

        {{#if this.customizing}}
            <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}} {{format-number this.fileData.length}} {{pluralize this.fileData.length 'member' without-count=true}}{{/if}}</span>
            </button>
        {{/if}}
    {{else}}
        <button {{action "closeModal"}} disabled={{this.closeDisabled}} class="gh-btn" data-test-button="close-import-members">
            <span>Close</span>
        </button>
        <a class="gh-btn" href="https://static.ghost.org/v3.0.0/files/member-import-template.csv" target="_blank">
            <span>Download sample CSV file</span>
        </a>
    {{/if}}
</div>