page numbering in C# desktop app jsreport

mo3enpro

in my code i have headerfooter.html
like this:

<body>
    {{#each $pdf.pages}}
    {{#if 0}}
    <div style="page-break-before: always;"></div>
    {{/if}}
    <main class="main">
        <header class="header">
        </header>
        <footer class="footer">
            <span>Page {{getPageNumber 0}} of {{getTotalPages ../$pdf.pages}}</span>
        </footer>
    </main>
    {{/each}}
</body>

but the report is showing page 1 of 4 in all pages ??
this is the code I use to render the report:

var report = await rs.RenderAsync(new RenderRequest
{
    Template = new Template
    {                       
        Content = File.ReadAllText(Path.Combine(path.LocalPath, "ReportTemplates", _report.ReportTemplate)),
        Engine = Engine.Handlebars, // You can specify the template engine if needed
        Recipe = Recipe.ChromePdf,
        Chrome = new Chrome()
        {
            MarginBottom = "2cm",
            MarginTop = "1cm",
            MarginLeft = "1cm",
            MarginRight = "1cm"
        },
        PdfOperations = new List<PdfOperation>() {                       
        new PdfOperation{ 
        MergeWholeDocument = false,                       
        Type=PdfOperationType.Merge,
        Template=new Template{
            Helpers=File.ReadAllText(Path.Combine(path.LocalPath, "ReportTemplates", "helper.js")),
         Content = File.ReadAllText(Path.Combine(path.LocalPath, "ReportTemplates", "Header-Footer.html")),
    Engine = Engine.Handlebars,
     Recipe = Recipe.ChromePdf,
        }
        }
        }
    },
    Data = _report.Content,
});

and this is the content HTML code:


<div style='page-break-before: always;'></div>
<div class="container">

    <table class="centered-table ">
        <tr class="extr-spacing-er">
            <td style="text-align: center; vertical-align: top;" width="33%">
                <img src="{{asset "./kingdom_ fo saudi_arabia.png""dataURI"}}" width="210" height="53" /><br>
                <strong>وزارة التعليم</strong><br>
                {{Schooldetail.SchoolNameAr}}
            </td>
            <td style="text-align: center; vertical-align: top;" width="33%">
                <img src="{{asset "./minstry_of_education.png""dataURI"}}" width="100" height="100" />
            </td>
            <td style="text-align: left; vertical-align: top;" width="33%">
                التاريخ: <span id="currentDate"></span>

                <script>
                    // JavaScript to display the current system date
                    var currentDateElement = document.getElementById("currentDate");
                    var currentDate = new Date();
                    currentDateElement.textContent = currentDate.toLocaleDateString();
                </script>
            </td>
        </tr>
    </table>
   
</div>

helper js i tried different codes but the same output page index is not changed for every page.

admin

The MergeWholeDocument should be true in this case.

mo3enpro

thank you, you are right.