<template name="changePassword">
  <div id="changePassword" class="page entryPage" style="{{getOpacityWithCorner}}">
    <div class="content-scrollable">
      <div class="wrapper-auth">
        <div class="entryLogo" style="background-image: url('{{getLogoUrl}}')"></div>

        <h1 id="changePasswordPageTitle" class="title-auth">Change Password</h1>
        <div id="changePasswordPageMessage" class="subtitle-auth" style="{{getChangePasswordMessageColor}}">{{getChangePasswordMessage}}</div>

        <form>
            {{#if changePasswordErrorMessages}}
                <div id="errorMessages" class="list-errors">
                    {{#each changePasswordErrorMessages}}
                        <div class="alert alert-danger list-item">{{this}}</div>
                    {{/each}}
                </div>
            {{/if}}

          <div class="input-symbol">
            <input id="changePasswordPageOldPasswordInput" type="password" name="oldPassword" placeholder="Old Password" style="{{getPasswordStyling}}" />
            <span class="fa fa-lock" title="Password"></span>
          </div>
          <br>
          <br>

          <div class="input-symbol">
            <input id="changePasswordPagePasswordInput" type="password" name="password" placeholder="Password" style="{{getPasswordStyling}}" />
            <span class="fa fa-lock" title="Password"></span>
          </div>
          <br>
          <br>

          <div class="input-symbol">
            <input id="changePasswordPagePasswordConfirmInput" type="password" name="confirm" placeholder="Confirm Password" style="{{getConfirmPasswordStyling}}" />
            <span class="fa fa-lock" title="Confirm Password"></span>
          </div>

          <br><br>

          <button id="changePasswordButton" type="submit" class="btn-gray btn-main btn-large" style="{{getButtonColor}}">Change Password</button>
          <br><br>

        </form>
      </div>

    </div>
  </div>
</template>
