realestatedatainc/xsl/setupAlerts.xsl

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

    <!-- Variables --> 

    <xsl:variable name="PAGINATION_COUNT" select="//alerts/@count"/>
    <xsl:variable name="PAGINATION_START" select="//alerts/@start"/>
    <xsl:variable name="PAGINATION_END"   select="//alerts/@end"/>
    <xsl:variable name="PAGINATION_PAGE"  select="//alerts/@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-info-circle 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_alert" id="find_alert" maxlength="100" autocomplete="off" placeholder="{//popovers/record[popover_name = 'find_alert']/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_alert']/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="alerts_per_page" id="alerts_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(//alerts/record) = 0">
          
                            <div class="fs-5 text-danger fw-bold fst-italic mt-3 mb-1">
                                <xsl:text>There are no Alerts 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="alerts-table">
                                    <thead>
                                        <th>Title</th>
                                        <th>Starts</th>
                                        <th>Expires</th>
                                    </thead>
                                    <tbody>
                                        <xsl:apply-templates select="//alerts"/>
                                    </tbody>
                                </table>
                            </div>
            
                        </xsl:otherwise>
            
                    </xsl:choose>
          
                </div>
        
            </div>
      
        </div>
                        
    </xsl:template>

    <!-- Template for table rows -->

    <xsl:template match="alerts/record">
    
        <tr class="hoverable alert-row" data-alert-serial="{alert_serial}" data-alert-name="{alert_title}">
      
            <td class="alert_title">
                <xsl:value-of select="alert_title"/>
            </td>
            <td class="alert_start">
                <xsl:value-of select="alert_started_verbose"/>
            </td>
            <td class="alert_end">
                <xsl:value-of select="alert_expires_verbose"/>
            </td>
            
        </tr>
    
    </xsl:template>

</xsl:stylesheet>