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

  <!-- 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-caret-down-square me-2"/>
          <xsl:value-of select="$PAGE-TITLE"/>
        </div>
        
        <div class="card-body ps-1 pe-1">
          
          <div class="buttons ms-2 mt-1">
            
            <button type="button" class="btn btn-sm btn-primary me-2 btnDone"><i class="bi bi-box-arrow-left me-2"/>Done</button>
            
          </div>

          <hr class="mt-3 mb-3"/> 
          
          <xsl:choose>
            
            <xsl:when test="count(//dropdowntypes/record) = 0">
              <div class="fs-5 text-danger fw-bold fst-italic m-2">
                <xsl:text>There are no Dropdowns defined...</xsl:text>
              </div>
            </xsl:when>
            
            <xsl:otherwise>
              
              <div id="dropdown-accordion">
            
                <xsl:apply-templates select="//dropdowntypes"/>
                
              </div>
              
            </xsl:otherwise>
            
          </xsl:choose>
          
        </div>
        
      </div>
      
    </div>
                        
  </xsl:template>

  <!-- Create Dropdown Accordions -->
  
  <xsl:template match="dropdowntypes/record">

    <xsl:variable name="DROPDOWNTYPE_SERIAL" select="dropdowntype_serial"/> 
    
    <div class="card dropdowntype-card border-0">
      
      <div class="card-header collapsed dropdowntype-card-header text-truncate border-0 bg-transparent p-0 ps-2" role="button" data-bs-toggle="collapse" data-bs-target="#C-{position()}" aria-expanded="false" aria-controls="C-{position()}">
        <i class="bi bi-caret-right-fill caret-toggle me-2"/>
        <xsl:value-of select="dropdowntype_title"/>
      </div>

      <div id="C-{position()}" class="collapse" data-bs-parent="#dropdown-accordion">

        <div class="card-body border mt-2 mb-2 pt-1 ms-3 me-3">
          
          <xsl:choose>
            
            <xsl:when test="count(//dropdowns/record[dropdown_dropdowntype = $DROPDOWNTYPE_SERIAL]) = 0">
              <div class="fs-6 text-danger fw-bold fst-italic m-2 ms-0">
                <xsl:text>There are no Dropdowns defined...</xsl:text>
              </div>
            </xsl:when>
            
            <xsl:otherwise>

              <div class="table-responsive table-wrapper scrollable mt-2">

                <table class="table table-sm table-striped table-hover base-table table-auto dropdown-table" id="dropdown-{position()}-table">

                  <thead>
                    <th class="text-center pe-3">Default</th>
                    <th class="text-center pe-3">Active</th>
                    <th>Value</th>
                  </thead>

                  <tbody>

                    <xsl:for-each select="//dropdowns/record[dropdown_dropdowntype = $DROPDOWNTYPE_SERIAL]">

                      <tr class="text-nowrap hoverable dropdown-row" data-dropdown-serial="{dropdown_serial}" data-dropdown-value="{dropdown_value}" data-dropdown-dropdowntype="{dropdown_dropdowntype}">

                        <td class="checkbox text-center dropdown_default pe-3">
                          <input class="form-check-input fs-6 dropdown_default align-middle mb-1" type="checkbox" name="dropdown_default" value="true">
                            <xsl:if test="boolean(number(dropdown_default)) = true()">
                              <xsl:attribute name="checked"/>
                            </xsl:if>
                          </input>
                        </td>

                        <td class="checkbox text-center dropdown_active pe-3">
                          <input class="form-check-input fs-6 dropdown_active align-middle mb-1" type="checkbox" name="dropdown_active" data-dropdown-serial="{dropdown_serial}" value="true">
                            <xsl:if test="boolean(number(dropdown_active)) = true()">
                              <xsl:attribute name="checked"/>
                            </xsl:if>
                          </input>
                        </td>
                        
                        <td class="dropdown_value align-middle"><xsl:value-of select="dropdown_value"/></td>

                      </tr>

                    </xsl:for-each>

                  </tbody>

                </table>

              </div>
              
            </xsl:otherwise>
            
          </xsl:choose>
          
          <div class="buttons ms-0 mt-3">
            <button type="button" class="btn btn-sm btn-primary me-2 btnAdd" data-dropdowntype-serial="{dropdowntype_serial}"><i class="bi bi-plus-lg me-1"/>Add</button>
          </div>
          
        </div>

      </div>

    </div>
    
  </xsl:template>

</xsl:stylesheet>
