<?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 method="html" omit-xml-declaration="yes" encoding="UTF-8" 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>
                    /* Container: Use flex to align verse number and text */
                    p.verse {
                        display: flex;
                        align-items: flex-start;
                        padding-left: 1em;
                        margin: 0;
                        line-height: 1.4;
                        word-wrap: break-word; /* Allow long words to break */
                        position: relative;
                    }
                    
                    /* Verse number: Fixed width, right-aligned, no negative padding */
                    .verse-nr {
                        color: #808080;
                        font-weight: bold;
                        margin-right: 0.5em;
                        width: 2.5em; /* Adjust to fit "1:1" or "10:1" */
                        text-align: right;
                        white-space: nowrap;
                    }
                    
                    /* Verse text: Takes remaining space, wraps normally */
                    span.verse-text {
                        flex: 1; /* Takes available space */
                        white-space: normal;
                        word-break: break-word;
                    }
                    
                    /* Hidden verse ID (will appear on hover) */
                    span.verse-id {
                        display: none;
                        color: #6d01a9;
                        margin: 0 1em 0 1em;
                        white-space: nowrap;
                    }
                    
                    
                    
                    
                    div.chapter {
                        margin: 2em 0 0 0;
                        padding: 2em 0;
                        border-bottom: 2px solid #e0e0e0;
                        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.09);
                    }
                    
                    
                    div.chapter:last-child {
                        border-bottom: none; /* Remove line from last div */
                    }
                    
                    ul.metadata {
                        padding: 0 0 0 2em !important;
                        list-style: disc !important;
                    }
                    
                    
                    
                    
                    
                    .verse-id {
                        color: #9E9E9E
                    }
                    
                    .rs {
                        position: relative;
                        display: inline-block; /* Ensures it behaves well in text flow */
                        cursor: pointer;
                    }
                    
                    
                    .q {
                        position: relative;
                        display: inline-block; /* Ensures it behaves well in text flow */
                        cursor: pointer;
                    }
                    
                    
                    
                    .q-info,
                    .key_rs {
                        display: none
                    }
                    
                    
                    .key_rs:before
                    {
                        content: " ID: "
                    }
                    
                    /* On hover, show the floating bubble */
                    .rs:hover .key_rs,
                    .q:hover .q-info {
                        display: block;
                        position: absolute;
                        top: -2em; /* Above the .rs element */
                        transform: translateX(-50%); /* Centers the tooltip exactly under the .rs */
                        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);
                    }
                    
                    .q:hover .q .q-info {
                        top: -4em;
                    }
                    
                    .q:hover .q .q .q-info {
                        top: -6em;
                    }
                    
                    .q:hover .q .q .q .q-info {
                        top: -8em;
                    }
                    
                    .rs .reference {
                        display: inline-block; /* Allows border around text */
                        border: 1px solid gray;
                    }
                    
                    
                    .pla .reference {
                        text-decoration: underline;
                    }
                    
                    .per .reference {
                    }
                    
                    .org .reference {
                        font-weight: bold;
                    }
                    
                    
                    
                    .tim .reference {
                        font-style: italic;
                    }
                    
                    .verse-text .q,
                    .verse-text .q .q {
                        color: black;
                    }
                    .verse-text .q .q .q,
                    .verse-text .q .q .q .q,
                    .verse-text .q .q .q .q .q {
                        color: white;
                    }
                    
                    /*                    
                    .q {background-color: #FFE0B2}
                    .q .q {background-color: #FFB74D}
                    .q  .q  .q  {background-color: #FF9800}
                    .q  .q  .q  .q  {background-color: #F57C00}
                    .q  .q  .q  .q .q  {background-color: #E65100}
                    */
                    
                    .oral {
                        background-color: #edd6f5
                    }
                    .q .oral {
                        background-color: #d198e6
                    }
                    .q .q .oral {
                        background-color: #bf6fdc
                    }
                    .q .q .q .oral {
                        background-color: #a432cd
                    }
                    .q .q .q .q .oral {
                        background-color: #8328a4
                    }
                    
                    .prayer {
                        background-color: #f5ded6
                    }
                    .q .prayer {
                        background-color: #e6ac98
                    }
                    .q .q .prayer {
                        background-color: #dc8b6f
                    }
                    .q .q .q .prayer {
                        background-color: #cd5932
                    }
                    .q .q .q .q .prayer {
                        background-color: #a44728
                    }
                    
                    
                    .idea {
                        background-color: #BBDEFB
                    }
                    .q .idea {
                        background-color: #64B5F6
                    }
                    .q .q .idea {
                        background-color: #2196F3
                    }
                    .q .q .q .idea {
                        background-color: #1976D2
                    }
                    .q .q .q .q .idea {
                        background-color: #0D47A1
                    }
                    
                    .written {
                        background-color: #d6eef5
                    }
                    .q .written {
                        background-color: #98d4e6
                    }
                    .q .q .written {
                        background-color: #6fc3dc
                    }
                    .q .q .q .written {
                        background-color: #32a9cd
                    }
                    .q .q .q .q .written {
                        background-color: #2887a4
                    }
                    
                    
                    .soCalled {
                        background-color: #def5d6
                    }
                    .q .soCalled {
                        background-color: #ade698
                    }
                    .q .q .soCalled {
                        background-color: #8cdc6f
                    }
                    .q .q .q .soCalled {
                        background-color: #5bcd32
                    }
                    .q .q .q .q .soCalled {
                        background-color: #49a428
                    }
                    
                    
                    .song {
                        background-color: #fff5cc
                    }
                    .q .song {
                        background-color: #ffe680
                    }
                    .q .q .song {
                        background-color: #ffdb4d
                    }
                    .q .q .q .song {
                        background-color: #ffcc00
                    }
                    .q .q .q .q .song {
                        background-color: #cca300
                    }
                    
                    
                    
                    .per14 .q-text, .per1 .q-text {
                        font-variant: small-caps;
                    }</style>
            </head>
            <body>
                <xsl:apply-templates select="./node()"/>
            </body>
        </html>
    </xsl:template>




    <xsl:template match="tei:teiHeader">
        <h2>Metadata</h2>
        <ul class="metadata">
            <li>
                <xsl:value-of
                    select="./tei:fileDesc/tei:sourceDesc/tei:bibl[@type = 'work']/tei:title"/>
                    (<xsl:value-of select="substring(./../tei:text/tei:body/tei:div/@xml:id, 3)"/>) </li>
            <li> Language: <xsl:value-of
                    select="./tei:profileDesc/tei:langUsage/tei:language/text()"/>
            </li>
            <li>
                <xsl:value-of
                    select="./tei:fileDesc/tei:sourceDesc/tei:bibl[@type = 'print-source']/tei:date"
                />
            </li>
            <li> Work's Wikidata-ID: <xsl:element name="a">
                    <xsl:attribute name="target">_blank</xsl:attribute>
                    <xsl:attribute name="href"><xsl:value-of
                            select="./tei:fileDesc/tei:sourceDesc/tei:bibl/tei:idno[@type = 'wikidata']/@corresp"
                        /></xsl:attribute>
                    <xsl:value-of
                        select="./tei:fileDesc/tei:sourceDesc/tei:bibl/tei:idno[@type = 'wikidata']"
                    />
                </xsl:element>
            </li>
            <li> Work's GND-ID: <xsl:element name="a">
                    <xsl:attribute name="target">_blank</xsl:attribute>
                    <xsl:attribute name="href"><xsl:value-of
                            select="./tei:fileDesc/tei:sourceDesc/tei:bibl/tei:idno[@type = 'gnd']/@corresp"
                        /></xsl:attribute>
                    <xsl:value-of
                        select="./tei:fileDesc/tei:sourceDesc/tei:bibl/tei:idno[@type = 'gnd']"/>
                </xsl:element>
            </li>
            <li>
                <xsl:element name="a">
                    <xsl:attribute name="target">_blank</xsl:attribute>
                    <xsl:attribute name="href"
                        >https://wiki.k10plus.de/spaces/K10PLUS/pages/437452809</xsl:attribute>
                    Basic Classification: </xsl:element>

                <xsl:value-of
                    select="./tei:profileDesc/tei:textClass/tei:keywords[@scheme = 'http://uri.gbv.de/terminology/bk/']/tei:term[2]/@key"/>
                <xsl:text> </xsl:text>
                <xsl:value-of
                    select="./tei:profileDesc/tei:textClass/tei:keywords[@scheme = 'http://uri.gbv.de/terminology/bk/']/tei:term[2]"
                />
            </li>

            <li> Testament (GND): <xsl:element name="a">
                    <xsl:attribute name="target">_blank</xsl:attribute>
                    <xsl:attribute name="href"><xsl:value-of
                            select="./tei:profileDesc/tei:textClass/tei:keywords[@scheme = 'https://d-nb.info/gnd/']/tei:term[@type = 'testament']/@ref"
                        /></xsl:attribute> <xsl:value-of
                        select="./tei:profileDesc/tei:textClass/tei:keywords[@scheme = 'https://d-nb.info/gnd/']/tei:term[@type = 'testament']"
                    />
                </xsl:element>
            </li>
            <li> Part (GND): <xsl:element name="a">
                    <xsl:attribute name="target">_blank</xsl:attribute>
                    <xsl:attribute name="href"><xsl:value-of
                            select="./tei:profileDesc/tei:textClass/tei:keywords[@scheme = 'https://d-nb.info/gnd/']/tei:term[@type = 'part']/@ref"
                        /></xsl:attribute> <xsl:value-of
                        select="./tei:profileDesc/tei:textClass/tei:keywords[@scheme = 'https://d-nb.info/gnd/']/tei:term[@type = 'part']"
                    />
                </xsl:element>
            </li>
        </ul>

        <h1>
            <xsl:value-of
                select="/tei:TEI/tei:teiHeader[1]/tei:fileDesc[1]/tei:titleStmt[1]/tei:title[1]"/>
        </h1>
    </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="id">
                <xsl:value-of select="./@xml:id"/>
            </xsl:attribute>
            <span class="verse-nr">
                <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-id">
                <xsl:value-of select="string(./@xml:id)"/>
            </span>

            <span class="verse-text">
                <xsl:apply-templates/>
            </span>
        </xsl:element>
    </xsl:template>






    <xsl:template match="tei:div[@type = 'chapter']">
        <xsl:element name="div">
            <xsl:attribute name="class">
                <xsl:value-of select="./@type"/>
            </xsl:attribute>
            <xsl:attribute name="xml:id">
                <xsl:value-of select="./@xml:id"/>
            </xsl:attribute>
            <xsl:apply-templates/>
        </xsl:element>
    </xsl:template>


    <xsl:template match="tei:div[@type = 'chapter']">
        <h2 >Capítulo <xsl:value-of select="string(./@n)"/></h2>
        <xsl:apply-templates/>
    </xsl:template>

    <xsl:template match="tei:head[@type = 'pericope']">
        <h3>
            <xsl:apply-templates/>
        </h3>
    </xsl:template>





    <xsl:template match="tei:rs[contains(@key, 'per')]">
        <span class="rs per">
            <span class="key_rs">
                <xsl:value-of select="./@key"/>
            </span>
            <span class="rs reference">
                <xsl:apply-templates/>
            </span>
        </span>
    </xsl:template>

    <xsl:template match="tei:rs[contains(@key, 'pla')]">
        <span class="rs pla">
            <span class="key_rs">
                <xsl:value-of select="./@key"/>
            </span>
            <span class="rs reference">
                <xsl:apply-templates/>
            </span>
        </span>
    </xsl:template>


    <xsl:template match="tei:rs[contains(@key, 'org')]">
        <span class="rs org">
            <span class="key_rs">
                <xsl:value-of select="./@key"/>
            </span>
            <span class="rs reference">
                <xsl:apply-templates/>
            </span>
        </span>
    </xsl:template>

    <xsl:template match="tei:rs[contains(@key, 'tim')]">
        <span class="rs tim">
            <span class="key_rs">
                <xsl:value-of select="./@key"/>
            </span>
            <span class="rs reference">
                <xsl:apply-templates/>
            </span>
        </span>
    </xsl:template>

    <xsl:template match="tei:text//tei:q">
        <xsl:element name="span">
            <xsl:attribute name="class">q <xsl:value-of select="./@type"
                    /><xsl:text> </xsl:text><xsl:value-of select="substring(./@who, 2)"
                /></xsl:attribute>
            <span class="q-info">Who? <xsl:value-of select="./@who"/>. With whom? <xsl:value-of
                    select="./@toWhom"/>. How? <xsl:value-of select="./@type"/>.</span>
            <span class="q-text">
                <xsl:apply-templates/>
            </span>
        </xsl:element>
    </xsl:template>

    <xsl:template match="node() | @*">
        <xsl:copy>
            <xsl:apply-templates/>
        </xsl:copy>
    </xsl:template>



    <xsl:template
        match="tei:body | tei:back | tei:front | tei:text | tei:back/tei:div | tei:front/tei:div | tei:head">
        <xsl:apply-templates/>
    </xsl:template>



</xsl:stylesheet>
