@if (loading()) {
    <div class="d-flex">
        <output class="spinner-border spinner-border-sm fw-normal"></output>
    </div>
} @else {
    <ul class="list-group">
        @if (entries().length === 0) {
            <li class="list-group-item">
                <div class="d-flex justify-content-center">
                    <span class="fst-italic" i18n>No entries found.</span>
                </div>
            </li>
        } @else {
            @for (entry of entries(); track entry.id) {
                <li class="list-group-item">
                    <div class="d-flex justify-content-between align-items-center">
                        <ng-template #timestamp>
                            <div class="text-light">
                                {{ entry.timestamp | customDate:'longDate' }} {{ entry.timestamp | customDate:'shortTime' }}
                            </div>
                        </ng-template>
                        <span class="text-muted" [ngbTooltip]="timestamp">{{ entry.timestamp | customDate:'relative' }}</span>
                        @if (entry.actor) {
                            <span class="ms-3 fst-italic">{{ entry.actor.username }}</span>
                        } @else {
                            <span class="ms-3 fst-italic">System</span>
                        }
                        <span class="badge bg-secondary ms-auto" [class.bg-primary]="entry.action === AuditLogAction.Create">{{ entry.action | titlecase }}</span>
                    </div>
                    <ul class="mt-2">
                        @for (change of entry.changes | keyvalue; track change.key) {
                            @if (change.value["type"] === 'm2m') {
                                <li>
                                    <span class="fst-italic">{{ change.value["operation"] | titlecase }}</span>&nbsp;
                                    <span>{{ change.key | titlecase }}</span>:&nbsp;
                                    <code class="text-primary">{{ change.value["objects"].join(', ') }}</code>
                                </li>
                            }
                            @else if (change.value["type"] === 'custom_field') {
                                <li>
                                    <span>{{ change.value["field"] }}</span>:&nbsp;
                                    <code class="text-primary">{{ change.value["value"] }}</code>
                                </li>
                            }
                            @else {
                                <li>
                                    <span>{{ change.key | titlecase }}</span>:&nbsp;
                                    @if (change.key === 'content') {
                                        <code class="text-primary">{{ change.value[1]?.substring(0,100) }}...</code>
                                    } @else {
                                        <code class="text-primary">{{ getPrettyName(change.key, change.value[1]) | async }}</code>
                                    }
                                </li>
                            }
                        }
                    </ul>
                </li>
            }
        }
    </ul>
}