{% 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 <img title="Via Google Drive" style="height: 1em; vertical-align: middle;" src="{% static 'bom/img/google_drive_logo.svg' %}"></img></h2>
		<p>Connect your Google account. Organization owners can enable file storage using Google Drive. {% if organization.owner == user %} Since you are the owner, you are able to enable file storage!{% else %}Contact your organization owner to enable.{% endif %}<p>
        <p>When you connect, we will create a folder called <b>IndaBOM Part Files</b> in your root of Google drive (and can be moved anywhere in your drive). To add files to a part, navigate to the part in IndaBOM, and on the part's <b>Specifications</b> tab, click the <img title="Via Google Drive" style="width: 16px; vertical-align: middle;" src="{% static 'bom/img/google_drive_logo.svg' %}"></img>&nbsp;Google Drive link. This will create a folder for your part in your root IndaBOM directory, or take you there if it already exists.<p>
        <p>You'll be able to access the files directly through Google Drive, and through IndaBOM.</p>
		<h3>Google Connections</h3>
		<ul>
		{% if google_authentication %}
            <p>Logged in to Google as: {{ google_authentication.uid }}
		<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 %}
		<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">
    <h2>Organization</h2>
    {% if organization.owner == user %}
		<form name="seller" action="{{ action }}" method="post" class="col s12">
		    {% csrf_token %}
			<div class="row">
				{{ 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>
			</div>
			<div class="fieldWrapper">
		        <button class="waves-effect waves-light btn green lighten-1" type="submit" name="submit-organization">Save</button>
			</div>
            <h3>Users In {{ organization.name }}</h3>
            {% 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 %}
		</form>
        {% else %}
        <p>Nothing to see here 🙈. You aren't the organization owner.</p>
    {% endif %}
    </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%}