<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" th:lang="${#ctx.getLocale().toLanguageTag()}" >
    <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" th:with="headerTitle=#{renkanIndex.renkan_spaces}">
            <header id="header" th:include="fragment/pageFragment :: headerFragment">
                <h1 th:text="#{renkanIndex.renkan_spaces}">Renkan Spaces</h1>
            </header>
            <div id="inner">
                <div id="label" class="translate" th:text="#{renkanIndex.space_exp}">Create a Space</div> 
                <form action="#" onsubmit="go2Title();return false;">
                    <input type="text" id="renkantitle" autofocus="autofocus"/> 
                    <button type="submit">OK</button>
                </form>
            </div>
            <h2 th:text="#{renkanIndex.space_list}">Space 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.space_name}">Name</th>
                    <th th:text="#{renkanIndex.space_creation}">Creation</th>
                    <th th:text="#{renkanIndex.space_proj_count}">Project count</th>
                    <th th:text="#{renkanIndex.space_open}">Open</th>
                </tr>
              </thead>
              <tbody>
                <tr th:each="space: ${page.content}">
                  <th th:text="${space.title}">title</th>
                  <td th:text="${#dates.format(space.created, #messages.msg('date.format'))}">date</td>
                  <td th:text="${#maps.containsKey(projectsCount, space.id)}? ${projectsCount[space.id]} : 0">nb. proj</td>
                  <td><a href="#" th:href="@{'/s/'+${space.id}}" th:text="#{renkanIndex.space_open_link}">Open space</a></td>
                </tr>
              </tbody>
            </table>            
        </div>
        <footer id="footer" th:include="fragment/pageFragment :: footerFragment">
            <div id="version">© <span class="version-date">2014</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_space = {
              	title: renkantitle,
              	description: "(empty description)",
              	uri: null
              };
              
              var post_url = /*[[@{/rest/spaces/}]]*/"/rest/spaces/"; 
              $.ajax(post_url, {
                  data:JSON.stringify(new_space),
                  type: "POST",
                  dataType: "json",
                  contentType: "application/json; charset=UTF-8"
              }).done(function(space){
              	var template_url = /*[[@{'/s/<%=space_id%>'}]]*/"s/<%=space_id%>";
              	window.location = _.template(template_url, {space_id: space.id});
              });
              
              //? window.location = "p/" + renkantitle : alert(/*[[#{renkanIndex.js.empty_name_error}]]*/"Please enter a name");
          }

      /*]]>*/
      </script>
    </body>
</html>
