Tournament Name* {#if errors.name}

{errors.name}

{/if}

Description

<p class="text-muted-foreground text-sm">Provide a brief description of the tournament.</p>
                    {#if errors.description}
                        <p class="text-destructive text-sm">{errors.description}</p>
                    {/if}
                </div>

<div class="space-y-2">
                    <Label for="location">Location</Label>
                    <Input id="location" type="text" bind:value={form.location} placeholder="Enter location" />
                    {#if errors.location}
                        <p class="text-destructive text-sm">{errors.location}</p>
                    {/if}
                </div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    
                    <div class="space-y-2">
                        <Label>Start Date*</Label>
                        <Popover>
                            <PopoverTrigger>
                                <Button variant="outline" class={cn('w-full pl-3 text-left font-normal', !startDate && 'text-muted-foreground')}>
                                    {#if startDate}
                                        {format(startDate, 'PPP')}
                                    {:else}
                                        <span>Pick a date</span>
                                    {/if}
                                    <CalendarIcon class="ml-auto h-4 w-4 opacity-50" />
                                </Button>
                            </PopoverTrigger>
                            <PopoverContent class="w-auto p-0" align="start">
                                <Calendar initialFocus type="single" bind:value={startDate} />
                            </PopoverContent>
                        </Popover>
                        {#if errors.start_date}
                            <p class="text-destructive text-sm">{errors.start_date}</p>
                        {/if}
                    </div>
                </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    
                    <div class="space-y-2">
                        <Label for="max_teams">Maximum Teams</Label>
                        <Input id="max_teams" type="number" min="2" bind:value={form.max_teams} />
                        <p class="text-muted-foreground text-sm">Maximum number of teams that can participate.</p>
                        {#if errors.max_teams}
                            <p class="text-destructive text-sm">{errors.max_teams}</p>
                        {/if}
                    </div>

<div class="space-y-2">
                        <Label>Tournament Status*</Label>
                        <Select type="single" bind:value={form.status}>
                            <SelectTrigger class="w-full capitalize">{form.status ? form.status : 'Select a status'}</SelectTrigger>
                            <SelectContent>
                                {#each statusOptions as option (option.value)}
                                    <SelectItem value={option.value}>{option.label}</SelectItem>
                                {/each}
                            </SelectContent>
                        </Select>
                        <p class="text-muted-foreground text-sm">Draft: Only you can see. Public: Anyone can see. Private: Only invited users.</p>
                        {#if errors.status}
                            <p class="text-destructive text-sm">{errors.status}</p>
                        {/if}
                    </div>
                </div>

<div class="flex justify-end gap-4 mt-8">
                    <Button type="button" variant="outline" href="/">Cancel</Button>
                    <Button type="submit">Create Tournament</Button>
                </div>
            </form>
        </div>
    </div>
</AppLayout>

Create New Tournament