<!doctype html>

<html lang="<%=page.language%>">

<%- include("header.ejs") %>

<body id="templates">

	<script src="<%=cstatic%>/js/lib/jquery-1.9.1<%=min%>.js"></script>
	<script src="<%=cstatic%>/js/lib/jquery-ui-1.10.1<%=min%>.js"></script>
	<script src="<%=cstatic%>/js/lib/jquery.validate<%=min%>.js"></script>
	<script src="<%=cstatic%>/js/lib/localization/messages_<%=page.language%>.js"></script>

	<script>
    function doDelContent() {
      $("#content").val( $(this).attr("rel") );
      $("#request").val("delcontent");
      $("#record").submit();
      return false;
    }
    function doAddContent() {
      $("#block_selector").dialog("open");
      // ask the kind (text, form, image, file, string)
      return false;
    }
    function selectedContent() {
      $("#block_selector").dialog("close");

      $("#content").val( $(this).attr("rel") );
      $("#request").val("addcontent");
      $("#record").submit();
      return false;
    }

    function saveOrder() {
      var nr = 10;
      var inMain = false;
      $("#right article,#right h4.main").each(function(){
        var block = $(this);
        var id = block.attr("id");
        if (id) {
          block.find(".intro").val( (inMain) ? 'N' : 'Y' );
          block.find(".sortorder").val(nr);
          nr = nr + 10;
        } else if (block.hasClass("main")) {
          inMain = true;
        }
      });
    }

    $(document).ready( function() {
      function makeButton(id, icon, req) {
        $(id).button({ icons: { primary: icon}, text: true}).click( function() {
          if (req==="save") { saveOrder(); }
          $("#request").val(req);
          $("#record").submit();
        });
      }
	    $("#records td.edit a").prepend("<span class='icon-pencil'></span>");

      makeButton("#doNew", "ui-icon-plus", "new");
      makeButton("#doSave", "ui-icon-check", "save");
      makeButton("#doDuplicate", "ui-icon-newwin", "duplicate");
      makeButton("#doDelete", "ui-icon-trash", "delete");
      makeButton("#doCancel", "ui-icon-close", "list");

	    $("#record").validate();

      $("#right .doDeletor").button({ icons: { primary: "ui-icon-trash"}, text: true}).click( doDelContent );

      $("#right #doAdd").button({ icons: { primary: "ui-icon-plus"}, text: true}).click( doAddContent );
      $("#block_selector").dialog({autoOpen: false, width: 240});
      $("#block_selector a.makeChoice").click( selectedContent );

      $("#right > div.list").sortable().disableSelection(); // sortable({items: "article"}) but we doesn't work UI-wise good

    });
	</script>

  <section>
    <header>
      <%- include("top.ejs") %>
      <%- include("navigation.ejs") %>
    </header>

    <div>

    <% if (typeof template != "undefined") { %>
		<form action="./templates" method="post" id="record">
      <input type="hidden" name="request" id="request" value="save" />
      <input type="hidden" name="id" value="<%- template.id %>" />
      <input type="hidden" id="content" name="content" value="X" />

			<fieldset id="left">
				<div>
					<label for="name"><%= __("Name")%></label>
					<input name="name" id="name" type="text" value="<%- template.name %>" class="required"/>
				</div>
        <div>
          <label for="description"><%= __("Description")%></label>
          <textarea name="description" id="description"><%- template.description %></textarea>
        </div>
        <div>
          <label for="systemY"><%= __("System")%></label>
          <input name="system" id="systemY" type="radio" value="Y" <%= checked(template.system == 'Y') %> /><label class="choice" for="systemY"><%= __("Yes")%></label>
          <input name="system" id="systemN" type="radio" value="N" <%= checked(template.system != 'Y') %> /><label class="choice" for="systemN"><%= __("No")%></label>
        </div>
				<div>
					<label for="controller"><%= __("Controller")%></label>
					<input name="controller" id="controller" type="text" value="<%- template.controllerName %>" class="required" />
				</div>
				<div>
					<label for="fn"><%= __("Render file")%> </label>
					<input name="fn" id="fn" type="text" value="<%- template.fn %>" class="required" />
				</div>
        <div>
          <label for="maxnumber"><%= __("Max allowed")%> </label>
          <input name="maxnumber" id="maxnumber" type="text" class="number" value="<%- template.maxnumber %>"  class="required number"/>
        </div>
        <div>
          <label for="defaultchild"><%= __("Default child")%> </label>
          <select name="defaultchild" id="defaultchild">
            <option value="0"><%= __("No children")%> </option>
            <%- optionList(app.templates, template.defaultchild, "id", "name") %>
          </select>
        </div>
        <div>
          <label for="allowedtemplates"><%= __("Allowed children")%> </label>
          <input name="allowedtemplates" id="allowedtemplates" type="text" value="<%- template.allowedtemplates %>" />
        </div>
			</fieldset>

      <fieldset id="right">
        <div class="list">
          <h4 class="intro"><%= __("Intro")%></h4>
          <% var prev = "X";
          for (var ic in template.content) { var c = template.content[ic];
            if ((prev != c.intro) && (c.intro == "N")) { prev = c.intro; %>
              <h4 class="main"><%= __("Main")%></h4>
            <% } %>
            <article id="id_<%= c.id %>">
              <img src="<%=cstatic%>/icons/<%= c.kind.toUpperCase() %>.png">
              <input type="text" name="name_<%= c.id %>" class="name" value="<%= c.name %>" />
              <input type="hidden" name="sortorder_<%= c.id %>" class="sortorder" value="<%= c.sortorder %>" />
              <input type="hidden" name="intro_<%= c.id %>" class="intro" value="<%= c.intro %>" />
              <input type="hidden" name="kind_<%= c.id %>" class="kind" value="<%= c.kind %>" />
              <button class="doDeletor" rel="<%= c.id %>"><%= __("Delete")%></button>
              <span class="ui-icon-arrowthick-2-n-s ui-icon mover"><%= __("Move")%></span>
            </article>
          <% } %>
        </div>
        <div class="actions">
          <button id="doAdd"><%= __("Add")%></button>
        </div>
      </fieldset>

			<div id="action_buttons">
				<button id="doSave"><%= __("Save")%></button>
				<% if (template.id > 0) { %>
          <button id="doDuplicate"><%= __("Duplicate")%></button>
          <button id="doDelete"><%= __("Delete")%></button>
				<% } %>
				<button id="doCancel"><%= __("Cancel")%></button>
		  </div>
		</form>
    <% } %>


    <% if (typeof templates != "undefined") { %>
    <form action="./templates" method="post" id="search">
 	   	<input type="hidden" name="request" id="request" value="list" />
			<button id="doNew"><%= __("New")%></button>

			<table id="records">
			   <tr>
				 <th><%= __("Name")%></th><th><%= __("Controller")%></th><th><%= __("Render")%></th><th><%= __("System")%></th>
			   </tr>

			  <% for (var i in templates) { var t = templates[i]; %>
					<tr>
						<td class="edit"><a href="./templates?request=edit&amp;id=<%= t.id %>"><%= (t.name==='') ? '--' : t.name %></a></td>
						<td><%= t.controllerName %></td>
						<td><%= t.fn %></td>
						<td><%= (t.system === 'Y') ? 'yes' : 'no' %></td>
					</tr>
				<% } %>
			</table>
		</form>
	  <% } %>

    </div>

    <%- include("footer.ejs") %>
  </section>

  <% if (typeof template != "undefined") { %>
    <%- include("content-type.ejs") %>
  <% } %>

</body>
</html>
