<section class="gh-canvas">
    <GhCanvasHeader class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>
            Subscribers
            <span style="font-weight:200;margin-left:10px;display:inline-block;" data-test-total-subscribers>
                {{#if this.fetchSubscribers.lastSuccessful}}
                    ({{this.filteredSubscribers.length}})
                {{else}}
                    (Loading...)
                {{/if}}
            </span>
        </h2>
        <div class="view-actions">
            {{#link-to "subscribers.import" class="gh-btn gh-btn-white mr2" data-test-link="import-csv"}}<span>Import CSV</span>{{/link-to}}
            <a href="#" {{action 'exportData'}} class="gh-btn gh-btn-white mr2"><span>Export CSV</span></a>
            {{#link-to "subscribers.new" class="gh-btn gh-btn-green" data-test-link="add-subscriber"}}<span>Add Subscriber</span>{{/link-to}}
        </div>
    </GhCanvasHeader>

    <section class="view-container">
        <div class="subscribers-table bg-grouped-table br4 shadow-1 pl5 pb2 pt2">
            <table>
                <thead>
                    <tr>
                        <th class="gh-subscribers-table-email-cell">
                            {{#link-to class="inline-flex items-center darkgrey" params=(subscribers-query-params "email" this.order this.direction)}}
                                {{subscribers-sort-icon "email" this.order this.direction}}
                                Email Address
                            {{/link-to}}
                        </th>
                        <th class="gh-subscribers-table-date-cell">
                            {{#link-to class="inline-flex items-center darkgrey" params=(subscribers-query-params "created_at" this.order this.direction)}}
                                {{subscribers-sort-icon "created_at" this.order this.direction}}
                                Subscription Date
                            {{/link-to}}
                        </th>
                        <th class="gh-subscribers-table-status-cell">
                            {{#link-to class="inline-flex items-center darkgrey" params=(subscribers-query-params "status" this.order this.direction)}}
                                {{subscribers-sort-icon "status" this.order this.direction}}
                                Status
                            {{/link-to}}
                        </th>
                        <th class="gh-subscribers-table-delete-cell"></th>
                    </tr>
                </thead>
            </table>
            <table>
                <tbody>
                    {{#if this.sortedSubscribers}}
                        <VerticalCollection
                            @items={{this.sortedSubscribers}}
                            @key="id"
                            @containerSelector=".gh-main"
                            @estimateHeight=34
                            @bufferSize=30
                            as |subscriber|
                        >
                            <tr>
                                <td class="gh-subscribers-table-email-cell">
                                    {{subscriber.email}}
                                </td>
                                <td class="gh-subscribers-table-date-cell">
                                    {{moment-format subscriber.createdAtUTC 'MMMM DD, YYYY'}}
                                </td>
                                <td class="gh-subscribers-table-status-cell">
                                    {{subscriber.status}}
                                </td>
                                <td class="gh-subscribers-table-delete-cell">
                                    <button class="gh-btn gh-btn-link gh-btn-sm" {{action "deleteSubscriber" subscriber}}><span>{{svg-jar "trash"}}</span></button>
                                </td>
                            </tr>
                        </VerticalCollection>
                    {{else}}
                        <tr>
                            <td colspan="4">
                                {{#if this.fetchSubscribers.isRunning}}
                                    <div class="relative h50"><GhLoadingSpinner /></div>
                                {{else}}
                                    {{!-- match height to delete button height for consistent spacing --}}
                                    <span class="dib" style="line-height: 33px">No subscribers found.</span>
                                {{/if}}
                            </td>
                        </tr>
                    {{/if}}
                </tbody>
            </table>
        </div>
    </section>
</section>

{{#if this.subscriberToDelete}}
    <GhFullscreenModal
        @modal="delete-subscriber"
        @model={{this.subscriberToDelete}}
        @confirm={{action "confirmDeleteSubscriber"}}
        @close={{action "cancelDeleteSubscriber"}}
        @modifier="action wide" />
{{/if}}

{{outlet}}
