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

@section('title', 'Deposits')

@section('content')
<div class="vpm-deposits">
    <x-vpm.page-intro
        title="Deposits"
        description="Deposits will be pending until there are sufficent confirmations on the blockchain."
    />

    @if ($depositsEnabled ?? true)
        <a href="{{ route('app.fund') }}" class="vpm-deposits__cta">
            Make a deposit
        </a>
    @else
        <p class="vpm-deposits__paused">New deposits are temporarily unavailable.</p>
    @endif

    @if ($deposits->isEmpty())
        <x-vpm.state-empty
            title="No deposits yet"
            description="Your deposit history will appear here after you make your first deposit."
        />
    @else
        <ul class="vpm-deposits__list">
            @foreach ($deposits as $deposit)
                <x-vpm.deposit-card :deposit="$deposit" />
            @endforeach
        </ul>
    @endif
</div>
@endsection