<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
    <head>
        <title>Renkan</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

        <link rel="shortcut icon" href="favicon.ico"/>
        <script src="../../lib/jquery.min.js" th:src="@{/static/lib/jquery.min.js}" ></script>
        <script src="../../lib/underscore-min.js" th:src="@{/static/lib/underscore-min.js}" ></script>
        <script src="../../js/main.js" th:src="@{/static/js/main.js}" ></script>

        <link href="../../static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}"/> 
    </head>
    <body>
        <div id="wrapper">
        	<h1><span th:text="#{renkanIndex.renkan_space}">Renkan Space</span>: <span th:text="${space.title}">Titre</span></h1>
            <div id="inner">
                <div id="label" class="translate" th:text="#{renkanIndex.renkan_exp}">Create a Renkan</div> 
                <form action="#" onsubmit="go2Title();return false;"> 
                    <input type="text" id="renkantitle" autofocus="autofocus" x-webkit-speech="x-webkit-speech"/> 
                    <button type="submit">OK</button>
                </form>
            </div>
            <h2 th:text="#{renkanIndex.project_list}">Project list</h2>
            <div th:include="fragment/paginationFragment :: paginationFragment" class="pagination-container">
                <div>               
                    <a href="#?p.page=1">&lt;&lt;</a>                    
                    <a href="#?p.page=3">&lt;</a>
                    <span>...</span>
                    <a href="#?p.page=2">2</a>
                    <a href="#?p.page=3">3</a>
                    <span>4</span>
                    <a href="#?p.page=5">5</a>
                    <a href="#?p.page=6">6</a>
                    <span>...</span>
                    <a href="#?p.page=5">&gt;</a>
                    <a href="#?p.page=7">&gt;&gt;</a> 
                </div>
            </div>
            <table>
              <thead>
                <tr>
                    <th th:text="#{renkanIndex.project_name}">Name</th>
                    <th th:text="#{renkanIndex.project_creation}">Creation</th>
                    <th th:text="#{renkanIndex.project_edit}">Edit</th>
                    <th th:text="#{renkanIndex.project_copy}">Copy</th>
                    <th th:text="#{renkanIndex.project_delete}">Del.</th>
                    <th th:text="#{renkanIndex.project_render}">View</th>
                </tr>
              </thead>
              <tbody>
                <tr th:each="project: ${page}">
                  <th th:text="${project.title}">title</th>
                  <td th:text="${#dates.format(project.created, #messages.msg('date.format'))}">date</td>
                  <td><a href="#" th:href="@{'/p/'+${project.id}(cowebkey=${project.getKey(2)})}" th:text="#{renkanIndex.project_edit_link}">Edit project</a></td>
                  <td><a href="#" th:text="#{renkanIndex.project_copy_link}" th:attr="data-project_id=${project.id}" class="copy_project">Copy project</a></td>
                  <td><a href="#" th:text="#{renkanIndex.project_delete_link}" th:attr="data-project_id=${project.id},data-project_title=${project.title}" class="delete_project">Delete project</a></td>
                  <td><a href="#" th:href="@{'/p/pub/'+${project.id}(cowebkey=${project.getKey(1)})}" th:text="#{renkanIndex.project_render_link}">View project</a></td>
                </tr>
              </tbody>
            </table>            
        </div>
        <script th:inline="javascript" >
        /*<![CDATA[*/
      
            function go2Title()
            {
                var renkantitle = $("#renkantitle").val();
                if(renkantitle.length == 0) {
                	var alert_message = /*[[#{renkanIndex.js.empty_name_error}]]*/"Please enter a title"; 
                	alert(alert_message);
                	return false;
                }
                
                new_renkan = {
                	title: renkantitle,
                	description: "(empty description)",                	
                	uri: null,
                	space_id: /*[[${space.id}]]*/"_",
                };
                
                var post_url = /*[[@{/rest/projects/}]]*/"/rest/projects/"; 
                $.ajax(post_url, {
                    data:JSON.stringify(new_renkan),
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=UTF-8"                    
                }).done(function(project){
                	window.location.reload();
                });
                
            }
        
        function copyProject(project_id)
        {
        	var post_url = /*[[@{/p/copy}]]*/"#";
            $.post(post_url, {"project_id": project_id})
                .done(function(p){
                    window.location.reload();
            });
        }
        
        function deleteProject(project_id, project_title)
        {
        	var message = /*[[#{renkanIndex.project_delete_confirm}]]*/"Delete project \"<%= title %>\"";
        	if(confirm(_.template(message, {title: project_title}))) {
                var delete_url = /*[[@{/rest/projects}]]*/"#";
                $.ajax(delete_url+"/"+project_id, {
                    type: "DELETE"	
                }).done(function(){
                	window.location.reload();
                });
        	}
        }
        
        $(function(){
        	$(".copy_project").click(function(event) {
        		copyProject($(event.target).data("project_id"));
        	});
            $(".delete_project").click(function(event) {
                deleteProject($(event.target).data("project_id"), $(event.target).data("project_title"));
            });
        });
 
        /*]]>*/
        </script>
    </body>
</html>
