{% extends "users/sidebar.html" %}
{% comment %}
Re2o est un logiciel d'administration développé initiallement au rezometz. Il
se veut agnostique au réseau considéré, de manière à être installable en
quelques clics.

Copyright © 2017  Gabriel Détraz
Copyright © 2017  Goulven Kermarec
Copyright © 2017  Augustin Lemesle

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License along
with this program; if not, write to the Free Software Foundation, Inc.,
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
{% endcomment %}

{% load bootstrap3 %}
{% load widget_tweaks %}
{% load massive_bootstrap_form %}
{% load static %}
{% load acl %}
{% load i18n %}
{% block title %}{% trans "Users" %}{% endblock %}

{% block content %}
{% bootstrap_form_errors userform %}

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" type="text/css">

<script type='text/javascript'>
function submitBday() {
	var field = document.getElementById("file");
    var Bdate = document.getElementById('bday').value;
    var Bday = +new Date(Bdate);
	var age = ((Date.now() - Bday) / (31557600000));
	
	if (age < 18){
    	field.style.display = "block";
	}
	else{
		field.style.display = "none";
	}

}
</script> 

<form class="form" method="post">
    {% csrf_token %}

	<h3>Informations générales</h3>

    <div class="form-row">
    	<div class="form-group col-md-4">
        	{{ userform.name.label_tag }}
        	{% render_field userform.name class="form-control" requiered=True %}
        </div>
        <div class="form-group col-md-4">
        	{{ userform.surname.label_tag }}
        	{% render_field userform.surname class="form-control" requiered=True %}
        </div>
        <div class="form-group col-md-4">
        	{{ userform.pseudo.label_tag }}
        	{% render_field userform.pseudo class="form-control" requiered=True %}
        </div>
    </div>
	
	<div class="form-row">
	    <div class="form-group col-md-4">
		    {{ userform.email.label_tag }}
		    {% render_field userform.email class="form-control" requiered=True %}
  	    </div>
  	    <div class="form-group col-md-4">
		    {{ userform.telephone.label_tag }}
		    {% render_field userform.telephone class="form-control" requiered=True %}
  	    </div>
        <div class="form-group col-md-4">
            <label>Date de naissance</label>
            <input class="form-control" id="bday" name="bday" date-date-format="dd-mm-yy" requiered=True placeholder="Date de naissance" type="date" onchange="submitBday()">
        </div>
	</div>

    <div class="form-group">
        {% if user.is_authenticated %}
        {% can_edit user %}
        <div class="disclaimer" style="display:none;">
            <input type="checkbox" id="check_disclaimer" name="box_disclaimer" requiered=True />
            <label for="scales">Décharge parentale reçue</label>
        {% acl_end %}
        {% else %}
        <div class="disclaimer" style="display:none;">
            {{ userform.disclaimer.label_tag }}
            {% render_field userform.disclaimer class="form-control" %}
        </div>
        {% endif %}
	</div>

<script type='text/javascript'>
function submitBday() {
	var fields = document.getElementsByClassName("disclaimer");
    var Bdate = document.getElementById('bday').value;
    var Bday = +new Date(Bdate);
	var age = ((Date.now() - Bday) / (31557600000));

    var len = fields.length;
	
	if (age < 18){
        for (i=0; i<len; ++i) {
    	    fields[i].style.display = "block";
            fields[i].required = true;
        }
	}
	else{
        for (i=0; i<len; ++i) {
		    fields[i].style.display = "none";
            fields[i].required = false;
        }
    }

}
</script>
	
    <div class="form-group">
		{{ userform.school.label_tag }}
		{% render_field userform.school class="form-control" requiered=True %}
  	</div>
  	<div class="form-group">
		{{ userform.room.label_tag }}
		{% render_field userform.room class="form-control" requiered=True %}
  	</div>
  	<div class="form-group">
		{{ userform.comment.label_tag }}
		{% render_field userform.comment class="form-control" %}
  	</div>

    <h3>Informations avancées (facultatif)</h3>
    <div class="table-responsive">
    <table class="table table-borderless">
        <tr>
            <th>
            {{ userform.shell.label_tag }}
            {% render_field field class="form-control is-valid" %}
            </th>
            <td>
            {% render_field userform.shell class="form-control" placeholder=userform.shell.label %}
            </td>
        </tr>
        <tr>
            <th>
            {{ userform.gpg_fingerprint.label_tag }}
            </th>
            <td>
            {% render_field userform.gpg_fingerprint class="form-control" placeholder=userform.gpg_fingerprint.label %}
            </td>
        </tr>
	</table>
	</div>
    
    <button class="btn btn-success" type="submit">Créer un Utilisateur</button>

</form>
{% if load_js_file %}
<script src="{{ load_js_file }}"></script>
{% endif %}
<br>
{% if showCGU %}
<p>{% trans "By clicking 'Create or edit', the user commits to respect the " %}<a href="/media/{{ GTU }}" download="CGU" >{% trans "General Terms of Use" %}</a>.</p>
<h3>{% trans "Summary of the General Terms of Use" %}</h3>
<p>{{ GTU_sum_up }}</p>
{% endif %}
<br/>
<br/>
<br/>
{% endblock %}