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

@section('title', 'Account')

@section('content')
<div class="vpm-account-hub">
    <div class="vpm-account-hub__intro">
        <h2 class="vpm-account-hub__title">Manage Account</h2>
        <p class="vpm-account-hub__desc">Update your account settings and manage your preferences here.</p>
    </div>

    <div class="vpm-account-hub__profile">
        <div class="vpm-account-hub__avatar-wrap">
            @if ($user->profilePhotoUrl())
                <img
                    src="{{ $user->profilePhotoUrl() }}"
                    alt="{{ $user->name }}"
                    class="vpm-account-hub__avatar"
                    width="160"
                    height="160"
                >
            @else
                <img
                    src="{{ asset('pages/human.webp') }}"
                    alt=""
                    class="vpm-account-hub__avatar"
                    width="160"
                    height="160"
                >
            @endif
        </div>
        <h3 class="vpm-account-hub__name">{{ $user->name }}</h3>
    </div>

    <div class="vpm-account-hub__grid">
        <x-vpm.account-setting-card
            href="{{ route('app.account.notifications') }}"
            title="Push Notifications"
            icon="notifications"
            color="#e1555d"
        />
        <x-vpm.account-setting-card
            href="{{ route('app.account.verifications') }}"
            title="Account Verifications"
            icon="verified_user"
            color="#525298"
        />
        <x-vpm.account-setting-card
            href="{{ route('app.account.address') }}"
            title="Update Address"
            icon="home"
            color="#22b07d"
        />
        <x-vpm.account-setting-card
            href="{{ route('app.account.password') }}"
            title="Update Password"
            icon="lock"
            color="#32a7e2"
        />
        <x-vpm.account-setting-card
            href="{{ route('app.account.photo') }}"
            title="Update Profile Photo"
            icon="account_circle"
            color="#b548c6"
        />
        <x-vpm.account-setting-card
            href="{{ route('app.account.email') }}"
            title="Update Email Address"
            icon="mail"
            color="#01b0a3"
        />
    </div>
</div>
@endsection