{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load static %}

{% block modals%}
<div class="modal" id="mo_get_info" tabindex="-1" role="dialog"></div>
<div class="modal" id="mo_edit_info" tabindex="-1" role="dialog"></div>
{% endblock %}

{% block script %}

<script type="text/javascript">

function get_list() {
	var $list_get_list = $('#get_list');
	$list_get_list.html('<h3> <i class="fas fa-spinner fa-pulse fa-fw"></i> Loading...</h3>');
	$.ajax({
		type : 'GET',
		url: '/taches/api/get_list',
		success: function(feeds) { 
			$list_get_list.html(feeds);
		}
	});
};

function bt_get_info(id){
	stop_crono();
	$.ajax({
			type : 'GET',
			url: '/taches/api/get_taches/'+id,
			success: function(data) {
				$('#mo_get_info').html(data).modal('toggle');
			},
	});
};

function bt_edit_info(id){
	stop_crono();
	$.ajax({
			type : 'GET',
			url: '/taches/api/edit_taches/'+id,
			success: function(data) {
				$('#mo_edit_info').html(data).modal('toggle');
			},
	});
};

function bt_send_edit_info(){
	document.getElementById("form_edit").submit();
};

function onloading() {
	get_list();
};

$(document).ready(function(){ 
	onloading()
	set_crono()
});

function set_crono(){
	crono = window.setInterval(function(){onloading();}, 60000); 
}
function stop_crono(){
	window.clearInterval(crono)
}

</script>
{% endblock %}

{% block main %}
<div class="card-body">
{% if not page.output or page.err %}
	{{page.p_contenu|safe}}
{% else %}
	{% if page.err %}{{page.err|safe}}{% endif %}
	{% if page.output and page.err %}<hr>{% endif %}
	{% if page.output %}{{page.output|safe|urlize}}{% endif %}
{% endif %}
</div>

<div id="get_list"><h3><i class="fas fa-spinner fa-pulse fa-fw"></i> Loading...</h3></div>
{% endblock %}

{% block right_panel %}
<div class="card-body">
	<p>{{page.p_right|safe}}</p>
	<div class="d-grid gap-2 mb-2"><a class="btn btn-success" href="#" onclick="bt_edit_info(0)" role="button"><i class="far fa-plus-square"></i> Ajouter une tâche</a></div>
	<div class="d-grid gap-2"><a class="btn btn-primary" href="/parc" role="button"><i class="fas fa-undo-alt"></i> Retour</a></div>
</div>
{% endblock %}


