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}}
    <div class="modal-body bg-whitegrey-l2 ba b--whitegrey br3">
        <table class="gh-members-import-results">
            <tr>
                <td>Imported:</td>
                <td align="left" data-test-text="import-members-imported">{{this.importResponse.imported.count}}</td>
            </tr>
            {{#if this.importResponse.invalid.count}}
                <tr>
                    <td class="red">Invalid:</td>
                    <td align="left" data-test-text="import-members-invalid" class="red">{{this.importResponse.invalid.count}}</td>
                </tr>
                {{#if this.config.enableDeveloperExperiments}}
                <tr>
                    <td colspan="2">Details:</td>
                </tr>
                {{#each this.importResponse.invalid.errors as |error|}}
                    <tr>
                        <td>{{error.message}}</td>
                        <td>{{error.count}}</td>
                    </tr>
                {{/each}}
                {{/if}}
            {{/if}}
        </table>
    </div>
{{else}}
    <div class="modal-body">
        {{#if (and this.filePresent (not this.failureMessage))}}
            {{#if validationErrors}}
                <div class="failed flex items-start gh-members-upload-errorcontainer gh-members-upload-warningmessage">
                    <div class="mr2">{{svg-jar "warning" class="nudge-top--2 w5 h5 fill-yellow-d1"}}</div>
                    <div>
                        <p class="ma0 pa0 gh-members-import-errorheading"><span class="fw6">Warning!</span> There are some problems with the CSV data. You can still import it but data loss might occur.</p>
                        <button type="button" class="gh-btn gh-btn-text gh-btn-warningdetails regular" {{action (toggle "errorDetailsOpen" this)}}><span>Details</span></button>
                        {{#liquid-if this.errorDetailsOpen}}
                            {{#each validationErrors as |error|}}
                                <p class="ma0 pa0 gh-members-import-errordetailtext">{{error.message}}</p>
                            {{/each}}
                        {{/liquid-if}}
                    </div>
                </div>
            {{/if}}
            <GhFormGroup>
                {{#if this.config.enableDeveloperExperiments}}
                    <GhMembersImportTable @importData={{this.fileData}}/>
                {{/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>
        {{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>
        <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>
    {{else}}
        <button {{action "closeModal"}} disabled={{this.closeDisabled}} class="gh-btn" data-test-button="close-import-members">
            <span>Close</span>
        </button>
    {{/if}}
</div>