<table class="f8 gh-members-import-table ma0" data-test-members-import-table>
    <thead>
        <tr>
            <th class="table-cell-field"><span class="f-small midgrey ttu fw5">Field</span></th>
            <th class="table-cell-data">
                <div class="flex items-center justify-between">
                    <span class="f-small midgrey ttu fw5 nudge-top--1">Sample data <span class="midlightgrey fw4">(#{{format-number this.currentRecord}})</span></span>
                    <div class="flex items-center bg-white br2 ml1 nr1 gh-members-import-datanav">
                        <a href="#" {{action "prev"}} class="pa1 flex items-center justify-center br b--whitegrey {{unless this.hasPrevRecord "o-30"}}" data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 fill-middarkgrey" }}</a>
                        <a href="#" {{action "next"}} class="pa1 flex items-center justify-center {{unless this.hasNextRecord "o-30"}}" data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 fill-middarkgrey" }}</a>
                    </div>
                </div>
            </th>
            <th><span class="f-small midgrey ttu fw5">Import as</span></th>
        </tr>
    </thead>
    <tbody>
        {{#each this.currentlyDisplayedData as |row|}}
            <tr data-test-members-import-mapper={{row.key}}>
                <td class="middarkgrey table-cell-field"><span>{{row.key}}</span></td>
                <td class="middarkgrey table-cell-data {{unless row.value "empty-cell"}}"><span>{{row.value}}</span></td>
                <td><span><GhMembersImportMappingInput @updateMapping={{this.updateMapping}} @mapFrom={{row.key}} @mapTo={{row.mapTo}} @disabled={{@disabled}} /></span></td>
            </tr>
        {{else}}
            <tr>
                <td colspan="3" class="gh-member-import-nodata"><span>No data found in the uploaded CSV.</span></td>
            </tr>
        {{/each}}
    </tbody>
</table>