<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:tei="http://www.tei-c.org/ns/1.0" xmlns:xhtml="https://www.w3.org/1999/xhtml/" exclude-result-prefixes="xs tei xhtml xsl" version="2.0">
    <xsl:output encoding="utf-8" method="xhtml" indent="yes"/>
    
    
    <xsl:template match="/tei:TEI">
        <html>
            <head>
                <title>
                    <xsl:value-of select="/tei:TEI/tei:teiHeader[1]/tei:fileDesc[1]/tei:titleStmt[1]/tei:title[1]"/>
                </title>
                <style>
                    div.body {
                        padding: 1em;
                    }

                    div.lg {
                        padding: 0.5em 0 0 0.5em;
                    }
                    
                    
                    p.verse {
                        padding: 0;
                        margin:0;
                        position: relative;
                        display: block; /* Ensure it's a block-level container */
                        }



                    span.verse-text {
                        padding: 0 0 0 1em;
                    }

                    span.verse-id {
                    padding: 0 0 0 -1em;
                    color: #808080; /* or #808080, rgb(128,128,128), etc. */
                    }
                    
                    /* Hide the metric info by default */
                    span.met {
                    display: none;
                    }
                    
                    /* On hover, show the floating bubble */
                    p:hover span.met {
                    display: block;
                    position: absolute;
                    top: -2em;
                    left: 0;
                    background: #333;
                    color: #fff;
                    font-size: 0.8em;
                    padding: 2px 6px;
                    border-radius: 4px;
                    white-space: nowrap;
                    z-index: 100;
                    border: 1px solid #555;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
                    }
                    
                </style>
            </head>
            <body>
               
                <h1><xsl:value-of select="//tei:text//tei:head"/></h1>
                <h2><xsl:value-of select="/tei:TEI//tei:sourceDesc[1]/tei:bibl[1]/tei:author"/></h2>
                
                <xsl:apply-templates select=".//tei:body/node()"/>
            </body>
        </html>
    </xsl:template>
    
    
    
    
    <xsl:template match="tei:text//tei:ab">
        <xsl:element name="p">
            <xsl:attribute name="class"><xsl:value-of select="./@type"/></xsl:attribute>
            <xsl:attribute name="xml:id"><xsl:value-of select="./@xml:id"/></xsl:attribute>
            <span class="verse-id" >
                <xsl:variable name="parts" select="tokenize(./@xml:id, '\.')"/>
                <!-- Remove leading zeros from chapter (parts[3]) and verse (parts[4]) -->
                <xsl:value-of select="concat(
                    number($parts[3]), 
                    ':', 
                    number($parts[4])
                    )"/>
            </span>
            <span class="verse-text">
                <xsl:apply-templates/>
            </span>
        </xsl:element>
    </xsl:template>
    
    
    
    
    <xsl:template match="tei:text//tei:head">
    </xsl:template>
    

    <xsl:template match="tei:text//tei:body">
        <xsl:element name="div">
            <xsl:attribute name="class">body</xsl:attribute>
            <xsl:apply-templates/>
        </xsl:element>       
    </xsl:template>
    
    
    <xsl:template match="tei:text//tei:lg">
        <xsl:element name="div">
            <xsl:attribute name="class">lg <xsl:value-of select="./@type"/></xsl:attribute>
            <xsl:apply-templates/>
        </xsl:element>
    </xsl:template>
    
    
    <xsl:template match="tei:text//tei:l">
        <xsl:element name="p">
            <xsl:attribute name="class">verse</xsl:attribute>
            
            <span class="verse-id">
                <xsl:value-of select="string(./@n)"/>
            </span>
            
            <span class="met">
                <xsl:variable name="met" select="./@met" />
                <xsl:variable name="positions" as="xs:string*">
                    <xsl:for-each select="1 to string-length($met)">
                        <xsl:variable name="pos" select="." />
                        <xsl:variable name="char" select="substring($met, $pos, 1)" />
                        <xsl:if test="$char = '+'">
                            <xsl:value-of select="string($pos)" />
                        </xsl:if>
                    </xsl:for-each>
                </xsl:variable>
                
                <xsl:value-of select="string-join($positions, '-')" />
            </span>
            
            <span class="verse-text">
                <xsl:apply-templates/>
            </span>
        </xsl:element>
    </xsl:template>
    

    
    
    
    
    
</xsl:stylesheet>
