{% load i18n static cosinnus_tags facebook_integration_tags %}

{% with fb_userID=request.user.cosinnus_profile.get_facebook_user_id %}
	<div style="" id="facebook-integration">
	
    	{% comment %} The <script> block must be inside because otherwise it messes up css item selectors {% endcomment %}
    	<script type="text/javascript">var COSINNUS_FACEBOOK_INTEGRATION_APP_ID = "{{ SETTINGS.COSINNUS_FACEBOOK_INTEGRATION_APP_ID }}";</script>
		<script src="{% static 'js/facebook-integration.js' %}"></script>
    
    	{% if fb_userID %}
    		<script type="text/javascript">var cosinnus_fb_userID = "{{ fb_userID }}";</script>
    	{% else %}	
    		
			<a class id="loadFacebookIntegrationButton" style="height: 40px; display: block; padding: 10px 0px; cursor: pointer;">
				<i class="fa fa-fw fa-facebook-square"></i>
				{% trans "Enable posting to Facebook" %}
			</a>
			<span class="facebook-loading-spinner" style="display: none; padding: 10px 0px;">
				<i class="fa fa-spinner fa-2x fa-spin"></i>
				{% trans "Loading Facebook-Scripts..." %}
				<p>{% trans "If nothing happens please disable any addons like Ghostery or NoScript..." %}</p>
			</span>
    		
			<!-- Modal -->
			<div class="modal fade" id="facebook-login-modal" tabindex="1" role="dialog" aria-labelledby="facebook-login-modal-Label" aria-hidden="true">
			    <div class="modal-dialog">
			        <div class="modal-content">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
			                    <i class="fa fa-times"></i>
			                </button>
			                <h4 class="modal-title" id="facebook-login-modal-Label">
			                    <i class="fa fa-facebook-official"></i>
			                    {% trans "Connect Facebook Account" %}
			                </h4>
			            </div>
			            <div class="modal-body">
			                
			                <h4>{% trans "Why connect?" context "Facebook connect explanation box" %}</h4>
			                <p>{% trans "When you connect your Facebook account you can easily publish your news posts on your Facebook timeline. You can also connect your projects/groups to a Facebook Group or Fan-Site to enable members to publish their news posts there, too." context "Facebook connect explanation box" %}</p>
			                
			                <p>{% trans "For that, we need your permission to publish on Facebook in your name." context "Facebook connect explanation box" %}</p>
			                
			                <h4>{% trans "We guarantee:" context "Facebook connect explanation box list header" %}</h4>
			                <ul>
			                	<li>{% trans "We will only post exactly what you have written" context "Facebook connect explanation box list items" %}</li>
			                	<li>{% trans "We will only post with your explicit consent for every news post, and never automatically" context "Facebook connect explanation box list items" %}</li>
			                	<li>{% trans "Except for your name and profile picture, we will obtain absolutely no other data from your Facebook account" context "Facebook connect explanation box list items" %}</li>
			                	<li>{% blocktrans with site_name=COSINNUS_CURRENT_PORTAL.site.name context "Facebook connect explanation box list items" %}You can revoke your permission at any time from your {{ site_name }} profile settings{% endblocktrans %}</li>
			                </ul>
			                
							{% comment %}  
			                	Du kannst dich mit Facebook verbinden um in Zukunft ganz einfach deine Posts auf Facebook veröffentlichen.
			                	
			                	Dazu brauchen wir einmalig deine Erlaubnis um unter deinen Namen Posts zu veröffentlichen.
			                	
			                	Wir garantieren:
			                		- wir posten nur exakt das, was du auch geschrieben hast
			                		- wir posten nie automatisch, sondern nur mit deiner Zustimmung für jeden Post
			                		- außer deinem Namen und Profilbild beziehen wir absolut keine Daten aus deinem Facebook-Account!
			                		- du kannst die Erlaubnis in deinem Benutzerprofil jederzeit wieder zurückziehen
							{% endcomment %}
			                		
			            </div>
			            <div class="modal-footer">
			            	
			                <button type="button" id="loginFacebookIntegrationButton" class="btn" style="border: 0; background: transparent; width: auto;">
				    			<img src="{% static 'images/facebook-login-button.png' %}" height="40" alt="{% trans "Log in with Facebook" %}" />
							</button>
			            
			                <button type="button" class="btn btn-emphasized" data-dismiss="modal">
			                    <ul class="media-list">
			                        <li class="media">
			                            <a class="pull-left" href="#">
			                                <i class="fa fa-times"></i>
			                            </a>
			                            <div class="media-body">
			                                {% trans "Cancel" %}
			                            </div>
			                        </li>
			                    </ul>
			                </button>
			                
			            </div>
			        </div>
			    </div>
			</div><!-- modal -->
	
    	
    	{% endif %}
    
		<div id="facebookIntegrationPanel" {% if not fb_userID %}style="display: none;"{% endif %}>
			
			<div>
				<label for="facebookIntegrationPostCheckbox" class="noselect" style="cursor: pointer; margin-top: 0;">
					<img class="title-fb-username src-fb-avatar pull-left" src="{{ request.user.cosinnus_profile.get_facebook_avatar_url }}" 
						title="{{ request.user.cosinnus_profile.get_facebook_username }}" style="margin-right: 10px;" height=40></img>
					<input type="checkbox" checked="false" autocomplete="off" name="facebook_integration_post_to_timeline" id="facebookIntegrationPostCheckbox" class="toggle-switch" data-toggle-target="fb-post-explanation">
					{% trans "Also post this to my Facebook timeline" %}
				</label>
				<br/>
				<span id="fb-post-explanation" style="display: none;" class="small noselect">{% trans "When you submit this post, it will be posted on your Facebook timeline exactly as seen." %}</span>
			</div>
			
		    {% if group and group.facebook_group_id or group and group.facebook_page_id %}
		    	<div>
					<label for="facebookIntegrationPostGroupCheckbox" class="noselect" style="cursor: pointer;">
						<img class="title-fb-username src-fb-avatar pull-left" src="{{ group.get_facebook_avatar_url }}" 
							style="margin-right: 10px;" height=40></img>
						<input type="checkbox" checked="false" autocomplete="off" name="facebook_integration_post_to_group_page" id="facebookIntegrationPostGroupCheckbox" class="toggle-switch" data-toggle-target="fb-post-explanation-group">
						{% if group.facebook_page_id %}
							{% if user|user_has_group_fb_page_access:group %}
								{% trans "Also post this to this project/group's Facebook Fan-Page" %}
							{% else %}
								{% trans "Also post this as a visitor's post to this project/group's Facebook Fan-Page" %}									
								{% if user.pk in group.admins %}
									<p class="small"><i>
										{% trans "If you are an Editor of the Fan-Page on Facebook, confirm your Editor access to post in the voice of that Fan-Page!" %}
										<a href="{% url 'cosinnus:facebook-confirm-page-admin' group_id=group.id %}" target="_blank"><b>{% trans "You can do this here" context "a link to click on"%} <span class="fa fa-external-link"></span></b></a>
									</i></p>
								{% endif %}
							{% endif %}
						{% else %}
							{% trans "Also post this to this project/group's Facebook Group" %}
						{% endif %}
					</label>
					<br/>
					<span id="fb-post-explanation-group" style="display: none;" class="small noselect">
						{% if group.facebook_page_id %}
							{% if user|user_has_group_fb_page_access:group %}
								{% trans "When you submit this post, it will be posted to the Facebook Fan-Page of this project/group, in the voice of that Fan-Page." %}
							{% else %}
								{% trans "When you submit this post, it will be posted from your Facebook Account as a visitor's post to the Facebook Fan-Page of this project/group." %}
							{% endif %}
						{% else %}
							{% trans "When you submit this post, it will be posted from your Facebook Account, exactly as seen, on the Facebook Group of this project/group." %}
						{% endif %}
					</span>
				</div>
			{% elif group and user.is_superuser or group and user.pk in group.admins %}
				<p>
					<small>
			        	{% trans "Connect a Facebook Group or Fan-Page to enable members to publish their news posts there, too!" %}
			        	<a href="{% group_url 'cosinnus:group-edit' group=group %}?tab=facebook" target="_blank"><b>{% trans "You can do this here" context "a link to click on"%} <span class="fa fa-external-link"></span></b></a>
		        	</small>
		        </p>
		    {% endif %}
		</div>
    
    </div>

{% endwith %}

