<app-not-optimized-for-mobile-devices></app-not-optimized-for-mobile-devices>
<app-page>
    <div title>Followings (Matrix View)</div>
    <div body>
        <div class="px-4 py-6 sm:px-0 flex flex-col divide-y">
            <div class="pb-6">
                <app-filters></app-filters>
            </div>
            <div class="pt-6 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                <table class="w-full text-sm text-left text-gray-500 dark:text-white">
                    <thead>
                    <tr>
                        <th class="min-w-[350px] sticky top-0 bg-gray-100 dark:bg-denim-dark"></th>
                        <th *ngFor="let list of lists$ | async" class="sticky top-0 bg-gray-100 dark:bg-denim-dark whitespace-nowrap h-[140px] align-bottom min-w-[50px]">
                            <div class="w-[30px] [rotate:280deg] [translate: 25px, 51px] ">
                                <span class="pl-4 pb-0">
                                    {{list.title}}
                                </span>
                            </div>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let account of followings$ | async">
                        <th class="border-solid border-0 border-gray-300 border-b">
                            <p-overlayPanel #info [dismissable]="true" [showCloseIcon]="true">
                                <ng-template pTemplate="">
                                    <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>
                                </ng-template>
                            </p-overlayPanel>

                            <span class="font-bold">{{account.displayName}}</span> <span class="text-gray-400 pl-2">@{{account.acct}}</span> <i class="pl-2 pi pi-info-circle"
                                                                                                                                                (click)="info.toggle($event)"></i>
                        </th>
                        <td *ngFor="let list of lists$ | async" class="border-solid border-0 border-gray-300 border-b border-l text-center h-[50px]">
                            <input
                                type="checkbox"
                                [checked]="isChecked(account.lists, list.id)"
                                (change)="onCheckedChange($event, account.id, list.id)"
                            />
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</app-page>
