{% extends "base.html" %}
{% load i18n static socialprofile_tags %}

{% block page_role %}id="sp-login-modal" data-role="dialog"{% endblock %}

{% block content %}
	<h1>{% trans 'Sign In' %}</h1>
    <div class="buttons">
		{% if user.is_authenticated %}
			<div class="user-details">
			  {% trans 'You are logged in as' %} <code>{{ user.username }}</code>!
			</div>

			<div class="user-details">
				<a class="btn btn-primary" href="{% url 'sp_logout_page' %}" id="logout"><i class="fa fa-sign-out"></i>{% trans 'Logout' %}</a>
			</div>
		{% endif %}

		<div class="user-details">
		{% if available_backends %}
			{% for sublist in available_backends|social_backends %}
			  <div class="row">
				{% for name, backend in sublist %}
				  {% associated backend %}
				  {% if association %}
				  	<ul>
					{% if user.social_auth.all.count == 1 %}
						{% with only_connection=user.social_auth.all|first %}
							<p style="margin-left:20px;"><em>{{ only_connection.provider|social_provider_name }}
								{% trans "is your only means of authentication, it cannot be removed." %}</em></p>
						{% endwith %}
						<li><a href="{% url 'sp_select_page' %}" data-theme="a" data-rel="dialog"
							   data-role="button">{% trans "Add Social Connection" %}</a></li>
					{% else %}
							{% for user_social_auth in user.social_auth.all %}
								<form method="post" action="{% url 'social:disconnect' user_social_auth.provider %}" class="d-inline sp_disconnectForm">
								  {% csrf_token %}
								  <button type="submit" data-role="button">{% trans "Disconnect" %} {{ user_social_auth.provider|social_provider_name }}</button>
								</form>
							{% endfor %}
							<li><a href="{% url 'sp_select_page' %}" data-theme="a" data-rel="dialog"
								   data-role="button">{% trans "Add Social Connection" %}</a></li>
					{% endif %}
					</ul>
					{% else %}
					  {% include "socialprofile/includes/social_begin_form.html" with name=name backend=backend button_class="col-md-2 btn btn-default" next_url=next_url next_param=next_param only %}
				  {% endif %}
				{% endfor %}
			  </div>
			{% endfor %}
			</div>
		{% else %}
			<p>
				{% trans "Third-party identity providers enable you to rely on a trusted external service to authenticate your identity!" %}
				</br>
				{% trans "We will never know and store your password anywhere!" %}
			</p>
			<p>
				<form method="post" action="{% url 'social:begin' 'facebook' %}" class="sp_socialForm d-inline">{% csrf_token %}{% if next_url and next_param %}<input type="hidden" name="{{ next_param }}" value="{{ next_url }}">{% endif %}<button type="submit" class="btn btn-danger" title="{% trans 'Sign In with'%} Facebook"><img src="{% static 'images/social-icon/social-icon1.png' %}" alt="social media" /></button></form>
				<form method="post" action="{% url 'social:begin' 'twitter' %}" class="sp_socialForm d-inline">{% csrf_token %}{% if next_url and next_param %}<input type="hidden" name="{{ next_param }}" value="{{ next_url }}">{% endif %}<button type="submit" class="btn btn-danger" title="{% trans 'Sign In with'%} Twitter"><img src="{% static 'images/social-icon/social-icon2.png' %}" alt="social media" /></button></form>
				<form method="post" action="{% url 'social:begin' 'google-oauth2' %}" class="sp_socialForm d-inline">{% csrf_token %}{% if next_url and next_param %}<input type="hidden" name="{{ next_param }}" value="{{ next_url }}">{% endif %}<button type="submit" class="btn btn-danger" title="{% trans 'Sign In with'%} Google"><img src="{% static 'images/social-icon/social-icon3.png' %}" alt="social media" /></button></form>
				<form method="post" action="{% url 'social:begin' 'vimeo' %}" class="sp_socialForm d-inline">{% csrf_token %}{% if next_url and next_param %}<input type="hidden" name="{{ next_param }}" value="{{ next_url }}">{% endif %}<button type="submit" class="btn btn-danger" title="{% trans 'Sign In with'%} Vimeo"><img src="{% static 'images/social-icon/social-icon5.png' %}" alt="social media" /></button></form>
				<form method="post" action="{% url 'social:begin' 'instagram' %}" class="sp_socialForm d-inline">{% csrf_token %}{% if next_url and next_param %}<input type="hidden" name="{{ next_param }}" value="{{ next_url }}">{% endif %}<button type="submit" class="btn btn-danger" title="{% trans 'Sign In with'%} Instagram"><img src="{% static 'images/social-icon/social-icon6.png' %}" alt="social media" /></button></form>
				<form method="post" action="{% url 'social:begin' 'flickr' %}" class="sp_socialForm d-inline">{% csrf_token %}{% if next_url and next_param %}<input type="hidden" name="{{ next_param }}" value="{{ next_url }}">{% endif %}<button type="submit" class="btn btn-danger" title="{% trans 'Sign In with'%} Flickr"><img src="{% static 'images/social-icon/social-icon7.png' %}" alt="social media" /></button></form>
			</p>
		{% endif %}
    </div>
{% endblock %}


{% block javascript %}
	<script src="{% static 'static/js/select.js'%}" type="text/javascript"></script>
    <script type="text/javascript">
        {% if validation_sent %}
          $validationModal.modal('show');
        {% endif %}

        {% if email_required %}
          $emailRequired.modal('show');
        {% endif %}
      });
    </script>
{% endblock %}