<!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="../../static/img/favicon.ico" th:href="@{/static/img/favicon.ico}"/>
        
        <script th:remove="all" type="text/javascript" src="../../static/lib/jquery.min.js"></script>
        <script th:remove="all" type="text/javascript" src="../../static/js/thymol.js"></script>         
        
        <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/style.css" rel="stylesheet" th:href="@{/static/css/style.css}"/>
        <link href="../../static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}"/> 
    </head>
    <body>
      <div id="container">
        <div id="wrapper">
            <header id="header">
                <h1><a href="renkanIndex.html" th:href="@{'/'}" id="home-link" th:text="#{renkanIndex.renkan_space}">Renkan Space</a>: <span th:text="${space.title}">Titre</span></h1>
                <div id="headerNav" th:include="fragment/pageFragment :: headerNavFragment"></div>
            </header>
            <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>
            <div id="project-list-container">
              <h2 th:text="#{renkanIndex.project_list}">Project list</h2>
              <div id="project-filter-container">
                  <form method="get"> 
                      <input type="text" id="project-filter" name="filter" placeholder="filter title" th:placeholder="#{renkanIndex.project_filter}" th:value="${param['filter']}?${param['filter'][0]}:''" /> 
                      <button type="submit">OK</button>
                  </form>                            
              </div>
              <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 th:with="columnSort=${param['p.sort']}?${param['p.sort'][0]}:'updated',sortDir=${param['p.sort.dir']}?${param['p.sort.dir'][0]}:'desc'">
                <thead th:with="sortDirInv=${sortDir}=='desc'?'asc':'desc'">
                  <tr>
                      <th th:with="sorted=(${columnSort}=='title')"><span th:text="#{renkanIndex.project_name}">Name</span><form method="get" class="proj-sort-form"><input type="hidden" name="p.sort" value="title"/><input type="hidden" name="p.sort.dir" th:value="${sorted}?${sortDirInv}:'desc'"/><input th:if="${param['filter']}" name="filter" type="hidden" th:value="${param['filter'][0]}"/><input type="submit" class="proj-sortable-col" th:class="${sorted}?'proj-sort-'+${sortDir}+'-col':'proj-sortable-col'" value=""/></form></th>
                      <th th:with="sorted=(${columnSort}=='updated')"><span th:text="#{renkanIndex.project_updated}">Updated</span><form method="get" class="proj-sort-form"><input type="hidden" name="p.sort" value="updated"/><input type="hidden" name="p.sort.dir" th:value="(${sorted})?${sortDirInv}:'desc'"/><input th:if="${param['filter']}" name="filter" type="hidden" th:value="${param['filter'][0]}"/><input type="submit" class="proj-sort-desc-col" th:class="${sorted}?'proj-sort-'+${sortDir}+'-col':'proj-sortable-col'" value=""/></form></th>
                      <th th:with="sorted=(${columnSort}=='created')"><span th:text="#{renkanIndex.project_creation}" >Creation</span><form method="get" class="proj-sort-form"><input type="hidden" name="p.sort" value="created"/><input type="hidden" name="p.sort.dir" th:value="${sorted}?${sortDirInv}:'desc'"/><input th:if="${param['filter']}" name="filter" type="hidden" th:value="${param['filter'][0]}"/><input type="submit" class="proj-sort-asc-col" th:class="${sorted}?'proj-sort-'+${sortDir}+'-col':'proj-sortable-col'" value=""/></form></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="${project.updated}?${#dates.format(project.updated, #messages.msg('date.format'))}:''">update</td>
                    <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>            
        </div>
        <footer id="footer" th:include="fragment/pageFragment :: footerFragment">
            <div id="version">© <span class="version-date">2013</span> <a href="http://www.iri.centrepompidou.fr" target="_blanck">IRI</a> - Version <span class="version-version">0.0</span></div>
        </footer>        
      </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>
