<!DOCTYPE html>
<html lang="en">

<head>
    <%- include('./components/head'); %>
    <link rel="stylesheet" href="/static/css/custom.css">
</head>

<body>
    <div class="min-vh-100">

        <%- include('./components/navbar'); %>

        <div class="container pt-lg-3 pb-4">
            <div class="d-md-flex align-items-start">
                <div id="settings-menu-tablist" class="nav flex-column flex-sm-row flex-md-column nav-pills nav-fill mb-4 mb-md-0 me-4" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <button class="nav-link text-start active" id="v-pills-email-tab" data-bs-toggle="pill" data-bs-target="#v-pills-email" type="button" role="tab" aria-controls="v-pills-email" aria-selected="true">Email</button>
                    <button class="nav-link text-start" id="v-pills-security-tab" data-bs-toggle="pill" data-bs-target="#v-pills-security" type="button" role="tab" aria-controls="v-pills-security" aria-selected="false">Security</button>
                    <button class="nav-link text-start" id="v-pills-payments-tab" data-bs-toggle="pill" data-bs-target="#v-pills-payments" type="button" role="tab" aria-controls="v-pills-payments" aria-selected="false" disabled>Payments</button>
                    <button class="nav-link text-start" id="v-pills-privacy-tab" data-bs-toggle="pill" data-bs-target="#v-pills-privacy" type="button" role="tab" aria-controls="v-pills-privacy" aria-selected="false">Privacy</button>
                </div>
                <div class="tab-content col-12 col-md-8 col-lg-6" id="v-pills-tabContent">
                    <% if (messages.error) { %>
                        <div class="alert alert-danger alert-dismissible fade show m-0 text-start mb-3" role="alert">
                            <%= messages.error %>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Reject"></button>
                        </div>
                    <% } %>
                    <div class="tab-pane fade show active" id="v-pills-email" role="tabpanel" aria-labelledby="v-pills-email-tab" tabindex="0">
                        <h2 class="fs-4">Email settings</h2>
                        <h3 class="fs-5">Current email</h3>
                        <div class="mb-3">
                            <input type="email" class="form-control" id="readonlyEmail" value="<%= userEmail %>" readonly>
                        </div>
                        <h3 class="fs-5">Change email</h3>
                        <form action="/account/update/email" method="POST">
                            <div class="mb-3">
                                <label for="newEmailRepeatInput" class="form-label">New email address</label>
                                <input type="email" class="form-control" id="newEmailRepeatInput" name="newEmail" required>
                            </div>
                            <div class="mb-3">
                                <label for="confirmNewEmailInput" class="form-label">Repeat new email address</label>
                                <input type="email" class="form-control" id="confirmNewEmailInput" name="newEmailRepeat" required>
                            </div>
                            <!-- <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="newsletterCheck">
                                <label class="form-check-label" for="newsletterCheck" aria-describedby="newsletterHelp">I would like to receive occasional emails about new features, offerings.</label>
                                <div id="newsletterHelp" class="form-text">You can always unsubscribe later.</div>
                            </div> -->
                            <div class="mb-3">
                                <label for="passwordInput" class="form-label">Current password</label>
                                <input type="password" class="form-control" id="passwordInput" name="currentPassword" required>
                            </div>
                            <button type="submit" class="btn btn-dark">Save</button>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="v-pills-security" role="tabpanel" aria-labelledby="v-pills-security-tab" tabindex="0">
                        <h2 class="fs-4">Security settings</h2>
                        <h3 class="fs-5">Change password</h3>
                        <form action="/account/update/password" method="POST">
                            <div class="mb-3">
                                <label for="inputCurrentPassword" class="form-label">Current password</label>
                                <input type="password" class="form-control" id="inputCurrentPassword" name="currentPassword">
                            </div>
                            <div class="mb-3">
                                <label for="inputNewPassword" class="form-label">New password</label>
                                <input type="password" class="form-control" id="inputNewPassword" name="newPassword">
                            </div>
                            <div class="mb-3">
                                <label for="inputConfirmNewPassword" class="form-label">Confirm new password</label>
                                <input type="password" class="form-control" id="inputConfirmNewPassword" name="newPasswordRepeat">
                            </div>
                            <button type="submit" class="btn btn-dark">Save</button>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="v-pills-payments" role="tabpanel" aria-labelledby="v-pills-payments-tab" tabindex="0">
                        <h2 class="fs-4">Payments settings</h2>
                    </div>
                    <div class="tab-pane fade" id="v-pills-privacy" role="tabpanel" aria-labelledby="v-pills-privacy-tab" tabindex="0">
                        <h2 class="fs-4">Privacy settings</h2>
                        <div class="p-2 rounded border border-danger bg-danger bg-opacity-10">
                            <h3 class="fs-5 text-danger">Delete account</h3>
                            <p class="text-danger mb-2">Account deletion is instant and permanent.</p>
                            <button id="delete-account-button" type="button" class="btn btn-danger">Delete my account now</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <%- include('./components/footer'); %>

    <script>
        const deleteAccountButton = document.getElementById('delete-account-button');
        deleteAccountButton.addEventListener('click', async () => {
            await fetch('/account', {
                method: 'DELETE'
            });
            await logOut();
        });
    </script>

    <%- include('./components/foot'); %>
</body>

</html>