extends ./layout.pug

block title
  |Security - Account settings | Icy Network

block settings
  h1 Security
  if message.text
    if message.error
      .alert.alert-danger
        span #{message.text}
    else
      .alert.alert-success
        span #{message.text}
  .row
    .col
      h2 Change Password
      form(method="post", action="/account/security/password", autocomplete="off")
        div.form-container
          input#csrf(type="hidden", name="_csrf", value=csrf)
          label.form-label(for="password") Current Password
          input.form-control#password(type="password", name="password")
          label.form-label(for="new_password") New Password
          input.form-control#new_password(type="password", name="new_password", autocomplete="new-password")
          label.form-label(for="password_repeat") Repeat new password
          input.form-control#password_repeat(type="password", name="password_repeat")
          button.btn.btn-primary(type="submit") Change
    .col
      h2 Change Email Address
      form(method="post", action="/account/security/email", autocomplete="off")
        div.form-container
          input#csrf(type="hidden", name="_csrf", value=csrf)
          label.form-label(for="current_email") Current Email Address
          input.form-control#current_email(type="email", name="current_email")
          small.form-hint Hint: #{emailHint}
          label.form-label(for="email") New Email Address
          input.form-control#email(type="email", name="email")
          button.btn.btn-primary(type="submit") Change
  h2 Two-factor authentication
  .d-flex.flex-column.align-items-start
    if twofactor
      p Two-factor authentication is enabled.
      a.btn.btn-primary(href="/account/two-factor/disable") Disable
    else
      p You can enable two-factor authentication using an authenticator app of your choice, such as 
        b Google Authenticator
        |  or 
        b andOTP
        |.
      a.btn.btn-primary(href="/account/two-factor/activate") Activate