<template name="avatarSuggestion">
	{{#if .}}
		<div class="avatar-suggestion-item border-component-color">
			<div class="avatar tertiary-background-color" style="background-image: url({{blob}});">
			</div>
			<div class="action">
				<button type="button" class="button primary {{service}} select-service">{{_ "Use_service_avatar" service}}</button>
			</div>
		</div>
	{{/if}}
</template>

<template name="avatarSuggestionLogin">
	{{#if .}}
		<div class="avatar-suggestion-item border-component-color">
			<div class="avatar question-mark icon-user tertiary-background-color"></div>
			<div class="action">
				<button type="button" class="button primary {{.}} login-with-service">{{_ "Login_with" .}}</button>
			</div>
		</div>
	{{/if}}
</template>

<template name="avatarPrompt">
	<section class="page-container page-home page-static content-background-color">
		{{> header sectionName="Select_an_avatar"}}
		<div class="content">
			<div class="avatarPrompt">
				<header class="content-background-color border-component-color">
					<p>{{_ "Select_service_to_login"}}</p>
				</header>
				<div>
					<div class="avatar-suggestions">
						<div class="avatar-suggestion-item border-component-color">
							{{> avatar username=initialsUsername }}
							{{#with service='initials'}}
								<div class="action">
									<button type="button" class="button primary select-service">{{_ "Use_initials_avatar" }}</button>
								</div>
							{{/with}}
						</div>
						<div class="avatar-suggestion-item border-component-color">
							<div style="background-image: url({{upload.blob}});" class="avatar tertiary-background-color {{#unless upload}}question-mark icon-upload{{/unless}}">
							</div>
							<div class="action">
								<div class="button primary">{{_ "Select_file"}}
									<input type="file" class="avatar-file-input" accept="image/*">
								</div>
								{{#with upload}}
									<button type="button" class="button primary select-service">{{_ "Use_uploaded_avatar"}}</button>
								{{/with}}
							</div>
						</div>
						<div class="avatar-suggestion-item border-component-color">
							{{#with service='url'}}
								<div class="avatar question-mark icon-upload tertiary-background-color"></div>
								<div class="action">
									<div class="input-line">
										<input type="text" name="avatarurl" id="avatarurl" />
										<button type="button" class="button primary select-service">{{_ "Use_url_for_avatar"}}</button>
									</div>
								</div>
							{{/with}}
						</div>

						{{#if suggestions.ready}}
							{{> avatarSuggestion suggestions.avatars.gravatar}}
							{{> avatarSuggestion suggestions.avatars.facebook}}
							{{> avatarSuggestion suggestions.avatars.google}}
							{{> avatarSuggestion suggestions.avatars.github}}
							{{> avatarSuggestion suggestions.avatars.gitlab}}
							{{> avatarSuggestion suggestions.avatars.linkedin}}
							{{> avatarSuggestion suggestions.avatars.twitter}}

							{{#if suggestAvatar 'facebook'}}
								{{> avatarSuggestionLogin 'facebook'}}
							{{/if}}
							{{#if suggestAvatar 'google'}}
								{{> avatarSuggestionLogin 'google'}}
							{{/if}}
							{{#if suggestAvatar 'github'}}
								{{> avatarSuggestionLogin 'github'}}
							{{/if}}
							{{#if suggestAvatar 'gitlab'}}
								{{> avatarSuggestionLogin 'gitlab'}}
							{{/if}}
							{{#if suggestAvatar 'linkedin'}}
								{{> avatarSuggestionLogin 'linkedin'}}
							{{/if}}
							{{#if suggestAvatar 'twitter'}}
								{{> avatarSuggestionLogin 'twitter'}}
							{{/if}}


						{{else}}
							{{_ "Loading_suggestion"}}
						{{/if}}
					</div>
				</div>

				{{#if username.ready}}
					<div class="submit">
						<button data-loading-text="{{_ "Please_wait"}}..." class='button primary login'><span>{{_ "Use_this_username"}}</span></button>
					</div>
				{{/if}}
			</div>
		</div>
	</section>
</template>
