<script type="text/javascript">
function ShowHelp(help, event) {
	if (external)
		{
		return external.ShowHelp(help);
		}
	window.open(help, '', 'location=no,width=250,height=250,top='+(event.clientY-125)+',left='+(event.clientX-125));
	return true;
}

// Fallback function to create a placeholder for missing charts
function createChartPlaceholder(imgElement) {
    if (imgElement) {
        imgElement.style.display = 'none';
        var div = document.createElement('div');
        div.style.padding = '20px';
        div.style.border = '1px solid #ccc';
        div.style.background = '#f5f5f5';
        div.style.color = '#666';
        div.style.textAlign = 'center';
        div.style.minHeight = '150px';
        div.style.display = 'flex';
        div.style.alignItems = 'center';
        div.style.justifyContent = 'center';
        div.innerHTML = '<div>Chart data unavailable</div>';
        imgElement.parentNode.appendChild(div);
    }
}
</script>
<#macro HelpLink link description>
<a href="${link}" class="noprint" target="_blank" onclick="return !ShowHelp('${link}', event)"><img border="0" src="${dp.getLink("help.gif")}" alt="${description}" /></a>
</#macro>

<#-- ChartLink - Creates a chart link with error handling for missing images -->
<#macro ChartLink chartUrl alt="" title="">
  <div style="margin: 10px 0 20px 0; text-align: center;">
    <#if title?has_content>
      <h4 style="margin-bottom: 5px;">${title}</h4>
    </#if>
    <#if chartUrl?contains("?")>
      <#-- Add fallback error handling with a default message if the placeholder is not available -->
      <img src="${chartUrl}&errorFallback=true" alt="${alt!''}" style="max-width: 100%;" 
           onerror="this.onerror=null; try { createChartPlaceholder(this); } catch(e) { } this.alt='Chart data unavailable';" />
    <#else>
      <img src="${chartUrl}?errorFallback=true" alt="${alt!''}" style="max-width: 100%;" 
           onerror="this.onerror=null; try { createChartPlaceholder(this); } catch(e) { } this.alt='Chart data unavailable';" />
    </#if>
  </div>
</#macro>

<#-- ChartSection - More detailed chart container with title, chart, and optional legend -->
<#macro ChartSection chartUrl chartTitle="" showLegend=true>
  <div style="margin: 15px 0 25px 0; border: 1px solid #e5e5e5; padding: 15px; background-color: #ffffff; border-radius: 5px; width: 90%; margin-left: auto; margin-right: auto;">
    <#if chartTitle?has_content>
      <h3 style="margin-top: 0; color: #333333; text-align: center;">${chartTitle}</h3>
    </#if>
    <div style="margin: 10px 0; text-align: center;">
      <#-- Handle potential missing chart image with more robust error handling -->
      <#if chartUrl?contains("?")>
        <img src="${chartUrl}&errorFallback=true" alt="${chartTitle!""}" style="max-width: 100%;" 
             onerror="this.onerror=null; try { createChartPlaceholder(this); } catch(e) { } this.alt='Chart data unavailable';" />
      <#else>
        <img src="${chartUrl}?errorFallback=true" alt="${chartTitle!""}" style="max-width: 100%;" 
             onerror="this.onerror=null; try { createChartPlaceholder(this); } catch(e) { } this.alt='Chart data unavailable';" />
      </#if>
    </div>
    <#if showLegend>
      <div style="margin-top: 10px; text-align: center; font-size: 11px; color: #666666;">
        <#-- Dynamic legend content would be provided by the caller -->
        <#nested>
      </div>
    </#if>
  </div>
</#macro>

<#macro VideoLink link description videoUrl="" label="">
<#-- Support both original parameter names (link, description) and modernized ones (videoUrl, label) -->
<#local url = "">
<#local text = "">
<#if videoUrl != "">
  <#local url = videoUrl>
<#else>
  <#local url = link>
</#if>
<#if label != "">
  <#local text = label>
<#else>
  <#local text = description>
