136 lines
7.8 KiB
HTML
136 lines
7.8 KiB
HTML
<div class="min-h-screen pb-32">
|
|
<header class="bg-background/80 backdrop-blur-md fixed top-0 w-full z-50 flex justify-between items-center px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<button class="hover:opacity-80 transition-opacity" [routerLink]="['/']">
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
<h1 class="text-primary font-black tracking-tight font-headline text-xl">The Arena</h1>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="p-2 hover:bg-surface-container rounded-full transition-colors text-on-surface-variant">
|
|
<mat-icon>search</mat-icon>
|
|
</button>
|
|
<button class="text-on-surface-variant font-medium text-sm px-4 py-2 hover:bg-surface-container rounded-full transition-colors" [routerLink]="['/']">Cancel</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="pt-24 px-6 max-w-2xl mx-auto">
|
|
<div class="mb-8">
|
|
<h2 class="font-headline font-bold text-3xl tracking-tight mb-2">{{ isEditing ? 'Edit Bet' : 'Create New Bet' }}</h2>
|
|
<p class="text-on-surface-variant text-base">{{ isEditing ? 'Refine the stakes and update the digital arena.' : 'Define the stakes, set the goal, and invite your rivals to the digital arena.' }}</p>
|
|
</div>
|
|
|
|
<form [formGroup]="betForm" (ngSubmit)="onSubmit()" class="space-y-8">
|
|
<section class="bg-surface-container-low rounded-2xl p-6 space-y-6 border border-black/5">
|
|
<div class="space-y-2">
|
|
<label class="text-xs font-bold uppercase tracking-wider text-on-surface-variant px-1" for="betTitle">Bet Title</label>
|
|
<input type="text" id="betTitle" formControlName="title" placeholder="e.g., Morning Run Challenge" class="w-full bg-surface-container-highest border-none rounded-full px-6 py-4 focus:ring-2 focus:ring-primary text-on-surface placeholder:text-on-surface-variant/50">
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label class="text-xs font-bold uppercase tracking-wider text-on-surface-variant px-1" for="betDescription">Description (Optional)</label>
|
|
<textarea id="betDescription" formControlName="description" placeholder="Describe the rules or the prize..." class="w-full bg-surface-container-highest border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary text-on-surface placeholder:text-on-surface-variant/50" rows="3"></textarea>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<label class="text-xs font-bold uppercase tracking-wider text-on-surface-variant px-1" for="betStake">Stake</label>
|
|
<div class="relative">
|
|
<input type="text" id="betStake" formControlName="stake" placeholder="10.00" class="w-full bg-surface-container-highest border-none rounded-full px-6 py-4 focus:ring-2 focus:ring-primary text-on-surface">
|
|
<span class="absolute right-6 top-1/2 -translate-y-1/2 text-on-surface-variant font-bold">€</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-xs font-bold uppercase tracking-wider text-on-surface-variant px-1" for="groupId">Group (Optional)</label>
|
|
<div class="relative">
|
|
<select id="groupId" formControlName="groupId" class="w-full bg-surface-container-highest border-none rounded-full px-6 py-4 focus:ring-2 focus:ring-primary text-on-surface appearance-none">
|
|
<option value="">No Group</option>
|
|
@for (group of availableGroups(); track group.id) {
|
|
<option [value]="group.id">{{ group.name }}</option>
|
|
}
|
|
</select>
|
|
<mat-icon class="absolute right-5 top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none">expand_more</mat-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between px-1">
|
|
<div class="space-y-0.5">
|
|
<label class="text-sm font-bold text-on-surface">Public Bet</label>
|
|
<p class="text-xs text-on-surface-variant">Visible to everyone in the Explore section</p>
|
|
</div>
|
|
<button type="button"
|
|
(click)="betForm.patchValue({isPublic: !betForm.value.isPublic})"
|
|
[class.bg-primary]="betForm.value.isPublic"
|
|
[class.bg-surface-container-highest]="!betForm.value.isPublic"
|
|
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none">
|
|
<span [class.translate-x-6]="betForm.value.isPublic"
|
|
[class.translate-x-1]="!betForm.value.isPublic"
|
|
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"></span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="space-y-4">
|
|
<div class="flex items-center justify-between px-1">
|
|
<h3 class="font-headline font-bold text-lg">Participants</h3>
|
|
</div>
|
|
|
|
<!-- Search Users -->
|
|
<div class="relative">
|
|
<mat-icon class="absolute left-4 top-1/2 -translate-y-1/2 text-on-surface-variant">search</mat-icon>
|
|
<input type="text"
|
|
[formControl]="searchControl"
|
|
placeholder="Search rivals by name or email..."
|
|
class="w-full bg-surface-container rounded-full pl-12 pr-6 py-3 focus:ring-2 focus:ring-primary text-sm border-none">
|
|
|
|
<!-- Search Results Dropdown -->
|
|
@if (searchResults().length > 0) {
|
|
<div class="absolute top-full left-0 right-0 mt-2 bg-surface shadow-xl rounded-2xl overflow-hidden z-10 border border-black/5">
|
|
@for (user of searchResults(); track user.id) {
|
|
<div (click)="addParticipant(user)"
|
|
class="flex items-center gap-3 p-3 hover:bg-surface-container-highest cursor-pointer transition-colors">
|
|
<img [src]="user.avatarUrl || 'assets/default-avatar.png'" class="w-10 h-10 rounded-full object-cover">
|
|
<div>
|
|
<p class="text-sm font-bold">{{ user.name }}</p>
|
|
<p class="text-xs text-on-surface-variant">{{ user.email }}</p>
|
|
</div>
|
|
<mat-icon class="ml-auto text-primary">add_circle</mat-icon>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Selected Participants -->
|
|
<div class="flex gap-4 overflow-x-auto no-scrollbar py-2">
|
|
@for (user of selectedParticipants(); track user.id) {
|
|
<div class="flex-shrink-0 text-center space-y-2 group relative">
|
|
<div class="relative">
|
|
<img [src]="user.avatarUrl || 'assets/default-avatar.png'" class="w-16 h-16 rounded-full object-cover ring-4 ring-secondary-container" alt="Participant">
|
|
<button (click)="removeParticipant(user.id)"
|
|
class="absolute -top-1 -right-1 bg-error text-white w-6 h-6 rounded-full flex items-center justify-center shadow-md">
|
|
<mat-icon class="text-[14px]">close</mat-icon>
|
|
</button>
|
|
</div>
|
|
<p class="text-xs font-medium">{{ user.name }}</p>
|
|
</div>
|
|
}
|
|
|
|
@if (selectedParticipants().length === 0) {
|
|
<div class="flex items-center justify-center w-full py-8 text-on-surface-variant text-sm italic">
|
|
Add at least one participant...
|
|
</div>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<div class="pt-4 pb-12">
|
|
<button [disabled]="betForm.invalid || selectedParticipants().length === 0" class="w-full bg-gradient-to-br from-primary to-primary-container text-white font-headline font-bold text-lg py-5 rounded-full shadow-lg hover:scale-[1.02] active:scale-[0.98] transition-all disabled:opacity-50 disabled:scale-100" type="submit">
|
|
{{ isEditing ? 'Save Changes' : 'Create Bet' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
</div>
|