<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" encoding="UTF-8" indent="yes"/>

    <!-- Template to match the root node -->
    <xsl:template match="/">
        <html>
            <head>
                <title><xsl:value-of select="/squad/name"/></title>
                <link rel="stylesheet" type="text/css" href="squad.css"/>
            </head>
            <body>
                <div class="sidebar-left">
                    <div class="hazard-bg hz-left"></div>
                </div>
                <div class="header">
                    <div id="sqd-picture">
                        <img alt="picture: squad logo">
                            <xsl:attribute name="src">
                                <xsl:value-of select="concat(substring-before(/squad/picture,'.paa'),'.png')"/>
                            </xsl:attribute>
                        </img>
                    </div>
                    <div id="sqd-name">
                        <div class="vl"></div>
                        <p><xsl:value-of select="/squad/name"/></p>
                    </div>
                    <fieldset id="sqd-web">
                        <legend>WEBSITE</legend>
                        <a href="{concat('https://', /squad/web)}">
                            <xsl:value-of select="/squad/web"/>
                        </a>
                    </fieldset>
                    <fieldset id="sqd-email">
                        <legend>CONTACT</legend>
                        <a href="{concat('mailto:', /squad/email)}">
                            <xsl:value-of select="/squad/email"/>
                        </a>
                    </fieldset>
                </div>
                <div class="members">
          <table class="member_info">
            <tr class='table-header' style="pointer-events:none">
                            <th id="table-members"><p>NAME:</p></th>
                            <th id="table-icq"><p>DISCORD:</p></th>
                            <th id="table-remarks"><p>REMARKS:</p></th>
                            <!-- <th id="table-email"><p>EMAIL:</p></th> -->
            </tr>
            <xsl:for-each select="/squad/member">
            <tr class="table-rows">
              <td class="member_name">
                <xsl:value-of select="name"/>
              </td>
                            <td class="member_icq">
                <xsl:value-of select="icq"/>
              </td>
              <td class="member_remark">
                <xsl:value-of select="remark"/>
              </td>
              <!-- <td class="member_email">
                <xsl:value-of select="email"/>
              </td> -->
            </tr>
            </xsl:for-each>
          </table>
                </div>
                <div class="sidebar-right">
                    <div class="hazard-bg hz-right"></div>
                </div>
            </body>
        </html>
    </xsl:template>

    <!-- Default template to match all elements -->
    <xsl:template match="*">
        <xsl:apply-templates/>
    </xsl:template>
</xsl:stylesheet>