<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:exslt="http://exslt.org/common">

    <xsl:template name="uiDropdown">
        <xsl:param name="items"/>
        <xsl:param name="name"/>
        <xsl:param name="active"/>
        <xsl:param name="disabled" select="'false'"/>
        <xsl:param name="id"/>
        <xsl:param name="className"/>
        <xsl:param name="selectClassName"/>
        <xsl:param name="type" select="'default'"/>
        <xsl:param name="align" select="'center'"/>
        <xsl:param name="caption" select="''"/>
        <xsl:param name="captionNode" select="''"/>
        <xsl:param name="onChange" select="''"/>
        <xsl:param name="renderIndependent" select="'false'"/>
        <xsl:param name="autoSubmit" select="'false'"/>
        <xsl:param name="icon" select="''"/>
        <xsl:param name="hideArrow" select="'false'"/>

        <label class="Dropdown-wrapper {$className}">
            <xsl:if test="$renderIndependent = 'true'">
                <xsl:attribute name="data-render-independent">
                    <xsl:text>true</xsl:text>
                </xsl:attribute>
            </xsl:if>
            <xsl:if test="$autoSubmit = 'true'">
                <xsl:attribute name="data-auto-submit">
                    <xsl:text>true</xsl:text>
                </xsl:attribute>
            </xsl:if>
            <xsl:attribute name="data-align">
                <xsl:value-of select="$align" />
            </xsl:attribute>
            <select class="Dropdown-select-node {$selectClassName}" name="{$name}" id="{$id}">
                <xsl:if test="$onChange != ''">
                    <xsl:attribute name="onchange">
                        <xsl:value-of select="$onChange" />
                    </xsl:attribute>
                </xsl:if>
                <xsl:if test="$disabled = 'true'">
                    <xsl:attribute name="disabled">disabled</xsl:attribute>
                </xsl:if>
                <xsl:for-each select="exslt:node-set($items)//mapEntry">
                    <option class="Dropdown-select-option" value="{value}">
                        <xsl:if test="$active = value or selected = 'true'">
                            <xsl:attribute name="selected">selected</xsl:attribute>
                        </xsl:if>
                        <xsl:if test="disabled = 'true'">
                            <xsl:attribute name="data-disabled">true</xsl:attribute>
                        </xsl:if>
                        <xsl:if test="separated = 'true'">
                            <xsl:attribute name="data-separated">true</xsl:attribute>
                        </xsl:if>
                        <xsl:if test="custom = 'true'">
                            <xsl:attribute name="data-custom">true</xsl:attribute>
                        </xsl:if>
                        <xsl:for-each select="dataAttrs/attr">
                            <xsl:attribute name="{name}">
                                <xsl:value-of select="value" />
                            </xsl:attribute>
                        </xsl:for-each>

                        <xsl:value-of select="name"/>
                    </option>
                </xsl:for-each>
            </select>
            <div>
                <xsl:attribute name="class">
                    <xsl:text>Dropdown Dropdown-type-</xsl:text><xsl:value-of select="$type"/>
                    <xsl:text> Dropdown-align-</xsl:text><xsl:value-of select="$align"/>
                    <xsl:if test="$hideArrow = 'true'">
                        <xsl:text> Dropdown-hidden-arrow</xsl:text>
                    </xsl:if>
                </xsl:attribute>
                <div class="Dropdown-trigger">
                    <xsl:if test="$icon">
                        <span class="Button-icon-wrapper Button-icon-wrapper-left">
                            <xsl:call-template name="icon">
                                <xsl:with-param name="type" select="$icon" />
                            </xsl:call-template>
                        </span>
                    </xsl:if>

                    <xsl:choose>
                        <xsl:when test="$captionNode">
                            <div class="Dropdown-content-static">
                                <div class="Dropdown-content-text-static">
                                    <xsl:copy-of select="$captionNode" />
                                </div>
                            </div>
                        </xsl:when>
                        <xsl:when test="$caption = ''">
                            <span class="Dropdown-content">
                                <span class="Dropdown-content-text">
                                    <xsl:for-each select="exslt:node-set($items)//mapEntry">
                                        <xsl:if test="$active = value or selected = 'true'">
                                            <xsl:value-of select="name"/>
                                        </xsl:if>
                                    </xsl:for-each>
                                </span>
                            </span>
                        </xsl:when>
                        <xsl:otherwise>
                            <span class="Dropdown-content-static">
                                <span class="Dropdown-content-text-static">
                                    <xsl:value-of select="$caption"/>
                                </span>
                            </span>
                        </xsl:otherwise>
                    </xsl:choose>
                    <xsl:if test="$hideArrow != 'true'">
                        <span class="Dropdown-icon-wrapper">
                            <span class="Dropdown-icon">
                                <xsl:call-template name="icon">
                                    <xsl:with-param name="type" select="'arrow-down'" />
                                </xsl:call-template>
                            </span>
                        </span>
                    </xsl:if>
                </div>
            </div>
        </label>
    </xsl:template>

</xsl:stylesheet>
