<!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/jquery.js"></script>
        <script th:remove="all" type="text/javascript" src="../../static/js/thymol.js"></script>

        <script src="../../lib/jquery/jquery.js" th:src="@{/static/lib/jquery/jquery.js}" ></script>
        <script src="../../lib/underscore/underscore.js" th:src="@{/static/lib/underscore/underscore.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;">
                    <fieldset id="form-fields">
                        <div id="title-field"><label th:text="#{renkanIndex.renkan_title}" for="renkantitle">title</label><input type="text" id="renkantitle" autofocus="autofocus" x-webkit-speech="x-webkit-speech"/></div>
                    </fieldset>
                    <div id="form-submit"><button type="submit">OK</button></div>
                </form>
            </div>
            <h2 th:text="#{renkanIndex.space_list}">Space list</h2>
            <div class="filter-container">
                <form method="get">
                    <input type="text" id="space-filter" name="filter" placeholder="filter title" th:placeholder="#{renkanIndex.space_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>
              <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>
