@props(['trade'])

@php
    $dialogId = 'close-trade-dialog-'.$trade->id;
    $isClosing = old('_trade_close') === (string) $trade->id;
@endphp

<dialog id="{{ $dialogId }}" class="vpm-dialog vpm-dialog--trader-form" aria-labelledby="{{ $dialogId }}-title">
    <form method="POST" action="{{ route('admin.trades.close', $trade) }}" class="vpm-dialog__panel">
        @csrf
        <input type="hidden" name="_trade_close" value="{{ $trade->id }}">

        <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="{{ $dialogId }}-title" class="vpm-dialog__title">Close trade</h2>
                    <p class="vpm-dialog__description">
                        Close {{ $trade->adminSummaryLine() }} for {{ $trade->displayPartyName() }}. Only the change in profit or loss since the last update is applied to the client balance.
                    </p>
                </header>

                <div class="vpm-dialog__fields">
                    <x-vpm.auth-field
                        name="pnl"
                        label="Final profit / loss ({{ $trade->currency }})"
                        type="number"
                        :value="$isClosing ? old('pnl', $trade->pnl) : $trade->pnl"
                        required
                        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">Close trade</x-vpm.button>
        </footer>
    </form>
</dialog>