ed-parsadanyan/models.xsl

## models.xsl
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <head>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"></link>
                <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
                <style>
                    .emoji {
                        font-size: 1.5rem; /* Adjust as needed */
                        line-height: 1.5rem;
                        vertical-align: middle;
                    }
                    .card-header {
                       display: flex;
                       align-items: center;
                    }
                </style>
            </head>
            <body>
                <div class="container py-5">
                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-auto g-4">
                        <xsl:for-each select="Products/Product">
                            <div class="col">
                                <div class="card">
                                    <div class="card-header">
                                        <span class="emoji d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="top" title="{Line}">
                                            <xsl:choose>
                                                <xsl:when test="Line='Motorcycles'">🏍️</xsl:when>
                                                <xsl:when test="Line='Classic Cars'">🚗</xsl:when>
                                                <xsl:when test="Line='Planes'">✈️</xsl:when>
                                                <xsl:when test="Line='Ships'">🚢</xsl:when>
                                                <xsl:when test="Line='Trains'">🚂</xsl:when>
                                                <xsl:when test="Line='Trucks and Buses'">🚚</xsl:when>
                                                <xsl:when test="Line='Vintage Cars'">🏎️</xsl:when>
                                                <xsl:otherwise>🎁</xsl:otherwise>
                                            </xsl:choose>
                                        </span>
                                        <h3 class="mb-0 d-inline-block mr-2"><xsl:value-of select="Code"/></h3>
                                    </div>
                                    <div class="card-body">
                                        <p><strong>Name: </strong> <span class="text-muted"><xsl:value-of select="Name"/></span></p>
                                        <p><strong>Scale: </strong> <span class="text-muted"><xsl:value-of select="Scale"/></span></p>
                                        <p><strong>Price: </strong> <span class="text-muted"><xsl:value-of select="Price"/></span></p>
                                    </div>
                                </div>
                            </div>
                        </xsl:for-each>
                    </div>
                </div>
                <script>
                    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
                    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                      return new bootstrap.Tooltip(tooltipTriggerEl)
                    })
                </script>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>
	<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:template match="/">
	<html>
	<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"></link>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
	<style>
	.emoji {
	font-size: 1.5rem; /* Adjust as needed */
	line-height: 1.5rem;
	vertical-align: middle;
	}
	.card-header {
	display: flex;
	align-items: center;
	}
	</style>
	</head>
	<body>
	<div class="container py-5">
	<div class="row row-cols-1 row-cols-md-2 row-cols-lg-auto g-4">
	<xsl:for-each select="Products/Product">
	<div class="col">
	<div class="card">
	<div class="card-header">
	<span class="emoji d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="top" title="{Line}">
	<xsl:choose>
	<xsl:when test="Line='Motorcycles'">🏍️</xsl:when>
	<xsl:when test="Line='Classic Cars'">🚗</xsl:when>
	<xsl:when test="Line='Planes'">✈️</xsl:when>
	<xsl:when test="Line='Ships'">🚢</xsl:when>
	<xsl:when test="Line='Trains'">🚂</xsl:when>
	<xsl:when test="Line='Trucks and Buses'">🚚</xsl:when>
	<xsl:when test="Line='Vintage Cars'">🏎️</xsl:when>
	<xsl:otherwise>🎁</xsl:otherwise>
	</xsl:choose>
	</span>
	<h3 class="mb-0 d-inline-block mr-2"><xsl:value-of select="Code"/></h3>
	</div>
	<div class="card-body">
	<p><strong>Name: </strong> <span class="text-muted"><xsl:value-of select="Name"/></span></p>
	<p><strong>Scale: </strong> <span class="text-muted"><xsl:value-of select="Scale"/></span></p>
	<p><strong>Price: </strong> <span class="text-muted"><xsl:value-of select="Price"/></span></p>
	</div>
	</div>
	</div>
	</xsl:for-each>
	</div>
	</div>
	<script>
	var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
	var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
	return new bootstrap.Tooltip(tooltipTriggerEl)
	})
	</script>
	</body>
	</html>
	</xsl:template>
	</xsl:stylesheet>