<template name="_loginButtonsLoggedOutSingleLoginButton">
  <div class="login-text-and-button">
    <div class="login-button single-login-button {{#unless configured}}configure-button{{/unless}}"
         id="login-buttons-{{name}}">
      <div class="login-image" id="login-buttons-image-{{name}}"></div>
      {{#if configured}}
        <span class="text-besides-image sign-in-text-{{name}}">Sign in with {{capitalizedName}}</span>
      {{else}}
        <span class="text-besides-image configure-text-{{name}}">Configure {{capitalizedName}} Login</span>
      {{/if}}
    </div>
  </div>
</template>

<template name="_loginButtonsLoggingInSingleLoginButton">
  <div class="login-text-and-button">
    {{> _loginButtonsLoggingIn}}
  </div>
</template>

<template name="_loginButtonsLoggedInSingleLogoutButton">
  <div class="login-text-and-button">
    <div class="login-display-name">
      {{displayName}}
    </div>
    <div class="login-button single-login-button" id="login-buttons-logout">Sign Out</div>
  </div>
</template>

