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

@section('title', 'Fund Account')

@section('content')
<div class="vpm-fund-account">
    <div class="vpm-fund-account__intro">
        <h2 class="vpm-fund-account__title">Fund Account</h2>
        <div class="vpm-fund-account__links">
            <a href="{{ route('app.pricing') }}" class="vpm-fund-account__link">View pricing</a>
            <a href="{{ route('app.fund.buy-crypto') }}" class="vpm-fund-account__link">Buy crypto</a>
        </div>
    </div>

    @if (! ($depositsEnabled ?? true))
        <p class="vpm-fund-account__paused">New deposits are temporarily unavailable.</p>
    @else
        <section class="vpm-fund-account__card">
            <form method="POST" action="{{ route('app.deposits.amount.store') }}" class="vpm-fund-account__form">
                @csrf

                <div class="vpm-fund-account__field">
                    <label class="vpm-fund-account__field-label" for="fund-account">Account</label>
                    <div class="vpm-fund-account__select" id="fund-account" aria-disabled="true">
                        <span>Trading Balance</span>
                        <span class="material-icons notranslate" aria-hidden="true">expand_more</span>
                    </div>
                </div>

                <div class="vpm-fund-account__field">
                    <x-vpm.float-field
                        id="amount"
                        name="amount"
                        label="Amount"
                        type="number"
                        :prefix="$currency"
                        placeholder="e.g. 500"
                        :min="$depositMin"
                        :max="$depositMax"
                        step="0.01"
                        required
                        autofocus
                        data-vpm-constraint
                        aria-describedby="fund-amount-hint"
                    />
                    <span id="fund-amount-hint" class="vpm-fund-account__hint vpm-input-hint--live" data-valid="Amount is within allowed limits.">
                        Between {{ number_format($depositMin, 0) }} and {{ number_format($depositMax, 0) }} {{ $currency }}
                    </span>
                </div>

                <button type="submit" class="vpm-btn vpm-btn--primary vpm-btn--block vpm-fund-account__submit">
                    Proceed
                </button>
            </form>
        </section>
    @endif
</div>
@endsection