<#-- 
  Macros for Web Performance reports - Classic style
-->

<!-- Chart-related scripts are now defined in modernized-Header.ftl -->

<#-- Help Link - Creates a link to a help topic -->
<#macro HelpLink topic>
  <a href="${resourceManager.getHelpLink(topic)}" class="help-link" title="View help for this topic">
    <img src="${dp.getLink("help.gif")}" alt="Help" />
  </a>
</#macro>

<#-- Video Link - Creates a link to a video tutorial with Boldyn report styling -->
<#macro VideoLink videoUrl="" label="" link="" description="">
  <#-- Support both modernized parameter names (videoUrl, label) and original ones (link, description) -->
  <#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}" class="video-link" title="${text?default('Watch video tutorial')}" target="_blank">
      <span>▶</span> ${text?default('Watch tutorial')}
    </a>
  </div>
</#macro>

<#-- Export Links - Creates links to export data -->
<#-- Modernized version with format parameter -->
<#macro ModernExportLink format url label="">
  <a href="${url}" class="export-link" download title="Export as ${format?upper_case}">
    <img src="${dp.getLink("export.gif")}" alt="Export" /> ${label?default('Export as ' + format?upper_case)}
  </a>
</#macro>

<#-- Original backward-compatible version -->
<#macro ExportLink link>
  <a href="${link}" class="noprint">
    <img src="${dp.getLink("export.gif")}" alt="${dp.getText("Export_table...")}" style="border: 0;">
  </a>
</#macro>

<#-- Section Link - Creates a navigation link to another section -->
<#macro SectionLink url label="">
  <div class="section-navigation">
    <a href="${url}" class="section-link">${label}</a>
  </div>
</#macro>

<#-- User Capacity Section - Creates the User Capacity section for Executive Summary -->
<#macro UserCapacitySection description capacity capacityRange maxUsers>
  <div class="section">
    <h2 style="font-size: 18px; font-weight: bold; color: #333333; background-color: #fafafa; padding: 8px 10px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; margin: 25px 0 15px 0;">User Capacity</h2>
    <div class="section-content user-capacity">
      <div style="margin-bottom: 15px; color: #555555; padding: 10px; background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 3px;">
        ${description}
      </div>
      <table style="width: 80%; border-collapse: collapse; margin: 0 auto 20px auto; border-bottom: 1px solid #cccccc;">
        <tr>
          <th style="padding: 8px 12px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; text-align: left; background-color: #f5f5f5; font-weight: bold; width: 60%;">Estimated User Capacity</th>
          <td style="padding: 8px 12px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; text-align: center; font-weight: bold; background-color: #f5f5f5; min-width: 120px;">${capacity}</td>
        </tr>
        <tr>
          <th style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: left; font-weight: normal; width: 60%;"></th>
          <td style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: center; color: #666666;">${capacityRange}</td>
        </tr>
        <tr>
          <th style="padding: 8px 12px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; text-align: left; background-color: #f5f5f5; font-weight: bold; width: 60%;">Maximum Users Analyzed</th>
          <td style="padding: 8px 12px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; text-align: center; font-weight: bold; background-color: #f5f5f5;">${maxUsers}</td>
        </tr>
      </table>
      
      <@VideoLink videoUrl=dp.getLink("usercap-vid") label="Learn how to interpret this report by watching the User Capacity screencast" />
      
      <@SectionLink url=dp.getLink("user-capacity-section") label="Go to User Capacity section" />
    </div>
  </div>
</#macro>

<#-- Performance Goals Section - Creates the Performance Goals section with Boldyn report styling -->
<#macro PerformanceGoalsSection goals>
  <div class="section">
    <h2 class="section-header">Performance Goals</h2>
    <div class="section-content performance-goals">
      <table class="comparison-table">
        <thead>
          <tr>
            <th>User Level</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <#list goals as goal>
            <tr>
              <td>${goal.userLevel} Users</td>
              <td>
                <div class="goal-status">
                  <#if goal.failed>
                    <div class="goal-failed">
                      <img src="${dp.getLink("goalfail.gif")}" alt="Failed" style="margin-right: 5px; vertical-align: middle;" />
                      ${goal.failedCount} goals failed
                    </div>
                  <#else>
                    <div class="goal-passed">
                      <img src="${dp.getLink("pass.gif")}" alt="Passed" style="margin-right: 5px; vertical-align: middle;" />
                      All goals passed
                    </div>
                  </#if>
                </div>
              </td>
            </tr>
          </#list>
        </tbody>
      </table>
      
      <@VideoLink videoUrl=dp.getLink("perfgoals-vid") label="Learn more about performance goals by watching the Performance Goals screencast" />
      
      ${dp.getLink("perfgoals.link")}
    </div>
  </div>
