<nb-card>
    <nb-card-header style="position: relative;">
        <h1>Matrix View for Followings</h1>
        <div class="divider"></div>
        <nb-badge text="experimental" position="top right" status="success"></nb-badge>
        <app-not-optimized-for-mobile-devices></app-not-optimized-for-mobile-devices>
        <app-filters></app-filters>
    </nb-card-header>
    <nb-card-body>
        <table>
            <thead>
            <tr>
                <th></th>
                <th *ngFor="let list of lists$ | async" class="list-title">
                    {{list.title}}
                </th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let account of followings$ | async">
                <th>
                    <ng-template #templateRef>
                        <div style="padding: 20px;">
                            <p [innerHTML]="account.note"></p>
                            <h4 *ngIf="account.fields.length > 0">Custom fields</h4>
                            <div class="table">
                                <div class="row" *ngFor="let field of account.fields">
                                    <div class="column first">{{ field.name }}</div>
                                    <div class="column" [innerHTML]="field.value"></div>
                                </div>
                            </div>
                        </div>
                    </ng-template>
                    <span (click)="openMoreInfo(account)"
                          [nbPopover]="templateRef"
                          nbPopoverTrigger="hover"
                          nbPopoverPlacement="bottom"
                    >
                        {{account.displayName}} <span class="username">@{{account.acct}}</span>
                    </span>
                </th>
                <td *ngFor="let list of lists$ | async">
                    <nb-checkbox style="cursor: pointer;"
                                 [checked]="isChecked(account.lists, list.id)"
                                 (checkedChange)="onCheckedChange($event, account.id, list.id)">
                    </nb-checkbox>
                </td>
            </tr>
            </tbody>
        </table>
    </nb-card-body>
</nb-card>

<ng-template #dialog let-ref="dialogRef">
    <div class="container" *ngIf="selectedAccount">
        <app-account [account]="selectedAccount">
            <div footer>
                <button nbButton style="cursor: pointer;" (click)="ref.close()">Close Infos</button>
            </div>
        </app-account>
    </div>
</ng-template>

