<webscript>
   <shortname>Customize Site Pages</shortname>
   <description>Gui for adding and removing pages from a site</description>
   <url>/components/site/customise-pages</url>
</webscript>

<!-- Customise Pages Assets -->
<link rel="stylesheet" type="text/css" href="${page.url.context}/components/site/customise-pages.css" />
<script type="text/javascript" src="${page.url.context}/components/site/customise-pages.js"></script>

<div id="${args.htmlid}" class="customise-pages">

   <script type="text/javascript">//<![CDATA[
   new Alfresco.CustomisePages("${args.htmlid}").setOptions(
   {
      siteId: "${siteId}",
      pages:
      {
      <#list pages as page>
         "${page.pageId}":
         {
            pageId: "${page.pageId}",
            title: "${page.title}",
            description: "${page.description}",
            used: ${page.used?string}
         }<#if (page_has_next)>,</#if>
      </#list>
      }
   }).setMessages(${messages});
   //]]></script>

   <div id="${args.htmlid}-currentPages-div" class="currentPages">

      <h2>${msg("section.currentPages")}</h2>
      <hr />
      <div>
         <ul id="${args.htmlid}-currentPages-ul">
            <li id="${args.htmlid}-currentPages-empty-li" class="empty" style="display: none;">
                ${msg("label.noPagesSelected")}
            </li>
            <#list pages as page>
            <li id="${args.htmlid}-currentPage-li-${page.pageId}" <#if (!page.used)>style="display: none;"</#if>>
               <div class="pageTitle"><h4>${page.title}</h4></div>
               <div class="pageIcon">
                  <img src="${url.context}/components/site/images/page.png" alt="page icon" />
               </div>
               <div class="pageActions">
                  <img src="${url.context}/components/site/images/info-16.png" title="${page.description}" alt="${page.description}" />
                  <a id="${args.htmlid}-remove-link-${page.pageId}" href="#">
                     <img src="${url.context}/components/site/images/generic-remove-16.png" title="${msg("button.remove")}" alt="${msg("button.remove")}"/>
                  </a>
               </div>
            </li>
            </#list>
         </ul>
      </div>

      <div>
         <div class="buttons" id="${args.htmlid}-addPages-div">
            <input id="${args.htmlid}-addPages-button" type="button" value="${msg("button.addPages")}" />
         </div>
      </div>

   </div>

   <div id="${args.htmlid}-pages-div" class="pages" style="display: none;">

      <div class="text">
         <a class="closeLink" href="#" id="${args.htmlid}-closeAddPages-link">${msg("link.close")}</a>
         <h3 class="padded">${msg("section.selectNewPages")}</h3>
      </div>
      <div>
         <ul>
            <li id="${args.htmlid}-pages-empty-li" class="empty" style="display: none;">
                ${msg("label.noPagesLeft")}
            </li>
            <#list pages as page>
               <li id="${args.htmlid}-page-li-${page.pageId}" <#if (page.used)>style="display: none;"</#if>>
               <div class="pageIcon">
                  <img src="${url.context}/components/site/images/page.png"/>                  
               </div>
               <div class="pageActions">
                  <input id="${args.htmlid}-select-button-${page.pageId}" type="button" value="${msg("button.select")}"/>
               </div>
               <div class="pageBox">
                  <div class="pageTitle"><h3>${page.title}</h3></div>
                  <div class="pageDescription">${page.description}</div>
               </div>
               <div class="clear"></div>
               </li>
            </#list>
         </ul>
      </div>

   </div>

   <div>
      <hr/>
      <div class="buttons">
         <input id="${args.htmlid}-save-button" type="button" value="${msg("button.save")}"/>
         <input id="${args.htmlid}-cancel-button" type="button" value="${msg("button.cancel")}"/>
      </div>
   </div>



</div>

// Get ids for all used pages
var siteId = page.url.templateArgs.site;
var p = sitedata.getPage("site/" + siteId + "/dashboard");
var usedPages = eval('(' + p.properties.sitePages + ')');
if (usedPages == null)
{
   usedPages = [];
}

// Get ids for all pages that have been configured to be addable for sites
var availablePages = config.scoped["SitePages"]["pages"].childrenMap["page"];
if (availablePages == null)
{
   availablePages = [];
}

// The pages
var pages = [];

// Start by adding the current pages in the order they were added
for (var i = 0; i < usedPages.length; i++)
{
   var pageId = usedPages[i].pageId;
   // Look up real page object from framework
   var p = sitedata.getPage(pageId);
   if (p)
   {
      // Create a page object
      pages[pages.length] =
      {
         pageId: pageId,
         title: p.title,
         description: p.description,
         used: true
      };
   }
}

// add the pages that aren't used in the end of the list
for (i = 0; i < availablePages.size(); i++)
{
   // Get page id from config file
   var pageId = availablePages.get(i).attributes["id"];
   var used = false;
   for (var j = 0; j < usedPages.length; j++)
   {
      if (usedPages[j].pageId == pageId)
      {
         used = true;
         break;
      }
   }
   if (!used)
   {
      // Look up real page object from framework
      var p = sitedata.getPage(pageId);
      if (p)
      {
         // Create a page object
         pages[pages.length] =
         {
            pageId: pageId,
            title: p.title,
            description: p.description,
            used: false
         };
      }
   }
}

// Sort the order of the pages and find out if this page is used or not


// Prepare model for template
model.siteId = siteId;
model.pages = pages;

header.layout=Pages

section.currentPages=Current Site Pages
label.noPagesSelected=No pages selected

section.selectNewPages=Select New Page
label.noPagesLeft=No pages available

link.close=Close
button.addPages=Add Pages
button.info=Information
button.remove=Remove
button.select=Select
button.save=OK
button.cancel=Cancel

message.saveFailure=Could not save configuration.
message.saving=Saving configuration...