</#macro>

<#-- General Data Tables - Creates basic data tables -->
<#-- Modernized DataTable that takes explicit headers and data arrays -->
<#macro ModernDataTable headers data caption="">
  <table style="width: 80%; border-collapse: collapse; margin: 0 auto 20px auto; border-bottom: 1px solid #cccccc;">
    <#if caption?has_content>
      <caption style="font-weight: bold; margin-bottom: 8px; font-size: 14px;">${caption}</caption>
    </#if>
    <thead>
      <tr>
        <#list headers as header>
          <th style="padding: 8px 12px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; text-align: center; background-color: #f5f5f5; font-weight: bold; min-width: 100px;">${header}</th>
        </#list>
      </tr>
    </thead>
    <tbody>
      <#if data?has_content>
        <#list data as row>
          <tr>
            <#list row as cell>
              <td style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: center;">${cell}</td>
            </#list>
          </tr>
        </#list>
      <#else>
        <tr>
          <td colspan="${headers?size}" style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: center; font-style: italic;">No data available</td>
        </tr>
      </#if>
    </tbody>
  </table>
</#macro>

<#-- Original backward-compatible DataTable that takes a TabularDataListProvider -->
<#macro DataTable table>
  <table class="data-table">
    <thead>
      <tr>
        <#list table.columns as column>
          <#if column.isRightAligned()>
            <th class="text-right"<#if column.hasDescription()> title="${column.description}"</#if>>${column.name}</th>
          <#elseif column.isCenterAligned()>
            <th class="text-center"<#if column.hasDescription()> title="${column.description}"</#if>>${column.name}</th>
          <#else>
            <th<#if column.hasDescription()> title="${column.description}"</#if>>${column.name}</th>
          </#if>
        </#list>
      </tr>
    </thead>
    <tbody>
      <#list table.rows as row>
        <tr>
          <#list row.cells as cell>
            <#if cell.column.isRightAligned()>
              <td class="text-right">${cell.value}</td>
            <#elseif cell.column.isCenterAligned()>
              <td class="text-center">${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="text-right">${column.footer}</td>
            <#elseif column.isCenterAligned()>
              <td class="text-center">${column.footer}</td>
            <#else>
              <td>${column.footer}</td>
            </#if>
          </#list>
        </tr>
      </tfoot>
    </#if>
  </table>
</#macro>

<#-- Slowest Pages Section - Creates the Slowest Pages section for Executive Summary -->
<#macro SlowestPagesSection pages>
  <div class="section">
    <h2 style="font-size: 18px; font-weight: bold; color: #333333; background-color: #fafafa; padding: 8px 10px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; margin: 25px 0 15px 0;">Slowest Pages</h2>
    <div class="section-content slowest-pages">
      <table style="width: 80%; border-collapse: collapse; margin: 0 auto 20px auto; border-bottom: 1px solid #cccccc;">
        <thead>
          <tr>
            <th style="padding: 8px 12px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; text-align: center; background-color: #f5f5f5; font-weight: bold; min-width: 350px;">URL</th>
            <th style="padding: 8px 12px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; text-align: center; background-color: #f5f5f5; font-weight: bold; min-width: 150px;">Avg. Time</th>
          </tr>
        </thead>
        <tbody>
          <#list pages as page>
            <tr>
              <td style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: left;">${page.url}</td>
              <td style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: center; font-weight: bold;">${page.time}</td>
            </tr>
          </#list>
        </tbody>
      </table>
      
      <@SectionLink url=dp.getLink("ppd") label="Go to Slowest Pages section" />
    </div>
  </div>
</#macro>

<#-- Chart Section - Creates a stylized chart container matching the Boldyn report design with error handling for missing images -->
<#macro ChartSection chartUrl chartTitle="" showLegend=true>
  <div class="chart-container">
    <#if chartTitle?has_content>
      <h3 class="chart-title">${chartTitle}</h3>
    </#if>
    <div class="chart-wrapper">
      <#-- Handle potential missing chart image with improved robust error handling -->
      <#if chartUrl?? && chartUrl != "">
        <#if chartUrl?contains("?")>
          <#-- Add error handling parameter to the URL -->
          <img src="${chartUrl}&errorFallback=true" alt="${chartTitle!""}" class="chart-image" style="max-width: 100%; height: auto;" 
               onerror="this.onerror=null; createChartPlaceholder(this); this.alt='Chart data unavailable';" />
        <#else>
          <img src="${chartUrl}?errorFallback=true" alt="${chartTitle!""}" class="chart-image" style="max-width: 100%; height: auto;" 
               onerror="this.onerror=null; createChartPlaceholder(this); this.alt='Chart data unavailable';" />
        </#if>
      <#else>
        <div class="chart-placeholder">
          <div>Chart data unavailable</div>
        </div>
      </#if>
    </div>
    <#if showLegend>
      <div class="chart-legend">
        <#-- Dynamic legend content would be provided by the caller -->
        <#nested>
      </div>
    </#if>
  </div>
</#macro>

<#-- Duration Chart - Creates a duration chart with min/max/avg lines matching the Boldyn report design -->
<#macro DurationChart chartUrl chartTitle="">
  <@ChartSection chartUrl=chartUrl chartTitle=chartTitle>
    <div class="legend-item"><span class="legend-color max-line"></span> <span class="legend-text">Max Page Duration</span></div>
    <div class="legend-item"><span class="legend-color avg-line"></span> <span class="legend-text">Avg Page Duration</span></div>
    <div class="legend-item"><span class="legend-color min-line"></span> <span class="legend-text">Min Page Duration</span></div>
    <#if goal??>
      <div class="legend-item"><span class="legend-color goal-line"></span> <span class="legend-text">Duration Goal</span></div>
    </#if>
  </@ChartSection>
</#macro>

<#-- Chart Link - Creates a chart link wrapper with error handling using Boldyn report styling -->
<#macro ChartLink chartUrl alt="" title="">
  <div class="chart-container">
    <#if title?has_content>
      <h3 class="chart-title">${title}</h3>
    </#if>
    <div class="chart-wrapper">
      <#if chartUrl?? && chartUrl != "">
        <#if chartUrl?contains("?")>
          <img src="${chartUrl}&errorFallback=true" alt="${alt!''}" class="chart-image" style="max-width: 100%; height: auto;" 
               onerror="this.onerror=null; try { createChartPlaceholder(this); } catch(e) {} this.alt='Chart data unavailable';" />
        <#else>
          <img src="${chartUrl}?errorFallback=true" alt="${alt!''}" class="chart-image" style="max-width: 100%; height: auto;" 
               onerror="this.onerror=null; try { createChartPlaceholder(this); } catch(e) {} this.alt='Chart data unavailable';" />
        </#if>
      <#else>
        <div class="chart-placeholder">
          <div>Chart data unavailable</div>
        </div>
      </#if>
    </div>
  </div>
</#macro>

<#-- Top-level Metrics Section - Creates a formatted metrics summary table -->
<#macro TopLevelMetricsSection description capacity maxUsers startTime duration completedPages totalHits peakHitsSec peakTransferSpeed peakCasesMin failedPages>
  <div class="section">
    <h2 style="font-size: 18px; font-weight: bold; color: #333333; background-color: #fafafa; padding: 8px 10px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; margin: 25px 0 15px 0;">Top-level Metrics</h2>
    <div class="section-content top-level-metrics">
      <div style="margin-bottom: 15px; color: #555555; padding: 10px; background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 3px; width: 80%; margin: 0 auto 20px auto;">
        ${description}
      </div>
      <table style="width: 80%; border-collapse: collapse; margin: 0 auto 20px auto; border-bottom: 1px solid #cccccc;">
        <tr>
          <th style="padding: 8px 12px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; text-align: left; background-color: #f5f5f5; font-weight: bold; width: 60%;">Estimated User Capacity</th>
          <td style="padding: 8px 12px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; text-align: right; font-weight: bold; background-color: #f5f5f5; min-width: 120px;">${(capacity)}</td>
        </tr>
        <tr>
          <th style="padding: 8px 12px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; text-align: left; background-color: #f5f5f5; font-weight: bold; width: 60%;">Maximum Users Analyzed</th>
          <td style="padding: 8px 12px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; text-align: right; font-weight: bold; background-color: #f5f5f5;">${(maxUsers)}</td>
        </tr>
        <tr>
          <th style="padding: 8px 12px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; text-align: left; background-color: #f5f5f5; font-weight: bold; width: 60%;" colspan="2">Summary</th>
        </tr>
        <tr>
          <th style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: left; font-weight: bold; width: 60%;">Start Time</th>
          <td style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: right;">${(startTime)}</td>
        </tr>
        <tr>
          <th style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: left; font-weight: bold; width: 60%;">Duration</th>
          <td style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: right;">${(duration)}</td>
        </tr>
        <tr>
          <th style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: left; font-weight: bold; width: 60%;">Completed Pages</th>
          <td style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: right;">${(completedPages)}</td>
        </tr>
        <tr>
          <th style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: left; font-weight: bold; width: 60%;">Total hits</th>
          <td style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: right;">${(totalHits)}</td>
        </tr>
        <tr>
          <th style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: left; font-weight: bold; width: 60%;">Peak hits/sec</th>
          <td style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: right;">${(peakHitsSec)}</td>
        </tr>
        <tr>
          <th style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: left; font-weight: bold; width: 60%;">Peak transfer speed</th>
          <td style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: right;">${(peakTransferSpeed)}</td>
        </tr>
        <tr>
          <th style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: left; font-weight: bold; width: 60%;">Peak cases/min</th>
          <td style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: right;">${(peakCasesMin)}</td>
        </tr>
        <tr>
          <th style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: left; font-weight: bold; width: 60%;">Total Pages Failed</th>
          <td style="padding: 6px 12px; border-bottom: 1px solid #eeeeee; text-align: right;">${(failedPages)}</td>
        </tr>
      </table>
    </div>
  </div>
</#macro>

<#-- Top-level Metrics Summary - Creates just the summary table with Boldyn report styling -->
<#macro TopLevelMetricsSummary capacity maxUsers startTime duration completedPages totalHits peakHitsSec peakTransferSpeed peakCasesMin failedPages>
  <div class="metric-grid">
    <div class="metric-card">
      <div class="metric-label">Estimated User Capacity</div>
      <div class="metric-value">${(capacity)}</div>
    </div>
    
    <div class="metric-card">
      <div class="metric-label">Maximum Users Analyzed</div>
      <div class="metric-value">${(maxUsers)}</div>
    </div>
    
    <div class="metric-card">
      <div class="metric-label">Peak Pages/Second</div>
      <div class="metric-value">${(peakCasesMin)}</div>
    </div>
    
    <div class="metric-card">
      <div class="metric-label">Total Pages</div>
      <div class="metric-value">${(completedPages)}</div>
    </div>
  </div>
  
  <table class="metrics-table">
    <tr class="summary-header">
      <th colspan="2">Test Summary</th>
    </tr>
    <tr>
      <th>Start Time</th>
      <td>${(startTime)}</td>
    </tr>
    <tr>
      <th>Duration</th>
      <td>${(duration)}</td>
    </tr>
    <tr>
      <th>Total Hits</th>
      <td>${(totalHits)}</td>
    </tr>
    <tr>
      <th>Peak Hits/sec</th>
      <td>${(peakHitsSec)}</td>
    </tr>
    <tr>
      <th>Peak Transfer Speed</th>
      <td>${(peakTransferSpeed)}</td>
    </tr>
    <tr>
      <th>Failed Pages</th>
      <td>${(failedPages)}</td>
    </tr>
  </table>
</#macro>