</#if>
<div style="text-align: center; margin: 15px 0;">
  <a href="${url}" style="display: inline-block; text-decoration: none; font-size: 11px; color: #3366cc; font-weight: bold; background-color: #e9f0f9; padding: 4px 8px 4px 6px; white-space: nowrap; border: 1px solid #b8ccee; border-radius: 3px;" title="${text?default('Watch video tutorial')}" target="_blank">
    <span style="color: #3366cc;">▶ ${text?default('Watch tutorial')}</span>
  </a>
</div>
</#macro>

<#macro ExportLink link>
<a href="${link}" class="noprint"><img border="0" src="${dp.getLink("export.gif")}" alt="${dp.getText("Export_table...")}"></a>
</#macro>

<#macro ProBanner section summary description>
<p class="probanner"><a href="${dp.getLink("application-mode-comparison")}" target="_blank"><img src="${dp.getLink("loadtest/ProBanner.png")}" alt="${dp.getText("Load_Tester_Pro")}" style="float:left" /></a><span style="font-size:medium; font-weight:bold">${dp.getText(summary)}</span><br>${dp.getText(description)}</p>
<#if section?has_content>
<p class="samplereport-link">
	<span>
	<a href="${dp.getLink("sample-loadtest-report") + "?section=" + section + "&version=" + dp.getString("software-version") + "#"+section+".html"}" target="samplereport" >
	${dp.getText("LoadTestReport.section_sample_text")}
	</a>
	</span>
</p>
</#if>
</#macro>

<#macro DataTable table> <!-- "table" is a TabularDataListProvider -->
    <table cellpadding="0" cellspacing="0" border="0" class="datatbl">
        <thead>
            <tr>
                <#list table.columns as column>
                    <#if column.isRightAligned()>
                        <td class="datar"
                    <#elseif column.isCenterAligned()>
                        <td class="datac"
                    <#else>
                        <td
                    </#if>
                    <#if column.hasDescription()>
                        title="${column.description}"
                    </#if>
                    >${column.name}</td>
                </#list>
            </tr>
        </thead>
        <tbody>
        <#list table.rows as row>
            <tr>
                <#list row.cells as cell>
                    <#if cell.column.isRightAligned()>
                        <td class="datar">${cell.value}</td>
                    <#elseif cell.column.isCenterAligned()>
                        <td class="datac">${cell.value}</td>
                    <#else>
                        <td>${cell.value}</td>
                    </#if>
                </#list>
            </tr>
        </#list>
        </tbody>
        <#if table.hasFooter()>
            <tfoot>
            <tr>
                <#list table.columns as column>
                    <#if column.isRightAligned()>
                        <td class="datar">${column.footer}</td>
                    <#elseif column.isCenterAligned()>
                        <td class="datac">${column.footer}</td>
                    <#else>
                        <td>${column.footer}</td>
                    </#if>
                </#list>
            </tr>
            </tfoot>
        </#if>
    </table>
</#macro>

<#-- Special macro for Slowest Pages report where table data is essential -->
<#macro DataTableForSlowestPages table> <!-- "table" is a TabularDataListProvider -->
    <table cellpadding="0" cellspacing="0" border="0" class="datatbl">
        <thead>
            <tr>
                <#list table.columns as column>
                    <#if column.isRightAligned()>
                        <td class="datar"
                    <#elseif column.isCenterAligned()>
                        <td class="datac"
                    <#else>
                        <td
                    </#if>
                    <#if column.hasDescription()>
                        title="${column.description}"
                    </#if>
                    >${column.name}</td>
                </#list>
            </tr>
        </thead>
        <tbody>
        <#list table.rows as row>
            <tr>
                <#list row.cells as cell>
                    <#if cell.column.isRightAligned()>
                        <td class="datar">${cell.value}</td>
                    <#elseif cell.column.isCenterAligned()>
                        <td class="datac">${cell.value}</td>
                    <#else>
                        <td>${cell.value}</td>
                    </#if>
                </#list>
            </tr>
        </#list>
        </tbody>
        <#if table.hasFooter()>
            <tfoot>
            <tr>
                <#list table.columns as column>
                    <#if column.isRightAligned()>
                        <td class="datar">${column.footer}</td>
                    <#elseif column.isCenterAligned()>
                        <td class="datac">${column.footer}</td>
                    <#else>
                        <td>${column.footer}</td>
                    </#if>
                </#list>
            </tr>
            </tfoot>
        </#if>
    </table>
</#macro>
