<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html" encoding="utf-8" indent="yes"/>

  <!-- Parameters -->

  <xsl:param name="VERSION">1.0</xsl:param>
  <xsl:param name="PAGE-TITLE">Reports</xsl:param>
  <xsl:param name="PAGE-NAME">selectReport</xsl:param>

  <!-- Variables --> 

  <xsl:variable name="PAGINATION_COUNT" select="//reports/@count"/>
  <xsl:variable name="PAGINATION_START" select="//reports/@start"/>
  <xsl:variable name="PAGINATION_END"   select="//reports/@end"/>
  <xsl:variable name="PAGINATION_PAGE"  select="//reports/@page"/>

  <!-- Main Template -->

  <xsl:template match="/">

    <script src="js/{$PAGE-NAME}.js?version={$VERSION}"/>   

    <div class="{$PAGE-NAME}">
      
      <div class="card">
        
        <div class="card-header bg-primary text-white p-1 ps-3 border-bottom-0">
          <i class="bi bi-printer me-2"/>
          <xsl:value-of select="$PAGE-TITLE"/>
          <xsl:if test="$PAGINATION_COUNT > 0">
            <xsl:text> | Showing </xsl:text>
            <xsl:value-of select="format-number($PAGINATION_START, '###,##0')"/>
            <xsl:text> to </xsl:text>
            <xsl:value-of select="format-number($PAGINATION_END, '###,##0')"/>
            <xsl:text> of </xsl:text>
            <xsl:value-of select="format-number($PAGINATION_COUNT, '###,##0')"/>
          </xsl:if>
        </div>
        
        <div class="card-body">

          <div class="row align-items-center mt-2 mb-3">
            
            <div class="col-sm-4">
              <div class="input-group input-group-sm">
                <input type="text" class="form-control autosave" name="select_report" id="select_report" maxlength="100" autocomplete="off" placeholder="{//popovers/record[popover_name = 'select_report']/popover_placeholder}" autofocus="autofocus"/>
                <button type="button" class="btn btn-primary fw-bold btnFind" data-bs-toggle="tooltip" data-bs-title="{//popovers/record[popover_name = 'select_report']/popover_text}" data-bs-html="true" data-bs-custom-class="custom-tooltip"><i class="bi bi-search"/></button>
                <button type="button" class="btn btn-primary fw-bold btnClearFind" data-bs-toggle="tooltip" data-bs-title="Clear Find" data-bs-custom-class="custom-tooltip"><i class="bi bi-arrow-clockwise"/></button>
              </div>
            </div>

            <div class="col-auto">
              <div class="input-group input-group-sm" data-bs-toggle="tooltip" data-bs-title="Show Per Page" data-bs-custom-class="custom-tooltip">
                <div class="input-group-text"><i class="bi bi-list-ol"/></div>
                <select class="form-select autosave" name="reports_per_page" id="reports_per_page">
                  <option value="20">20</option>
                  <option value="40">40</option>
                  <option value="60">60</option>
                  <option value="80">80</option>
                  <option value="100">100</option>
                </select>
              </div>
            </div>
            
          </div>
      
          <div class="buttons mt-3 mb-2">
            
            <button type="button" class="btn btn-sm btn-primary me-2 btnDone"><i class="bi bi-box-arrow-left me-2"/>Done</button>

            <div class="btn-group ms-2" role="group">
              <xsl:if test="$PAGINATION_PAGE > 1">
                <button type="button" class="btn btn-sm btn-primary btnPagination" data-pagination="first" data-bs-toggle="tooltip" data-bs-title="First Page" data-bs-custom-class="custom-tooltip"><i class="bi bi-chevron-bar-left me-1"/>First</button>
                <button type="button" class="btn btn-sm btn-primary btnPagination" data-pagination="previous" data-bs-toggle="tooltip" data-bs-title="Previous Page" data-bs-custom-class="custom-tooltip"><i class="bi bi-chevron-left me-1"/>Previous</button>
              </xsl:if>
              <xsl:if test="$PAGINATION_COUNT > $PAGINATION_END">
                <button type="button" class="btn btn-sm btn-primary btnPagination" data-pagination="next" data-bs-toggle="tooltip" data-bs-title="Next Page" data-bs-custom-class="custom-tooltip"><i class="bi bi-chevron-right me-1"/>Next</button>
                <button type="button" class="btn btn-sm btn-primary btnPagination" data-pagination="last" data-bs-toggle="tooltip" data-bs-title="Last Page" data-bs-custom-class="custom-tooltip"><i class="bi bi-chevron-bar-right me-1"/>Last</button>
              </xsl:if>
            </div>
            
          </div>

          <hr class="mt-3 mb-2"/> 

          <xsl:choose>
            
            <xsl:when test="count(//reports/record) = 0">
          
              <div class="fs-5 text-danger fw-bold fst-italic mt-3 mb-1">
                <xsl:text>There are no Reports to select...</xsl:text>
              </div>
              
            </xsl:when>
            
            <xsl:otherwise>

              <div class="table-wrapper table-responsive">
                
                <table class="table table-sm table-striped table-hover base-table table-auto" id="reports-table">
                  
                  <thead class="sticky-header" data-theme="{$THEME}">
                    <th>Type</th>
                    <th>Name</th>
                    <th>Description</th>
                  </thead>
                  
                  <tbody>
                    <xsl:apply-templates select="//reports"/>
                  </tbody>
                  
                </table>
                
              </div>
            
            </xsl:otherwise>
            
          </xsl:choose>
          
        </div>
        
      </div>
      
    </div>

    <!-- Form to Print a Report -->
    
    <form style="display:inline;" id="PrintForm" method="post" action="" target="PrintTab">

      <input type="hidden" name="action" value="print"/>
      <input type="hidden" name="report" value=""/>

    </form>
                        
  </xsl:template>

  <!-- Template for table rows -->

  <xsl:template match="reports/record">
    
    <tr class="text-nowrap hoverable report-row" data-report-serial="{report_serial}" data-report-class="{report_class}" data-report-type="{report_type}" data-report-target="{report_target}">
      
      <td class="report_type text-center fs-100" style="width: 10%;">
        <xsl:choose>
          <xsl:when test="report_type = 'Download'">
            <i class="bi bi-cloud-download" data-bs-toggle="tooltip" data-bs-title="Download" data-bs-placement="right" data-bs-custom-class="custom-tooltip"/>
          </xsl:when>
          <xsl:when test="report_type = 'Email'">
            <i class="bi bi-send" data-bs-toggle="tooltip" data-bs-title="Email" data-bs-placement="right" data-bs-custom-class="custom-tooltip"/>
          </xsl:when>
          <xsl:when test="report_type = 'Graph'">
            <i class="bi bi-bar-chard" data-bs-toggle="tooltip" data-bs-title="Graph" data-bs-placement="right" data-bs-custom-class="custom-tooltip"/>
          </xsl:when>
          <xsl:when test="report_type = 'Report'">
            <i class="bi bi-printer" data-bs-toggle="tooltip" data-bs-title="Report" data-bs-placement="right" data-bs-custom-class="custom-tooltip"/>
          </xsl:when>
          <xsl:when test="report_type = 'Upload'">
            <i class="bi bi-cloud-upload" data-bs-toggle="tooltip" data-bs-title="Upload" data-bs-placement="right" data-bs-custom-class="custom-tooltip"/>
          </xsl:when>
        </xsl:choose>
      </td>
      
      <td class="report_name"><xsl:value-of select="report_name"/></td>
      <td class="report_description"><xsl:value-of select="report_description"/></td>

    </tr>
    
  </xsl:template>

</xsl:stylesheet>
