@props(['client'])

<dialog id="update-progress-dialog" class="vpm-dialog vpm-dialog--trader-form" aria-labelledby="update-progress-dialog-title">
    <form method="POST" action="{{ route('admin.clients.update-progress', $client) }}" class="vpm-dialog__panel">
        @csrf
        @method('PUT')

        <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="update-progress-dialog-title" class="vpm-dialog__title">Update progress</h2>
                </header>

                <div class="vpm-dialog__fields">
                    <x-vpm.auth-field
                        name="trade_target"
                        label="Trade Target (%)"
                        type="number"
                        :value="old('trade_target', $client->tradeTargetPercent())"
                        min="0"
                        max="100"
                        step="0.01"
                    />
                    <x-vpm.auth-field
                        name="signal_strength"
                        label="Signal Strength (%)"
                        type="number"
                        :value="old('signal_strength', $client->signalStrengthPercent())"
                        min="0"
                        max="100"
                        step="0.01"
                    />
                </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">Update</x-vpm.button>
        </footer>
    </form>
</dialog>