GuideContent

/***
    USAGE:

    GuideContent(description, pages)
        Show the guide content for the list of topic pages

    PARAMETERS:

    description : string
        Description to use at the start of the guide.

    pages : list
        List of topic pages the guide covers. Expected to be tagged with tutorial, reference, troubleshooting or topic.

***/

// Redirect to custom page, if any
var template_custom = __page.path .. 'Custom';
if (wiki.pageexists(template_custom)) {
    return template(template_custom, $);
}

var description = $description ?? $0;
var pages = $pages ?? $1;

// assumes pages has already been decorated with category
var topics = [ p foreach var p in pages where p.topic];
var references = [ p foreach var p in pages where p.reference];
var troubleshootings = [ p foreach var p in pages where p.troubleshooting];
var tutorials = [ p foreach var p in pages where p.tutorial];

// direct children of this page
var child_topics = [p foreach var p in topics where p.parent.id == page.id];

// show the guide description
<div class="mt-control-guide-description">
    if(description is xml) {
        xml.html(description["//*[@id='guide-description']"]);
    } else {
        description;
    }
</div>
<div class="noindex">
<div class="mt-idf-guide-toc">
    // show topic tree
    if(#topics > 0) {
        <div class="">
            <div class="mt-control-page-subtitle">wiki.localize("MindTouch.IDF.topic.tree")</div>
            <div class="mt-control-page-listcontent">
                foreach(var p in list.sort(topics, 'path')) {
                    <div style=("margin-left: " .. web.size(30 * (#p.parents - 1)))>
                        web.link(p.uri, p.title);
                    </div>
                 }
            </div>
         </div>
     }
</div>

if (user.admin) {
<div class="mt-idf-guide-reports">
    <div class="mt-control-page-subtitle">wiki.localize("MindTouch.IDF.guide.reports.title");</div>
    <div class="mt-control-page-listcontent">
        var query = 'path:' .. page.path .. ' OR path:' .. page.path .. '/*';
        <div>
            web.link(uri.build(site.uri, ['Special:Reports'], {tab: 'quality', query: query}),
                wiki.localize("MindTouch.IDF.guide.reports.quality"));
        </div>
        <div>
            web.link(site.uri & 'Special:Reports' & {tab: 'aging', query: query},
                wiki.localize("MindTouch.IDF.guide.reports.aging"));
        </div>
    </div>
</div>
}

<div class="mt-idf-guide-overview">
if (#topics > 0) {
<div class="mt-control-page-subtitle">wiki.localize("MindTouch.IDF.topics");</div>
<ul class="mt-idf-topic-list">
var itemCount = 0;
foreach (var topic_page in list.sort(child_topics, 'path')) {
    var primary_categories = [{category:'tutorial'}, {category:'troubleshooting'}, {category:'reference'}];
    var topic_subpages = template("MindTouch/IDF/Controls/ListTopicSubpages", {topic_page: topic_page, pages: pages, categories: primary_categories});

    var li_class = itemCount % 2 == 0 ? 'mt-idf-topic-listitem' : 'mt-idf-topic-listitem-alt';
    let itemCount += 1;
    <li class=(li_class)>
    <div class="mt-idf-topic">
        web.link(topic_page.uri, topic_page.title);
    </div>
    <div class="mt-idf-topic-details">
        var icon_state = #topic_subpages['//div'] ? 'collapsed' : 'empty';
        <div class=('mt-idf-topic-item ' .. icon_state) id=('mt-idf-topic-' .. topic_page.id)>
            wiki.text(topic_page.path, "Overview");
        </div>

        <div id=('mt-idf-topic-' .. topic_page.id .. '-details') class="mt-idf-topic-subpages">topic_subpages;</div>

        // render topic page children
        var child_subtopics = [p foreach var p in topics where p.parent.id == topic_page.id];
        foreach (var subtopic_page in list.sort(child_subtopics, 'path')) {
            var subtopic_subpages = template("MindTouch/IDF/Controls/ListTopicSubpages", {topic_page: subtopic_page, pages: pages});

            <div class="mt-idf-subtopic">
                let icon_state = #subtopic_subpages['//div'] ? 'collapsed' : 'empty';
                <div class=('mt-idf-topic-item ' .. icon_state) id=('mt-idf-topic-' .. subtopic_page.id)>
                    web.link(subtopic_page.uri, subtopic_page.title);
                </div>
                <div id=('mt-idf-topic-' .. subtopic_page.id .. '-details') class="mt-idf-topic-subpages">
                    subtopic_subpages;
                </div>
            </div>
        }
    </div> // end topic details
    </li>
}
</ul>
} else {
    <div class="mt-control-nocontent">
        <p class="nocontent-title">wiki.localize("MindTouch.IDF.topic.empty");</p>
        <p>wiki.localize("MindTouch.IDF.topic.text");</p>
        <div class="action">
            wiki.create{template: "MindTouch/IDF/Pages/Feature_Page", label: wiki.localize("MindTouch.IDF.topic.action")}; 
        </div>
    </div>
}

</div> // end overview
</div>

.mt-idf-guide-toc,
.mt-idf-guide-reports {
   background: #fff;
   float: right;
   width: 200px;
   padding: 0px 5px 0px 5px;
}

.mt-idf-guide-reports {
   clear: right;
}

.mt-idf-topic {
  float: left;
  clear: left;
  width: 150px;
  padding: 0px 0px 0px 5px;
  text-align: left;
}

.mt-idf-topic-subpages {
  display: none;
}

ul li.mt-idf-topic-listitem,
ul li.mt-idf-topic-listitem-alt {
  padding: 10px 0px 10px 0px;
}

.mt-idf-topic-listitem-alt {
  background: #eeeeee;
}

.mt-idf-topic-details {
  float: left;
  width: 380px;
}

.mt-idf-guide-overview {
  overflow: auto;
}

.mt-idf-guide-overview ul,
.mt-idf-guide-overview li {
   overflow: auto;
   padding-left: 15px;
}

.mt-idf-subtopic {
  margin: 5px 0px 5px 0px;
}

.mt-idf-category {
  color: #808080;
  font-size: 10px;
  margin-left: 5px;
}

.mt-idf-subtopic-container {
  margin: 0px 0px 15px 15px;
}

.mt-idf-topic-item {
  padding-left: 15px;
}

.mt-idf-topic-item.collapsed {
  background: url(/skins/common/images/nav-parent-closed.gif) 0px 5px no-repeat;
}

.mt-idf-topic-item.expanded {
  background: url(/skins/common/images/nav-parent-open.gif) 0px 5px no-repeat;
}

/* Hide subtopic expand/collapse from IE6 */
* html body .mt-idf-topic-item {
  background: none;
}

* html body .mt-idf-subtopic-container {
  display: none;
}

* html body .mt-idf-topic-listitem-alt {
  border-top: 1px solid #ccc;
  background: #fff;
}

$(function(){
   $('.mt-idf-topic-item').click(function(e){
        if ($(this).attr('id') == $(e.target).attr('id') && !$(this).hasClass('empty')) {
            $('#' + $(this).attr('id') + '-details').toggle();
            $(this).toggleClass('expanded collapsed');
        }
   });
});