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

{% block headtitle %}{% trans "Profile for" %} {{ user.username }}{% endblock %}

{% block content %}
<h1>{% trans "Edit" %} {{ user.username }}</h1>
<div class="buttons">
	<div class="user-details">
		<h2 class="sp-profile-name">{{ user_form.first_name.value|default:"&nbsp;" }} {{ user_form.last_name.value|default:"&nbsp;" }}</h2>
		<p>
			<a href="{% url 'sp_delete_page' %}" data-role="button" data-theme="e"><button class="btn btn-danger">{% trans "Delete Account" %}</button></a>
			<a href="{% url 'sp_profile_view_page' %}?returnTo={{ sp_form.returnTo.value }}" data-role="button"><button class="btn btn-warning">{% trans "Cancel" %}</button></a>
			<a href="#" data-role="button" onclick="$('#sp-profile-form').submit();"><button class="btn btn-success">{% trans "Done" %}</button></a>
		</p>
		{% if user.social_profile.image_url %}
			<p><img src="{{ user.social_profile.image_url }}"></p>
		{% endif %}
	</div>
	<div class="user-details">

			{% crispy sp_form %}
			{{ sp_form | as_crispy_errors }}

			<form action="{% url 'sp_profile_edit_page' user.id %}" method="post" id="sp-profile-form" data-ajax="false">
				{% csrf_token %}
				<ul>
					{{ user_form.as_ul }}
				</ul>
				{% for field in user_form %}
					{% if field.label == 'Image banner' or field.label == 'Cropping banner' or field.label == 'Image' or field.label == 'Cropping' %}
						</br>
						<div class="fieldWrapper">
							{{ field.errors }}
							<p>{{ field }}<p>
						</div>
					{% else %}
						<div class="fieldWrapper">
							{{ field.errors }}
							<p>{{ field.label_tag }} {{ field }}<p>
						</div>
					{% endif %}
				{% endfor %}
				{% for field in user_form %}
					{% if field.label == 'Image banner' or field.label == 'Cropping banner' or field.label == 'Image' or field.label == 'Cropping' %}
						</br>
						<div class="fieldWrapper">
							{{ field.errors }}
							<p>{{ field }}<p>
						</div>
					{% else %}
						<div class="fieldWrapper">
							{{ field.errors }}
							<p>{{ field.label_tag }} {{ field }}<p>
						</div>
					{% endif %}
				{% endfor %}
			</form>
	</div>
	<div class="user-details">
		<h3 style="margin-left:10px;">{% trans "Social Connections" %}</h3>
		<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>
	</div>
</div>
{% endblock %}

{% block js %}
	<script src="{% url 'javascript-catalog' %}"></script>
    {% compress js file profile-edit %}
		<script src="{% static 'socialprofile/js/plugins/sweetalert2.min.js' %}"></script>
		<script src="{% static 'socialprofile/js/edit.js' %}"></script>
    {% endcompress %}

	{% load sweetify %}
	{% sweetify nonce="**CSP_NONCE**" %}

<!--    <script nonce="**CSP_NONCE**">-->
<!--    $("#id_username").keyup(function(){-->
<!--           var username=$(this).val();-->
<!--           if(username!=""){-->
<!--             $.ajax({-->
<!--               url:'{% url "check_username_exist" %}',-->
<!--               type:'POST',-->
<!--               data:{username:username}-->
<!--             })-->
<!--             .done(function(response){-->
<!--               console.log(response);-->
<!--               if(response=="True"){-->
<!--                 $(".username_error").remove();-->
<!--                 $("<span class='username_error' style='padding: 5px;color: red;font-weight: bold;'>Username Not Available</span>").insertAfter("#id_username");-->
<!--                }-->
<!--               else{-->
<!--                 $(".username_error").remove();-->
<!--                 $("<span class='username_error' style='padding: 5px;color: green;font-weight: bold;'>Username Available</span>").insertAfter("#id_username");-->
<!--                }-->
<!--             })-->
<!--             .fail(function(){-->
<!--               console.log("failed");-->
<!--             })-->
<!--           }-->
<!--           else{-->
<!--             $(".username_error").remove();-->
<!--           }-->
<!--    });-->
<!--    </script>-->
{% endblock %}
