@php
    $isCreating = old('_trader') === 'create';
@endphp

<dialog id="create-expert-trader-dialog" class="vpm-dialog vpm-dialog--trader-form" aria-labelledby="create-expert-trader-dialog-title">
    <form
        method="POST"
        action="{{ route('admin.copy-traders.store') }}"
        class="vpm-dialog__panel"
        enctype="multipart/form-data"
    >
        @csrf
        <input type="hidden" name="_trader" value="create">

        <button type="button" class="vpm-dialog__close vpm-dialog__close--corner" data-vpm-dialog-close aria-label="Close">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
            </svg>
        </button>

        <div class="vpm-dialog__scroll">
            <div class="vpm-dialog__content">
                <header class="vpm-dialog__header vpm-dialog__header--form">
                    <h2 id="create-expert-trader-dialog-title" class="vpm-dialog__title">Create expert trader</h2>
                </header>

                <div class="vpm-dialog__fields">
                    <x-vpm.auth-field
                        name="name"
                        label="Name"
                        :value="$isCreating ? old('name') : ''"
                        required
                        maxlength="120"
                    />

                    <div class="vpm-auth-float vpm-auth-float--file">
                        <div class="vpm-auth-float__control">
                            <input
                                type="file"
                                id="trader-photo"
                                name="photo"
                                class="vpm-auth-float__input vpm-auth-float__input--file @error('photo') vpm-auth-float__input--error @enderror"
                                accept="image/jpeg,image/png,image/webp"
                            >
                            <label class="vpm-auth-float__label vpm-auth-float__label--file" for="trader-photo">Photo</label>
                        </div>
                        @if ($isCreating)
                            @error('photo')
                                <span class="vpm-auth-float__error" role="alert">{{ $message }}</span>
                            @enderror
                        @endif
                    </div>

                    <x-vpm.auth-field
                        name="trades"
                        label="Trades"
                        type="number"
                        :value="$isCreating ? old('trades') : ''"
                        min="0"
                    />
                    <x-vpm.auth-field
                        name="total_wins"
                        label="Total Wins"
                        type="number"
                        :value="$isCreating ? old('total_wins', 0) : 0"
                        required
                        min="0"
                    />
                    <x-vpm.auth-field
                        name="total_losses"
                        label="Total Losses"
                        type="number"
                        :value="$isCreating ? old('total_losses', 0) : 0"
                        required
                        min="0"
                    />
                    <x-vpm.auth-field
                        name="min_copy_amount"
                        label="Minimum"
                        type="number"
                        :value="$isCreating ? old('min_copy_amount', 200) : 200"
                        min="0"
                    />
                    <x-vpm.auth-field
                        name="profit_share"
                        label="Profit Share"
                        type="number"
                        :value="$isCreating ? old('profit_share', 10) : 10"
                        required
                        min="0"
                        max="100"
                        step="0.01"
                    />
                    <x-vpm.auth-field
                        name="followers"
                        label="Followers"
                        type="number"
                        :value="$isCreating ? old('followers', 0) : 0"
                        min="0"
                    />
                </div>
            </div>
        </div>

        <footer class="vpm-dialog__footer vpm-dialog__footer--form">
            <x-vpm.button type="button" variant="secondary" data-vpm-dialog-close>Cancel</x-vpm.button>
            <x-vpm.button type="submit" variant="primary">Create</x-vpm.button>
        </footer>
    </form>
</dialog>