@import com.gu.googleauth.UserIdentity
@import com.gu.janus.model.JanusData
@import logic.UserAccess.username
@import play.api.Mode
@(user: UserIdentity, janusData: JanusData)(implicit request: RequestHeader, mode: Mode, assetsFinder: AssetsFinder)
@import play.filters.csrf.CSRF

@main("User account", Some(user), janusData) {

    <div class="container">
        <h1 class="header orange-text">Account</h1>

        <div class="row">
            <div class="col s12 m12 l9">    
                <div class="card-panel">          
                    <p>You can have up to two passkeys to log in to Janus. One should be on-device (e.g. Touch ID) and the other off-device (e.g. security key or authenticator app).
                    </p>
                    <div><button id="register-passkey" class="btn" csrf-token="@{CSRF.getToken.get.value}">Register a new passkey</button></div>
                </div>
            </div>
            <div class="col s12 m12 l3">
                <div class="card-panel">
                        <p>You are logged in as @username(user).</p><div><a href="/logout"><button class="btn">Log out</button></a></div>
                </div>  
            </div>
        </div>               
    </div>

}