{% extends "base.html" %}
{% load i18n staticfiles 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">
			  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 %}
					<form class="disconnect-form col-md-2" id="{{ name }}-disconnect" action="{% url 'social:disconnect_individual' backend=association.provider association_id=association.id %}" method="post">{% csrf_token %}
					  <a class="btn btn-danger" name="{{ backend|backend_class }}" href="">
						<i class="fa fa-{{ name|icon_name }}"></i>
						Disconnect {{ backend|backend_name }}
					  </a>
					</form>
				  {% 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>
						{{ 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 %}">
						<i class="fa fa-{{ name|icon_name }}"></i>
						{{ backend|backend_name }}
					  </a>
					{% endif %}
				  {% endif %}
				{% endfor %}
			  </div>
			{% endfor %}
			</div>
		{% else %}
			<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="ui-button-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="ui-button-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="ui-button-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="ui-button-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="ui-button-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="ui-button-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 type="text/javascript">
	
	      $(function () {
        var $validationModal, $emailRequired;

        modalDialog('#livejournal-modal', 'livejournal');
        modalDialog('#openid-modal', 'openid');
        modalDialog('#email-modal', 'email');
        modalDialog('#username-modal', 'username');
        $validationModal = modalDialog('#validation-sent-modal');
        $emailRequired = modalDialog('#email-required-modal');

        modalDialog('#ajax-login-modal', 'ajax-login', function (event) {
          var $backend, $accessToken, $accessTokenSecret, $fields, $result;
          event.preventDefault();

          $modal = $(this).closest('.modal');
          $form = $modal.find('form');
          $backend = $modal.find('[name="backend"]');
          $accessToken = $modal.find('[name="access_token"]');
          $accessTokenSecret = $modal.find('[name="access_token_secret"]');
          $result = $modal.find('.login-result');

          $.get('/ajax-auth/' + $backend.val() + '/', {
            access_token: $accessToken.val(),
            access_token_secret: $accessTokenSecret.val(),
          }, function (data, xhr, response) {
            $result.find('.user-id').html(data.id);
            $result.find('.user-username').html(data.username);
            $form.hide();
            $result.show();
            setTimeout(function () { window.location = '/'; }, 10000);
          }, 'json')
        });

        modalDialog('#persona-modal', 'persona', function (event) {
          var $form;
          event.preventDefault();

          $form = $(this).closest('form');
          navigator.id.get(function (assertion) {
            if (assertion) {
              $form.find('[name="assertion"]').val(assertion)
              $form.submit();
            } else {
              alert('An error occurred while getting your assertion, try again.');
            }
          });
        });

        $('.disconnect-form').on('click', 'a.btn', function (event) {
          event.preventDefault();
          $(event.target).closest('form').submit();
        });

        {% if validation_sent %}
          $validationModal.modal('show');
        {% endif %}

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

