{{define "head"}}
<title>Account Settings - ari melody 💫</title>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/admin/static/edit-account.css">
{{end}}

{{define "content"}}
<main>
    {{if .Session.Message.Valid}}
    <p id="message">{{html .Session.Message.String}}</p>
    {{end}}
    {{if .Session.Error.Valid}}
    <p id="error">{{html .Session.Error.String}}</p>
    {{end}}
    <h1>Account Settings ({{.Session.Account.Username}})</h1>

    <div class="card-title">
        <h2>Change Password</h2>
    </div>
    <div class="card">
        <form action="/admin/account/password" method="POST" id="change-password">
            <label for="current-password">Current Password</label>
            <input type="password" id="current-password" name="current-password" value="" autocomplete="current-password" required>

            <label for="new-password">New Password</label>
            <input type="password" id="new-password" name="new-password" value="" autocomplete="new-password" required>

            <label for="confirm-password">Confirm Password</label>
            <input type="password" id="confirm-password" value="" autocomplete="new-password" required>

            <button type="submit" class="save">Change Password</button>
        </form>
    </div>
        
    <div class="card-title">
        <h2>MFA Devices</h2>
    </div>
    <div class="card mfa-devices">
        {{if .TOTPs}}
        {{range .TOTPs}}
        <div class="mfa-device">
            <div>
                <p class="mfa-device-name">{{.Name}}</p>
                <p class="mfa-device-date">Added: {{.CreatedAt}}</p>
            </div>
            <div>
                <a class="delete">Delete</a>
            </div>
        </div>
        {{end}}
        {{else}}
        <p>You have no MFA devices.</p>
        {{end}}

        <button type="submit" class="new" id="add-mfa-device">Add MFA Device</button>
    </div>

    <div class="card-title">
        <h2>Danger Zone</h2>
    </div>
    <div class="card danger">
        <p>
        Clicking the button below will delete your account.
        This action is <strong>irreversible</strong>.
        You will need to enter your password and TOTP below.
        </p>
        <form action="/admin/account/delete" method="POST">
            <label for="password">Password</label>
            <input type="password" name="password" value="" autocomplete="current-password" required>

            <label for="totp">TOTP</label>
            <input type="text" name="totp" value="" autocomplete="one-time-code" required>

            <button type="submit" class="delete">Delete Account</button>
        </form>
    </div>

</main>

<script type="module" src="/admin/static/edit-account.js" defer></script>
{{end}}