@extends('layouts.app')
@section('title', 'Change password')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('profile.edit') }}">Profile</a></li>
    <li class="breadcrumb-item active" aria-current="page">Password</li>
@endsection

@section('content')
    <x-layout.page-header title="Change password" subtitle="Choose a strong password. All other sessions will be signed out." icon="shield-lock" />

    <x-layout.tabs :items="[
        ['label' => 'Profile',        'href' => route('profile.edit'),           'icon' => 'person'],
        ['label' => 'Password',       'href' => route('profile.password.edit'),  'icon' => 'shield-lock', 'active' => true],
        ['label' => 'Login history',  'href' => route('profile.login-history'),  'icon' => 'clock-history'],
    ]" />

    <div class="row g-3">
        <div class="col-lg-8">
            <x-ui.card title="Update password" icon="key">
                <form method="POST" action="{{ route('profile.password.update') }}" class="settings-form">
                    @csrf
                    @method('PUT')

                    <x-form.password
                        name="current_password"
                        label="Current password"
                        autocomplete="current-password"
                        :required="true"
                        :show-toggle="true"
                    />

                    <x-form.password
                        name="password"
                        label="New password"
                        autocomplete="new-password"
                        :required="true"
                        :show-strength="true"
                        :help="'Minimum ' . config('decent.security.password_min', 8) . ' characters. Mix upper, lower, number and symbol.'"
                    />

                    <x-form.password
                        name="password_confirmation"
                        label="Confirm new password"
                        autocomplete="new-password"
                        :required="true"
                        :show-toggle="true"
                    />

                    <div class="d-flex justify-content-end mt-3">
                        <x-ui.button type="submit" variant="primary" icon="check-lg">
                            Update password
                        </x-ui.button>
                    </div>
                </form>
            </x-ui.card>
        </div>

        <div class="col-lg-4">
            <x-ui.card title="Security tips" icon="info-circle">
                <ul class="security-tips">
                    <li>Use a passphrase with 4+ unrelated words.</li>
                    <li>Never share your password over email or chat.</li>
                    <li>Enable device biometric locks on shared machines.</li>
                    <li>Report suspicious sign-ins from your login history.</li>
                </ul>
            </x-ui.card>
        </div>
    </div>
@endsection