<div class="p-6 bg-white dark:bg-denim-darker rounded-lg h-full">
    <div class="flex flex-col h-full divide-y justify-between">
        <div class="flex flex-col md:flex-row md:items-center md:space-x-4 md:pb-6">
            <img class="w-10 h-10 rounded-full" [src]="account.avatar" alt="">
            <div class="font-medium">
                <div>{{account.displayName}}</div>
                <div class="text-sm text-gray-500 dark:text-white">
                    <a [href]="account.url" rel="noreferrer" target="_blank">
                        @{{account.acct}}
                    </a>
                </div>
            </div>
        </div>
        <div class="flex-grow pb-6">
            <div *ngIf="account.note" class="pt-6">
                <span [innerHTML]="account.note"></span>
            </div>
            <div *ngIf="account.fields.length > 0" class="flex flex-col md:pt-6 space-y-4">
                <div class="flex flex-col md:flex-row md:space-x-4" *ngFor="let field of account.fields">
                    <div class="min-w-[80px]">{{ field.name }}</div>
                    <div [innerHTML]="field.value"></div>
                </div>
            </div>
            <ng-content select="'[body]'"></ng-content>
        </div>
        <div>
            <ng-content select="'[footer]'"></ng-content>
        </div>
    </div>
</div>
