@extends('layouts.member')
@section('title', 'Account settings')
@section('content')
<div class="mx-auto max-w-xl space-y-8">
    <h1 class="text-3xl">Account settings</h1>

    <section class="card" aria-labelledby="uname">
        <h2 id="uname" class="text-xl">Username</h2>
        <p class="hint">Your page: absurdities.ng/users/{{ $user->username }}</p>
        @if($nextChangeAt && $nextChangeAt->isFuture())
            <p class="mt-3 text-sm font-semibold">You can change your username again on {{ $nextChangeAt->timezone('Africa/Lagos')->format('j F Y') }}.</p>
        @else
            <form class="mt-4 space-y-3" method="post" action="{{ route('settings.username') }}" data-ajax data-reload novalidate>
                @csrf
                <x-form-error/>
                <x-field name="username" label="New username" required maxlength="30" autocapitalize="off"
                         data-username-check="{{ route('username.check') }}" data-username-status="username-status"
                         hint="You can change it once every {{ $cooldownDays }} days. The old address redirects for 90 days."/>
                <p id="username-status" class="hint" aria-live="polite"></p>
                <button class="btn-dark" type="submit">Change username</button>
            </form>
        @endif
    </section>

    <section class="card" aria-labelledby="sec">
        <h2 id="sec" class="text-xl">Two-factor authentication</h2>
        <p class="hint">{{ $user->two_factor_enabled ? 'On. Your account asks for a code at sign-in.' : 'Off. Turn it on to protect your account.' }}</p>
        <a class="btn-quiet mt-3" href="{{ route('two-factor.show') }}">{{ $user->two_factor_enabled ? 'Manage' : 'Set up' }}</a>
    </section>
</div>
@endsection