@js(js/account/account.js)

@extends(templates/layout_normal)

@section(main)
    <h2>Account</h2>
    <div class="box compactBox">
        <form id="accountForm" action="<?= Container::$routeCollection->getRoute('account-action')->generateLink() ?>" method="post" data-reload-on-success="true" data-observe-inputs="email,username,password_new,password_new_confirm,nickname,phone,id_number">
            <?php if ($user['password'] !== null && $user['google_sub'] !== null): ?>
                <p class="justify small">Please confirm your identity with your password or with Google to modify your account.</p>
                <div class="inputWithButton">
                    <input type="password" class="text" name="password" autocomplete="current-password" required minlength="6" autofocus><!--
                 --><button id="authenticateWithGoogleButton" class="yellow" type="button">Google</button>
                </div>
            <?php elseif ($user['password'] !== null): ?>
                <p class="justify small">Please confirm your identity with your password to modify your account.</p>
                <input type="password" class="text big fullWidth" name="password" autocomplete="current-password" required minlength="6" autofocus>
            <?php elseif ($user['google_sub'] !== null): ?>
                <p class="justify small">Please confirm your identity with Google to modify your account.</p>
                <div class="inputWithButton">
                    <input type="text" class="text" name="password" placeholder="Authenticate with Google..." disabled><!--
                 --><button id="authenticateWithGoogleButton" class="yellow" type="button">Google</button>
                </div>
            <?php endif; ?>
            <hr>
            <p class="formLabel">Email address</p>
            <input type="email" class="text big fullWidth" name="email" autocomplete="username" value="<?= $user['email'] ?>">
            <p class="formLabel marginTop">Username</p>
            <input type="text" class="text big fullWidth" name="username" value="<?= $user['username'] ?>">
            <p class="formLabel marginTop">New password</p>
            <input type="password" class="text big fullWidth" name="password_new" autocomplete="new-password" minlength="6">
            <p class="formLabel marginTop">New password confirmation</p>
            <input type="password" class="text big fullWidth" name="password_new_confirm" autocomplete="new-password" minlength="6">
            <hr>
            <p class="formLabel marginTop">Full name</p>
            <input type="text" class="text big fullWidth" name="full_name" value="<?= $user['full_name'] ?>" disabled>
            <p class="formLabel marginTop marginTop">Nickname</p>
            <input type="text" class="text big fullWidth" name="nickname" value="<?= $user['nickname'] ?>">
            <p class="formLabel marginTop marginTop">Phone</p>
            <input type="text" class="text big fullWidth" name="phone" value="<?= $user['phone'] ?>">
            <p class="formLabel marginTop marginTop">ID number</p>
            <input type="text" class="text big fullWidth" name="id_number" value="<?= $user['id_number'] ?>">
            <p id="accountFormError" class="formError justify marginTop"></p>
            <div class="right marginTop">
                <button type="submit" name="submit_button" disabled>Save</button>
            </div>
        </form>
    </div>
@endsection

@section(pageScript)
<script>
    var googleAuthenticateUrl = '<?= Container::$routeCollection->getRoute('account.googleAuthenticate')->generateLink() ?>';
</script>
@endsection