{{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>
    <h1>Account Settings ({{.Account.Username}})</h1>

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

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

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

            <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">
            <h3 class="mfa-device-name">{{.Name}}</h3>
            <p class="mfa-device-date">{{.CreatedAt}}</p>
        </div>
        {{end}}
        {{else}}
        <p>You have no MFA devices.</p>
        {{end}}

        <a class="create-btn" id="add-mfa-device">Add MFA Device</a>
    </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 be prompted to confirm this decision.
        </p>
        <button class="delete" id="delete">Delete Account</button>
    </div>

</main>

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