{% load staticfiles %}
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="{% static 'remie/js/jquery-1.11.2.min.js' %}"></script>
<script type="text/javascript">
	$(document).ready(function(){
	    $("#iframe_update_button").click(function(){
	        var default_url = "{% url 'remie_segment' %}";
	        var project_id = $("#project_id_iframe").val();
	        var group_mode = $("#group_mode").is(":checked");
	        
	        
	        var final_url = default_url+"?project_id="+project_id+"&group_mode="+group_mode;
	        $("#remie_workunit_iframe").attr("src", final_url);
	    });
	    
	    function getCookie(name) {
	        var cookieValue = null;
	        if (document.cookie && document.cookie != '') {
	            var cookies = document.cookie.split(';');
	            for (var i = 0; i < cookies.length; i++) {
	                var cookie = jQuery.trim(cookies[i]);
	                // Does this cookie string begin with the name we want?
	                if (cookie.substring(0, name.length + 1) == (name + '=')) {
	                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
	                    break;
	                }
	            }
	        }
	        return cookieValue;
	    }
	    
	    $("#copy_button").click(function(){
	        var project_id = $("#project_id_copy").val();
	        var copy_title = $("#title_copy").val();
			console.log(project_id)
		    var csrftoken = getCookie('csrftoken');
		    
	        function csrfSafeMethod(method) {
	            // these HTTP methods do not require CSRF protection
	            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
	        }
	        $.ajaxSetup({
	            beforeSend: function(xhr, settings) {
	                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
	                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
	                }
	                $("#success_copy").css("color", "orange");
	                $("#success_copy").html("Copie en cours ... ");
	            }
	        });
	        $.ajax({
	        	method: "POST",
        	    url: '{% url "api_dispatch_list" resource_name="projects" api_name="1.0" %}?format=json&publish=true&source='+project_id,
                contentType: 'application/json',
        	    data: '{"source": "'+project_id+'", "title": "'+copy_title+'", "publish": "true"}',
	        	success: function(_data, _status, _request) {
	                $("#success_copy").css("color", "green");
	                $("#success_copy").html("Copie réussie: la ressource est atteignable en "+_request.getResponseHeader('Location'));
	            },
	            error: function(_xhr, _error, _thrown) {
	                $("#success_copy").css("color", "red");
	                $("#success_copy").html("Une erreur est survenue: "+_thrown);
	            }
	        });
	    });
	});
</script>
</head>
<body>
<div style="float:left; width:500px; height: 200px; margin-left: 10px;">
  <label>Id projet (génération d'iframe): </label><input id="project_id_iframe" type="text"></input>
  <br><label>Mode groupe: </label><input id="group_mode" type="checkbox"></input>
  <br><input id="iframe_update_button" type="button" value="Générer"></input>
</div>
<div style="display: inline-block; width: 500px; height: 200px; visibility:hidden;">
  <label>Id projet (copie via l'API): </label><input id="project_id_copy" type="text"></input>
  <br><label>Titre de la copie: </label><input id="title_copy" type="text"></input>
  <br><input id="copy_button" type="button" value="Copier"></input>
  <div id="success_copy"></div>
</div>
<div style="width:1191px; height:625px; outline: 1px;" id="remie_iframe_container">
  <iframe id="remie_workunit_iframe" width="1191" height="625" src=""></iframe>
</div>
</body>
</html>