@extends('layouts.vpm-mobile-app', ['active' => 'home'])

@section('title', 'Trade Info')

@section('content')
<div class="vpm-page vpm-trader-info-page vpm-trade-info-page">
    <header class="vpm-page-intro vpm-trade-info-page__intro">
        <h2 class="vpm-page-intro__title">Trade Info</h2>
        <p class="vpm-page-intro__description">View details of this trade, including the trade ID and other relevant information.</p>
    </header>

    <article class="vpm-trader-info-card vpm-trade-info-card">
        <div class="vpm-trader-info-card__body vpm-trade-info-card__body">
            <dl class="vpm-trader-info-stats">
                <div class="vpm-trader-info-stats__row vpm-trader-info-stats__row--accent">
                    <dt class="vpm-trader-info-stats__label">Trade ID:</dt>
                    <dd class="vpm-trader-info-stats__value">{{ $trade->publicId() }}</dd>
                </div>
                <div class="vpm-trader-info-stats__row">
                    <dt class="vpm-trader-info-stats__label">Date:</dt>
                    <dd class="vpm-trader-info-stats__value">{{ $trade->formattedExecutedAt() }}</dd>
                </div>
                <div class="vpm-trader-info-stats__row vpm-trader-info-stats__row--accent">
                    <dt class="vpm-trader-info-stats__label">Expert Trader:</dt>
                    <dd class="vpm-trader-info-stats__value">{{ $trade->copyTrader?->name ?? '—' }}</dd>
                </div>
                <div class="vpm-trader-info-stats__row">
                    <dt class="vpm-trader-info-stats__label">Amount:</dt>
                    <dd class="vpm-trader-info-stats__value">{{ $trade->formattedNotional() }}</dd>
                </div>
                <div class="vpm-trader-info-stats__row vpm-trader-info-stats__row--accent">
                    <dt class="vpm-trader-info-stats__label">Symbol:</dt>
                    <dd class="vpm-trader-info-stats__value vpm-trade-info-card__symbol">
                        <span>{{ $trade->displayPairSymbol() }}</span>
                        <img
                            src="{{ $trade->logoUrl() }}"
                            alt=""
                            class="vpm-trade-info-card__symbol-logo"
                            width="18"
                            height="18"
                            loading="lazy"
                        >
                    </dd>
                </div>
                <div class="vpm-trader-info-stats__row">
                    <dt class="vpm-trader-info-stats__label">Direction:</dt>
                    <dd class="vpm-trader-info-stats__value">{{ strtoupper($trade->side) }}</dd>
                </div>
                <div class="vpm-trader-info-stats__row vpm-trader-info-stats__row--accent">
                    <dt class="vpm-trader-info-stats__label">Leverage:</dt>
                    <dd class="vpm-trader-info-stats__value">{{ max(1, (int) $trade->leverage) }}</dd>
                </div>
                <div class="vpm-trader-info-stats__row">
                    <dt class="vpm-trader-info-stats__label">Time:</dt>
                    <dd class="vpm-trader-info-stats__value">{{ $trade->durationMinutes() }}</dd>
                </div>
                <div class="vpm-trader-info-stats__row vpm-trader-info-stats__row--accent">
                    <dt class="vpm-trader-info-stats__label">Gain:</dt>
                    <dd class="vpm-trader-info-stats__value {{ $trade->adminPnlClass() }}">{{ $trade->formattedDollarPnl() }}</dd>
                </div>
                <div class="vpm-trader-info-stats__row">
                    <dt class="vpm-trader-info-stats__label">Status:</dt>
                    <dd class="vpm-trader-info-stats__value">{{ $trade->statusLabel() }}</dd>
                </div>
            </dl>

            @if ($trade->isOpen())
                <form
                    method="POST"
                    action="{{ route('app.trading.close', $trade) }}"
                    class="vpm-trade-info-card__close"
                    data-vpm-confirm="Close this trade at market price?"
                >
                    @csrf
                    <button type="submit" class="vpm-btn vpm-btn--primary vpm-trade-info-card__close-btn">Close Trade</button>
                </form>
            @endif
        </div>
    </article>
</div>
@endsection