<?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">Popovers</xsl:param>
  <xsl:param name="PAGE-NAME">setupPopovers</xsl:param>

  <!-- Variables --> 

  <xsl:variable name="PAGINATION_COUNT" select="//popovers/@count"/>
  <xsl:variable name="PAGINATION_START" select="//popovers/@start"/>
  <xsl:variable name="PAGINATION_END"   select="//popovers/@end"/>
  <xsl:variable name="PAGINATION_PAGE"  select="//popovers/@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-chat-square-dots 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-lg-4">
              <div class="input-group input-group-sm">
                <input type="text" class="form-control autosave" name="find_popover" id="find_popover" maxlength="100" autocomplete="off" placeholder="{//popovers/record[popover_name = 'find_popover']/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 = 'find_popover']/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="popovers_per_page" id="popovers_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>
 
          <!-- Action Buttons --> 

          <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>
            <button type="button" class="btn btn-sm btn-primary me-2 btnAdd"><i class="bi bi-plus-lg me-2"/>Add</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(//popovers/record) = 0">
          
              <div class="fs-5 text-danger fw-bold fst-italic mt-3 mb-1">
                <xsl:text>There are no Popovers to view...</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="popovers-table">
                  <thead>
                    <th>Name</th>
                    <th>Title</th>
                    <th>Placeholder</th>
                  </thead>
                  <tbody>
                    <xsl:apply-templates select="//popovers"/>
                  </tbody>
                </table>
              </div>
            
            </xsl:otherwise>
            
          </xsl:choose>
          
        </div>
        
      </div>
      
    </div>
                        
  </xsl:template>

  <!-- Template for table rows -->

  <xsl:template match="popovers/record">
    
    <tr class="hoverable popover-row" data-popover-serial="{popover_serial}" data-popover-name="{popover_name}">
      
      <td class="popover_name"><xsl:value-of select="popover_name"/></td>
      <td class="popover_title"><xsl:value-of select="popover_title"/></td>
      <td class="popover_placeholder"><xsl:value-of select="popover_placeholder"/></td>

    </tr>
    
  </xsl:template>

</xsl:stylesheet>
