<template name="entrySignIn">
  <div id="entrySignIn" class="page entryPage" style="{{getOpacityWithCorner}}">

    <div class="content-scrollable">
      <div class="wrapper-auth">
        {{#if logoIsDisplayed}}
          <div id="entryAppLogo" class="entryLogo" style="background-image: url('{{logoUrl}}')"></div>
        {{/if}}

        {{#if isLoggedIn}}
          <h1 id="signInPageTitle" class="title-auth">{{fullName}}</h1>
          <div id="signInPageMessage" class="subtitle-auth">You are currently signed in.</div>

          <button id="logoutButton" class="btn-primary btn-main btn-large" style="{{getButtonColor}}">Logout</button>
        {{else}}
          <h1 id="signInPageTitle" class="title-auth">Sign In.</h1>
          <p id="signInPageMessage" class="subtitle-auth" style="{{getSignInMessageColor}}">{{{getSignInMessage}}}</p>

          <form>
            <div class="input-symbol">
              <input id="signInPageEmailInput" type="text" name="email" placeholder="Your Email" style="{{getEmailValidationStyling}}" />
              <i class="fa fa-envelope-o" title="Your Email"></i>
            </div>
            <br><br>

            <div class="input-symbol">
              <input id="signInPagePasswordInput" type="password" name="password" placeholder="Password" style={{getPasswordValidationStyling}} />
              <span class="fa fa-lock" title="Password"></span>
            </div>
          </form>

          <br><br>
          <button id="signInToAppButton" class="btn-primary btn-main btn-large disabledButton" disabled style="{{getButtonColor}}">{{getButtonText}}</button>

          <br><br>
          <button id="needAnAccountButton" class="btn-gray btn-main btn-large">Need an account?</button>

          <br><br>
          <button id="forgotPasswordButton" class="btn-gray btn-main btn-large">Forgot password?</button>

        {{/if}}
      </div>

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