{% 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 %}
								<a href="{% url 'social:disconnect' user_social_auth.provider %}"
								   data-role="button">{% trans "Disconnect" %} {{ user_social_auth.provider|social_provider_name }}</a>
							{% 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 %}
					{% if name == "google-plus" %}
					  <div class="col-md-2 btn btn-default" id="{{ name }}-button" name="{{ backend|backend_class }}">
						<i class="fa fa-{{ name|icon_name }}"></i>
						{% trans 'Continue with' %} {{ backend|backend_name }}
					  </div>
					{% else %}
					  <a class="col-md-2 btn btn-default" id="{{ name }}-button" name="{{ backend|backend_class }}"
						 href="{% url 'social:begin' backend=name %}{% if next_url and next_param %}?{{ next_param }}={{ next_url }}{% endif %}"
					  	 title="{% trans 'Connect with' %} {{ name|social_provider_name }}">
						<i class="fa fa-{{ name|icon_name }}"></i>
						{% trans 'Continue with' %} {{ backend|backend_name }}
					  </a>
					{% endif %}
				  {% 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>
				<a href="{% url 'social:begin' 'facebook' %}{% if next_url and next_param %}?{{ next_param }}={{ next_url }}{% endif %}"><button id="button-with-icon3-fa" class="btn btn-danger" title="{% trans 'Sign In with'%} Facebook"><img src="{% static 'images/social-icon/social-icon1.png' %}" alt="social media" /></button></a>
				<a href="{% url 'social:begin' 'twitter' %}{% if next_url and next_param %}?{{ next_param }}={{ next_url }}{% endif %}"><button id="button-with-icon3-fa" class="btn btn-danger" title="{% trans 'Sign In with'%} Twitter"><img src="{% static 'images/social-icon/social-icon2.png' %}" alt="social media" /></button></a>
				<a href="{% url 'social:begin' 'google-oauth2' %}{% if next_url and next_param %}?{{ next_param }}={{ next_url }}{% endif %}"><button id="button-with-icon3-fa" class="btn btn-danger" title="{% trans 'Sign In with'%} Google"><img src="{% static 'images/social-icon/social-icon3.png' %}" alt="social media" /></button></a>
				<a href="{% url 'social:begin' 'vimeo' %}{% if next_url and next_param %}?{{ next_param }}={{ next_url }}{% endif %}"><button id="button-with-icon3-fa" class="btn btn-danger" title="{% trans 'Sign In with'%} Vimeo"><img src="{% static 'images/social-icon/social-icon5.png' %}" alt="social media" /></button></a>
				<a href="{% url 'social:begin' 'instagram' %}{% if next_url and next_param %}?{{ next_param }}={{ next_url }}{% endif %}"><button id="button-with-icon3-fa" class="btn btn-danger" title="{% trans 'Sign In with'%} Instagram"><img src="{% static 'images/social-icon/social-icon6.png' %}" alt="social media" /></button></a>
				<a href="{% url 'social:begin' 'flickr' %}{% if next_url and next_param %}?{{ next_param }}={{ next_url }}{% endif %}"><button id="button-with-icon3-fa" class="btn btn-danger" title="{% trans 'Sign In with'%} Flickr"><img src="{% static 'images/social-icon/social-icon7.png' %}" alt="social media" /></button></a>
			</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 %}
