{% extends BASE_TEMPLATE %}

{% load materializecss %}
{% load staticfiles %}

{% block head-title %}Settings{% endblock %}

{% block title %}Settings
<link rel="stylesheet" type="text/css" href="{% static 'bom/style.css' %}" />
{% endblock %}

{% block menu %}
<li><a href="javascript:history.back()">Back</a></li>
{% endblock%}

{% block content %}

<div class="row">
    <div class="col s12">
        <ul id="tabs" class="tabs tabs-fixed-width">
            <li class="tab"><a href="#user">User Settings</a></li>
            <li class="tab"><a href="#file">Part File Storage</a></li>
            <li class="tab"><a href="#organization">Organization</a></li>
        </ul>
    </div>

    <div id="user" class="col s12">
    	<form name="seller" action="{{ action }}" method="post" class="col s12">
	    	{% csrf_token %}
		    <div class="row">
		    	<h2>User Info</h2>
		    	{{ user_form|materializecss:'s12 m6' }}
		    	<br>
			</div>
			<div class="fieldWrapper">
		        <button class="waves-effect waves-light btn green lighten-1" type="submit" name="submit-user">Save</button>
			</div>
		</form>
    </div>
    <div id="file" class="col s12">
		<h2>Part File Storage with Google Drive</h2>
		<p>Connect your Google account to enable file storage using Google Drive. When you connect, we will create a folder in your root of Google drive, and automatically store and organize files to keep them associated to your parts. You'll be able to access the files directly through Google Drive, and through the web portal here.</p>
		<h3>Google Connections</h3>
		<ul>
		{% if google_authentication %}
		<p>Logged in to Google as: {{ google_authentication.uid }}</p>
		<form action="{% url 'social:disconnect' 'google-oauth2' %}" method="post">
		    {% csrf_token %}
		    <button class="waves-effect waves-light btn green lighten-1" type="submit" name="submit-organization">Disconnect</button>
		</form>
		{% else %}
		<p><i>Coming Soon...</i></p>
		<!-- <a href="{% url "social:begin" "google-oauth2" %}">
    		<img title="Google sign-in." src="{% static 'bom/img/google/web/1x/btn_google_signin_dark_normal_web.png' %}"></img>
    	</a> -->
		{% endif%}
		</ul>
    </div>
    <div id="organization" class="col s12">
		<form name="seller" action="{{ action }}" method="post" class="col s12">
		    {% csrf_token %}
			<div class="row">
		    	<h2>Organization</h2>
				{{ organization_form|materializecss:'s12 m6' }}
				<i>Adding users to your organization is a paid feature, but is free for a limited time while we are still developing the tool. Contact info@indabom.com if you are interested.</i>
				<h3>Users In {{ organization.name }}</h3>
				{% if organization.owner == user %}
				{% for user in users_in_organization %}
				<ul>{{ user.first_name }} {{ user.last_name}} (<a href="mailto:{{ user.email }}">{{ user.email }}</a>)</ul>
				{% empty %}
				<span>No additional users in this organization.</span>
				{% endfor %}
				{% endif %}
			</div>
			<div class="fieldWrapper">
		        <button class="waves-effect waves-light btn green lighten-1" type="submit" name="submit-organization">Save</button>
			</div>
		</form>
    </div>
</div>
{% endblock %}

{% block script %}
<!-- Handle if there's an anchor, select tab -->
<script type='text/javascript'>
    var tabsElem= document.querySelector('.tabs');
    var tabs = M.Tabs.init(tabsElem);
    {% if tab_anchor %}
    tabs.select('{{tab_anchor}}');
    {% endif %}
</script>
{% endblock script%}