<link href="$CssFilePath" type="text/css" rel="stylesheet" />

<%-- Cover Page --%>
<% loop $CoverPage %>
    <table class="cover-title-and-logo" width="100%">
        <tr>
            <% if $Title %>
                <td class="cover-title-td" >
                    <span class="cover-title">$Title</span>
                </td>
                <% end_if %>
            <% if $LogoPath != '' %>
                <td class="cover-logo-td">
                    <img src="$LogoPath" class="logo"/>
                </td>
            <% end_if %>
        </tr>
    </table>
    <% if $CoverImagePath != '' %>
        <div class="cover-image-container">
            <img src="$CoverImagePath" />
        </div>
    <% end_if %>

    <table class="version-and-footer-logo">
        <tr>
            <% if $Title %>
                <td class="cover-version-td">
                    <span class="cover-version">$VersionContent</span>
                </td>
                <% end_if %>
            <% if $LogoPath != '' %>
                <td class="footer-logo">
                    <img src="$FooterLogoPath" class="logo" />
                </td>
            <% end_if %>
        </tr>
    </table>

    <% if $AttributionContent %>
        <pagebreak />
        <div style="clear:both;">
            $AttributionContent.RAW
        </div>
    <% end_if %>
<% end_loop %>

<%--  Table of Content --%>
<% if $AboutClidescSectionCount || $UserGuideSectionCount || $ProductGeneratorSectionCount || $AppendixSectionCount %>
    <tocpagebreak links="1" />
<% end_if %>

<%-- Section 1 : About Clidesc --%>
<% if $AboutClidescSectionCount %>

    <h1 class="section-title">
        <tocentry content="{$AboutClidescSectionCount} {$AboutClidescSectionTitle}" />
        {$AboutClidescSectionCount} {$AboutClidescSectionTitle}
    </h1>

    <% loop $AboutClidescSectionData %>
        <h2 class="page-title">
            <tocentry content="{$Top.AboutClidescSectionCount}.{$pos} $Title" level="1" />
            {$Top.AboutClidescSectionCount}.{$pos} $Title
        </h2>
        <div>$Content.RAW</div>
    <% end_loop %>
<% end_if %>

<%-- Section 2: User guide --%>
<% if $UserGuideSectionCount %>
    <pagebreak />

    <h1 class="section-title">
        <tocentry content="{$UserGuideSectionCount} {$UserGuideSectionTitle}" />
        {$UserGuideSectionCount} {$UserGuideSectionTitle}
    </h1>

    <% loop $UserGuideSectionData %>
        <h2 class="page-title">
            <tocentry content="{$Top.UserGuideSectionCount}.{$pos} $Title" level="1" />
            {$Top.UserGuideSectionCount}.{$pos} $Title
        </h2>
        <div>$Content.RAW</div>
    <% end_loop %>
<% end_if %>

<%-- Section 3: Product generator --%>
<% if $ProductGeneratorSectionCount %>
    <pagebreak />

    <h1 class="section-title">
        <tocentry content="{$ProductGeneratorSectionCount} {$ProductGeneratorSectionTitle}" />
        {$ProductGeneratorSectionCount} {$ProductGeneratorSectionTitle}
    <h1>

    <% loop $ProductGeneratorSectionData %>
        <h2 class="page-title">
            <tocentry content="{$Top.ProductGeneratorSectionCount}.{$pos} $Title" level="1" />
            {$Top.ProductGeneratorSectionCount}.{$pos} $Title
        </h2>

        <table class="product-generator-table">
            <%-- Script file name --%>
            <tr>
                <td>Script name:</td>
                <td>$ProductID/$ScriptFileName</td>
            </tr>

            <%-- Input period --%>
            <tr>
                <td>Recommend input period:</td>
                <td>$InputPeriod</td>
            </tr>

            <%-- Outputs --%>
            <tr>
                <td>Outputs:</td>
                <td>$Outputs</td>
            </tr>

        </table>

        <% if $Content == 'No content available' %>
            <div><p>$Content.</p></div>
        <% else %>
            <div>$Content.RAW</div>
        <% end_if %>

        <% if not $Last %>
            <pagebreak />
        <% end_if %>
    <% end_loop %>
<% end_if %>

<%-- Section 4: Appendix--%>
<% if $AppendixSectionCount %>
    <pagebreak />

    <h1 class="section-title">
        <tocentry content="{$AppendixSectionCount} {$AppendixSectionTitle}" />
        {$AppendixSectionCount} {$AppendixSectionTitle}
    </h1>

    <% loop $AppendixSectionData %>
        <h2 class="page-title">
            <tocentry content="{$Top.AppendixSectionCount}.{$pos} $Title" level="1" />
            {$Top.AppendixSectionCount}.{$pos} $Title
        </h2>
        <div>$Content.RAW</div>
    <% end_loop %>
<% end_if %>
</body>
