<template name="loginButtons">
  <div id="login-buttons" class="login-buttons-dropdown-align-{{align}}">
    {{#if currentUser}}
      {{#if loggingIn}}
        {{! We aren't actually logged in yet; we're just setting Meteor.userId
            optimistically during an at-startup login-with-token. We expose this
            state so other UIs can treat it specially, but we'll just treat it
            as logged out. }}
        {{#if dropdown}}
          {{> _loginButtonsLoggingIn }}
        {{else}}
          <div class="login-buttons-with-only-one-button">
            {{> _loginButtonsLoggingInSingleLoginButton }}
          </div>
        {{/if}}
      {{else}}
        {{> _loginButtonsLoggedIn}}
      {{/if}}
    {{else}}
      {{> _loginButtonsLoggedOut}}
    {{/if}}
  </div>
</template>

<template name="_loginButtonsLoggedIn">
  {{#if dropdown}}
    {{> _loginButtonsLoggedInDropdown}}
  {{else}}
    <div class="login-buttons-with-only-one-button">
      {{> _loginButtonsLoggedInSingleLogoutButton}}
    </div>
  {{/if}}
</template>

<template name="_loginButtonsLoggedOut">
  {{#if services}} {{! if at least one service is configured }}
    {{#if configurationLoaded}}
      {{#if dropdown}} {{! if more than one service configured, or password is configured}}
        {{> _loginButtonsLoggedOutDropdown}}
      {{else}}
        {{#with singleService}} {{! at this point there must be only one configured services }}
          <div class="login-buttons-with-only-one-button">
            {{#if loggingIn}}
              {{> _loginButtonsLoggingInSingleLoginButton}}
            {{else}}
              {{> _loginButtonsLoggedOutSingleLoginButton}}
            {{/if}}
          </div>
        {{/with}}
      {{/if}}
    {{/if}}
  {{else}}
    <div class="no-services">No login services configured</div>
  {{/if}}
</template>

<!-- used in various places to display messages to user -->
<template name="_loginButtonsMessages">
  {{#if errorMessage}}
    <div class="message error-message">{{errorMessage}}</div>
  {{/if}}
  {{#if infoMessage}}
    <div class="message info-message">{{infoMessage}}</div>
  {{/if}}
</template>

<template name="_loginButtonsLoggingIn">
  {{> _loginButtonsLoggingInPadding}}
  <div class="loading">&nbsp;</div>
  {{> _loginButtonsLoggingInPadding}}
</template>

<template name="_loginButtonsLoggingInPadding">
  {{#unless dropdown}}
    {{! invisible div used for correct height of surrounding div. this ensures
        that the _loginButtons template is always the same height
        and the rest of the page doesn't move up and down }}
    <div class="login-buttons-padding">
      <div class="login-button single-login-button" style="visibility: hidden;" id="login-buttons-logout">&nbsp;</div>
    </div>
  {{else}}
    {{! just add some padding }}
    <div class="login-buttons-padding"></div>
  {{/unless}}
</template>