{% load socialaccount %}
{% load relay_tags %}

{% block content %}

<div class="user-area flx flx-row al-cntr">
	<firefox-apps></firefox-apps>
	{% if request.user.is_anonymous %}
    <a
      data-entrypoint="relay-sign-in-header"
      data-form_type="button"
      data-ga="send-ga-funnel-pings"
      data-event-category="Sign In Buttons"
      data-event-label="sign-in-btn-header"
      class="sign-in button btn-transparent"
      href="{% provider_login_url 'fxa' process='login' %}">Sign In</a>
	{% else %}
		{% get_social_accounts request.user as accounts %}
		<glocal-menu class="glocal-menu">
			<button class="avatar-wrapper" aria-label="Open Menu">
				<img class="avatar" src="{{ avatar }}" alt="Firefox Account Avatar" />
			</button>
			<div class="glocal-menu-wrapper">
				<div class="glocal-menu-header">
					<img class="glocal-small-avatar" alt="Firefox Account Avatar" src="{{ avatar }}" />
					<div class="glocal-account-info">
						<span class="glocal-fxa-email">{{ request.user.email }}</span>
            <a href="{{ settings.FXA_SETTINGS_URL }}" class="glocal-fxa-settings-link">Manage your Firefox Account</a>
					</div>
				</div>
				<div class="glocal-site-options">
					<form class="glocal-sign-out-form" method="post" action="{% url 'account_logout' %}">
						{% csrf_token %}
						{% if redirect_field_value %}
							<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
						{% endif %}
						<button class="glocal-sign-out glocal-site-option" type="submit">Sign Out of Relay</button>
					</form>
				</div>
			</div>
		</glocal-menu>
		<form method="post" action="{% url 'account_logout' %}" class="hidden">
			{% csrf_token %}
			{% if redirect_field_value %}
				<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
			{% endif %}
			<button class="sign-in button btn-transparent" type="submit">Sign Out</button>
		</form>
	{% endif %}
</div>

{% endblock %}