@props(['routePrefix', 'browserSessions', 'apiTokens' => null, 'twoFactorSecret' => null, 'twoFactorQrSvg' => null, 'recoveryCodes' => []])

@php
    $user = auth()->user();
    $tokenAbilities = \App\Models\User::API_TOKEN_ABILITIES;
@endphp

<div class="d-flex flex-column gap-4">
    <section id="profile-info" class="card" aria-labelledby="profile-info-heading">
        <div class="card-body">
            <h2 id="profile-info-heading" class="h5">Profile Information</h2>

            <form method="POST" action="{{ route($routePrefix.'.update') }}" class="mb-4">
                @csrf
                @method('PUT')

                @foreach ([['name', 'Name', 'text', 'name', $user->name, 150, true], ['email', 'Email', 'email', 'username', $user->email, 150, true], ['phone', 'Phone', 'tel', 'tel', $user->phone, 30, false]] as [$field, $label, $type, $autocomplete, $value, $maxLength, $isRequired])
                    <div class="mb-3">
                        <label class="form-label" for="profile-{{ $field }}">{{ $label }}</label>
                        <input id="profile-{{ $field }}" name="{{ $field }}" type="{{ $type }}" value="{{ old($field, $value) }}" autocomplete="{{ $autocomplete }}" maxlength="{{ $maxLength }}" @required($isRequired) @class(['form-control', 'is-invalid' => $errors->has($field)]) @error($field) aria-describedby="profile-{{ $field }}-error" @enderror>
                        @error($field)
                            <div id="profile-{{ $field }}-error" class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                @endforeach

                <button class="btn sm-btn-primary" type="submit">Save profile</button>
            </form>

            <h3 class="h6">Update Password</h3>

            <form method="POST" action="{{ route($routePrefix.'.password') }}">
                @csrf
                @method('PUT')

                <div class="mb-3">
                    <label class="form-label" for="password-current">Current password</label>
                    <input id="password-current" name="current_password" type="password" autocomplete="current-password" required @class(['form-control', 'is-invalid' => $errors->updatePassword->has('current_password')]) @error('current_password', 'updatePassword') aria-describedby="password-current-error" @enderror>
                    @error('current_password', 'updatePassword')
                        <div id="password-current-error" class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label" for="password-new">New password</label>
                    <input id="password-new" name="password" type="password" autocomplete="new-password" minlength="8" maxlength="255" required @class(['form-control', 'is-invalid' => $errors->updatePassword->has('password')]) @error('password', 'updatePassword') aria-describedby="password-new-error" @enderror>
                    @error('password', 'updatePassword')
                        <div id="password-new-error" class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label" for="password-confirm">Confirm new password</label>
                    <input id="password-confirm" name="password_confirmation" class="form-control" type="password" autocomplete="new-password" maxlength="255" required>
                </div>

                <button class="btn sm-btn-primary" type="submit">Change password</button>
            </form>
        </div>
    </section>

    <section id="two-factor" class="card" aria-labelledby="two-factor-heading">
        <div class="card-body">
            <h2 id="two-factor-heading" class="h5">
                Two-Factor Authentication
                <span @class(['badge', 'text-bg-success' => $user->hasTwoFactorEnabled(), 'text-bg-secondary' => ! $user->hasTwoFactorEnabled()])>{{ $user->hasTwoFactorEnabled() ? 'Enabled' : 'Not enabled' }}</span>
            </h2>

            @if ($twoFactorQrSvg)
                <p>Scan this code with your authenticator app, or type the setup key by hand.</p>
                <div class="sm-qr mb-3">{!! $twoFactorQrSvg !!}</div>
                <p>Setup key: <code>{{ $twoFactorSecret }}</code></p>

                <form method="POST" action="{{ route($routePrefix.'.two-factor.confirm') }}" class="mb-3">
                    @csrf
                    <label class="form-label" for="two-factor-code">6-digit code</label>
                    <div class="input-group sm-otp-group">
                        <input id="two-factor-code" name="code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" @class(['form-control', 'is-invalid' => $errors->has('code')]) @error('code') aria-describedby="two-factor-code-error" @enderror>
                        <button class="btn sm-btn-primary" type="submit">Confirm</button>
                        @error('code')
                            <div id="two-factor-code-error" class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </form>
            @elseif (! $user->hasTwoFactorEnabled())
                <p>Add a second step to your sign-in with an authenticator app.</p>
                <form method="POST" action="{{ route($routePrefix.'.two-factor.enable') }}">
                    @csrf
                    <button class="btn sm-btn-primary" type="submit">Enable two-factor authentication</button>
                </form>
            @endif

            @if ($recoveryCodes)
                <h3 class="h6">Recovery Codes</h3>
                <p>Store these somewhere safe. Each one works once if you lose your authenticator.</p>
                <ul class="list-unstyled row row-cols-2 g-1 sm-recovery-codes">
                    @foreach ($recoveryCodes as $code)
                        <li class="col"><code>{{ $code }}</code></li>
                    @endforeach
                </ul>
            @endif

            @if ($user->hasTwoFactorEnabled())
                <form method="POST" action="{{ route($routePrefix.'.two-factor.recovery-codes') }}" class="mb-3">
                    @csrf
                    <button class="btn btn-outline-secondary" type="submit">Generate new recovery codes</button>
                </form>
            @endif

            @if ($user->two_factor_secret !== null)
                <form method="POST" action="{{ route($routePrefix.'.two-factor.disable') }}">
                    @csrf
                    @method('DELETE')
                    <label class="form-label" for="two-factor-password">Current password</label>
                    <div class="input-group sm-otp-group">
                        <input id="two-factor-password" name="current_password" type="password" autocomplete="current-password" @class(['form-control', 'is-invalid' => $errors->disableTwoFactor->has('current_password')]) @error('current_password', 'disableTwoFactor') aria-describedby="two-factor-password-error" @enderror>
                        <button class="btn btn-outline-danger" type="submit">Disable</button>
                        @error('current_password', 'disableTwoFactor')
                            <div id="two-factor-password-error" class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </form>
            @endif
        </div>
    </section>

    <section id="sessions" class="card" aria-labelledby="sessions-heading">
        <div class="card-body">
            <h2 id="sessions-heading" class="h5">Active Browser Sessions</h2>

            @if ($browserSessions->isEmpty())
                <p>No active sessions are recorded.</p>
            @else
                <ul class="list-unstyled">
                    @foreach ($browserSessions as $session)
                        <li class="d-flex align-items-center gap-3 mb-3">
                            <i class="bi {{ $session['is_desktop'] ? 'bi-laptop' : 'bi-phone' }} fs-3" aria-hidden="true"></i>
                            <div>
                                <div>{{ $session['platform'] }} — {{ $session['browser'] }}</div>
                                <div class="small text-body-secondary">
                                    {{ $session['ip_address'] }} ·
                                    @if ($session['is_current_device'])
                                        <span class="badge text-bg-success">This device</span>
                                    @else
                                        Last active {{ $session['last_active'] }}
                                    @endif
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @endif

            <form method="POST" action="{{ route($routePrefix.'.sessions.destroy') }}">
                @csrf
                @method('DELETE')
                <label class="form-label" for="sessions-password">Current password</label>
                <div class="input-group">
                    <input id="sessions-password" name="current_password" type="password" autocomplete="current-password" @class(['form-control', 'is-invalid' => $errors->logoutSessions->has('current_password')]) @error('current_password', 'logoutSessions') aria-describedby="sessions-password-error" @enderror>
                    <button class="btn btn-outline-danger" type="submit">Log Out Other Browser Sessions</button>
                    @error('current_password', 'logoutSessions')
                        <div id="sessions-password-error" class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </form>
        </div>
    </section>

    @if ($apiTokens !== null)
        <section id="tokens" class="card" aria-labelledby="tokens-heading">
            <div class="card-body">
                <h2 id="tokens-heading" class="h5">API Tokens</h2>

                @if (session('plainTextToken'))
                    <div class="alert alert-warning" role="status">
                        Copy this token now. It will not be shown again.
                        <code class="d-block mt-2 text-break">{{ session('plainTextToken') }}</code>
                    </div>
                @endif

                <form method="POST" action="{{ route($routePrefix.'.tokens.store') }}" class="mb-4">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label" for="token-name">Token name</label>
                        <input id="token-name" name="name" type="text" value="{{ old('name') }}" maxlength="100" required @class(['form-control', 'is-invalid' => $errors->has('name')])>
                    </div>

                    <fieldset class="mb-3">
                        <legend class="form-label fs-6">Permissions</legend>
                        @foreach ($tokenAbilities as $ability)
                            <div class="form-check form-check-inline">
                                <input id="token-ability-{{ $loop->index }}" name="abilities[]" class="form-check-input" type="checkbox" value="{{ $ability }}">
                                <label class="form-check-label" for="token-ability-{{ $loop->index }}">{{ $ability }}</label>
                            </div>
                        @endforeach
                        @error('abilities')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </fieldset>

                    <button class="btn sm-btn-primary" type="submit">Create token</button>
                </form>

                @if ($apiTokens->isNotEmpty())
                    <div class="table-responsive">
                        <table class="table align-middle mb-0">
                            <thead>
                                <tr><th scope="col">Name</th><th scope="col">Permissions</th><th scope="col"><span class="visually-hidden">Actions</span></th></tr>
                            </thead>
                            <tbody>
                                @foreach ($apiTokens as $token)
                                    <tr>
                                        <td>{{ $token->name }}</td>
                                        <td>
                                            <form id="token-update-{{ $token->id }}" method="POST" action="{{ route($routePrefix.'.tokens.update', $token->id) }}">
                                                @csrf
                                                @method('PUT')
                                                @foreach ($tokenAbilities as $ability)
                                                    <div class="form-check form-check-inline">
                                                        <input id="token-{{ $token->id }}-{{ $loop->index }}" name="abilities[]" class="form-check-input" type="checkbox" value="{{ $ability }}" @checked(in_array($ability, $token->abilities, true))>
                                                        <label class="form-check-label" for="token-{{ $token->id }}-{{ $loop->index }}">{{ $ability }}</label>
                                                    </div>
                                                @endforeach
                                            </form>
                                        </td>
                                        <td class="text-end text-nowrap">
                                            <button class="btn btn-sm btn-outline-secondary" type="submit" form="token-update-{{ $token->id }}">Update</button>
                                            <form method="POST" action="{{ route($routePrefix.'.tokens.destroy', $token->id) }}" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button class="btn btn-sm btn-outline-danger" type="submit">Revoke</button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </section>
    @endif
</div>