<nb-card>
    <nb-card-header>
        <h1>Sync Remote Data with your Local Storage</h1>
    </nb-card-header>
    <nb-card-body>
        <nb-card>
            <nb-card-header>
                Currently in Local Store
            </nb-card-header>
            <nb-card-body>
                <table style="width: 100%;">
                    <tr>
                        <th colspan="2">Followings</th>
                    </tr>
                    <tr>
                        <td>Number of followings</td>
                        <td>{{(followings$ | async)?.length}}</td>
                    </tr>
                </table>
                <div class="divider"></div>
                <table style="width: 100%;">
                    <tr>
                        <th colspan="2">Number of Accounts in List</th>
                    </tr>
                    <tr *ngFor="let list of lists$ | async">
                        <td>{{list?.title}}</td>
                        <td>{{list?.accounts?.length}}</td>
                    </tr>
                </table>
            </nb-card-body>
            <nb-card-footer>
                <div>
                    <button nbButton type="button"
                            [nbSpinner]="(loading$ | async)!"
                            [disabled]="(loading$ | async)!"
                            (click)="loadListsAndAccounts()">Get Lists and Accounts
                    </button>
                </div>

                <div class="divider"></div>

                <div style="display:flex; flex-direction: column;" *ngIf="(instanceName$ | async) as instanceName">
                    <a [href]="'https://' + instanceName + '/settings/export'" rel="noreferrer" target="_blank">
                        Export lists using your account settings page
                    </a>
                    <a [href]="'https://' + instanceName + '/settings/import'" rel="noreferrer" target="_blank">
                        Import lists using your account settings page
                    </a>
                </div>

                <div *ngIf="(lists$ | async) && (followings$ | async)">
                    <p>Now you can:</p>
                    <ul>
                        <li>Edit the lists <a [routerLink]="['/lists']">Lists</a></li>
                        <li>Select the <a [routerLink]="['/followings/list']">List view</a> to add and remove users from lists</li>
                        <li>... or use the experimental <a [routerLink]="['/followings/matrix']">Matrix view</a></li>
                    </ul>
                </div>
            </nb-card-footer>
        </nb-card>
    </nb-card-body>
</nb-card>
