@extends('layouts.vpm-dashboard', ['active' => 'account', 'area' => 'admin'])

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

@section('content')
<div class="vpm-page vpm-admin-account-page">
    <x-vpm.page-intro
        title="Account Info"
        description="Access, manage, and oversee your admin account settings and details within the admin panel."
    />

    <button
        type="button"
        class="vpm-btn vpm-btn--primary vpm-admin-account-page__update"
        data-vpm-dialog-open="update-admin-account-dialog"
    >
        Update your account
    </button>

    <article class="vpm-trader-info-card vpm-admin-account-card">
        <div class="vpm-trader-info-card__body vpm-admin-account-card__body">
            <dl class="vpm-trader-info-stats">
                @foreach ($stats as $stat)
                    <div @class([
                        'vpm-trader-info-stats__row',
                        'vpm-trader-info-stats__row--accent' => $stat['accent'] ?? false,
                    ])>
                        <dt class="vpm-trader-info-stats__label">{{ $stat['label'] }}</dt>
                        <dd class="vpm-trader-info-stats__value">{{ $stat['value'] }}</dd>
                    </div>
                @endforeach
            </dl>
        </div>
    </article>
</div>

<x-vpm.admin-account-update-dialog
    :admin="$admin"
    :platform-values="$platformValues"
    :form-fields="$formFields"
    :card-tier-fields="$cardTierFields"
/>

@if ($errors->any())
    @push('scripts')
        <script>document.body.dataset.vpmReopenDialog = 'update-admin-account-dialog';</script>
    @endpush
@endif
@endsection