89 lines
4.7 KiB
HTML
89 lines
4.7 KiB
HTML
<div class="min-h-screen pb-20">
|
|
<!-- Header -->
|
|
<header class="sticky top-0 z-50 bg-background/80 backdrop-blur-md px-6 py-4 flex items-center gap-4 border-b border-black/5">
|
|
<button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-surface-container transition-colors" [routerLink]="['/']">
|
|
<mat-icon>arrow_back</mat-icon>
|
|
</button>
|
|
<h1 class="font-headline font-black tracking-tight text-xl text-primary">Bet History</h1>
|
|
</header>
|
|
|
|
<main class="max-w-xl mx-auto px-6 pt-6 space-y-6">
|
|
<!-- Search Bar -->
|
|
<div class="relative group">
|
|
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none text-on-surface-variant group-focus-within:text-primary transition-colors">
|
|
<mat-icon>search</mat-icon>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
placeholder="Search bets by title or description..."
|
|
class="w-full h-14 pl-12 pr-4 rounded-2xl bg-surface-container-low border border-black/5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all font-medium text-on-surface"
|
|
(input)="onSearch($event)"
|
|
>
|
|
</div>
|
|
|
|
<!-- Stats Summary -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="bg-surface-container-low p-5 rounded-2xl border border-black/5 flex flex-col gap-1">
|
|
<span class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">Total Bets</span>
|
|
<span class="text-2xl font-headline font-black text-primary">{{ historyChallenges().length }}</span>
|
|
</div>
|
|
<div class="bg-surface-container-low p-5 rounded-2xl border border-black/5 flex flex-col gap-1">
|
|
<span class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">Completed</span>
|
|
<span class="text-2xl font-headline font-black text-secondary">
|
|
{{ completedCount() }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- History List -->
|
|
@if (isLoading()) {
|
|
<div class="flex flex-col items-center justify-center py-12">
|
|
<div class="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
|
|
<p class="mt-4 text-on-surface-variant text-sm font-medium">Loading history...</p>
|
|
</div>
|
|
} @else {
|
|
<div class="space-y-4">
|
|
@for (challenge of historyChallenges(); track challenge.id) {
|
|
<div class="bg-surface rounded-3xl p-5 soft-shadow border border-black/5 active:scale-[0.98] transition-transform cursor-pointer" [routerLink]="['/challenge-detail', challenge.id]">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-2xl bg-surface-container flex items-center justify-center">
|
|
<mat-icon class="text-primary">history</mat-icon>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-headline font-bold text-on-surface">{{ challenge.title }}</h4>
|
|
<p class="text-xs text-on-surface-variant font-medium">{{ challenge.endDate | date:'mediumDate' }}</p>
|
|
</div>
|
|
</div>
|
|
<span
|
|
class="px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest"
|
|
[class.bg-secondary-container]="challenge.status === 'COMPLETED'"
|
|
[class.text-secondary]="challenge.status === 'COMPLETED'"
|
|
[class.bg-error-container]="challenge.status === 'EXPIRED'"
|
|
[class.text-error]="challenge.status === 'EXPIRED'"
|
|
>
|
|
{{ challenge.status }}
|
|
</span>
|
|
</div>
|
|
<div class="flex justify-between items-center pt-2 border-t border-black/5 mt-2">
|
|
<div class="flex items-center gap-2">
|
|
<mat-icon class="text-sm text-on-surface-variant">groups</mat-icon>
|
|
<span class="text-xs font-bold text-on-surface-variant">{{ challenge.participants.length }}</span>
|
|
</div>
|
|
<div class="text-lg font-headline font-black text-primary">€{{ challenge.stake }}</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
@if (historyChallenges().length === 0) {
|
|
<div class="flex flex-col items-center justify-center py-20 text-center bg-surface-container-low rounded-3xl border border-dashed border-on-surface-variant/20">
|
|
<mat-icon class="text-6xl text-on-surface-variant/10 mb-4">history_toggle_off</mat-icon>
|
|
<h3 class="text-xl font-headline font-bold">No History Found</h3>
|
|
<p class="text-on-surface-variant mt-2">Try searching for something else or join a new bet!</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</main>
|
|
</div>
|