<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <head>
                <meta charset="utf-8"></meta>
                <title>Page Title</title>
                <meta name="description" content="Die Daten der Welt im Überblick"></meta>
                <meta name="author" content="Michael Hübener und Selina Marie-Alice Schönherr"></meta>
                <meta name="keywords" content="Welt, Daten, Überblick, HTML"></meta>
                <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
                <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css"></link>
                <link rel="stylesheet" type="text/css" media="screen" href="css/main.css"></link>
                <script src="js/table.js"></script>
                <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet"></link>
                <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css"
                    integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
                    crossorigin="anonymous"></link>
            </head>
            <body>
                <h1>World Data Overview ...</h1>
                <div class="table-wrapper">
                    <table id="t02" class="world_table">
                        <thead>
                            <tr>
                                <th onclick="sortTable(0)">
                                    id
                                    <i class="fas fa-chevron-up"></i>
                                    <i class="fas fa-chevron-down"></i>
                                </th>
                                <th onclick="sortTable(1)">
                                    name
                                    <i class="fas fa-chevron-up"></i>
                                    <i class="fas fa-chevron-down"></i>
                                </th>
                                <th onclick="sortTable(2)">
                                    birth rate / 1000
                                    <i class="fas fa-chevron-up"></i>
                                    <i class="fas fa-chevron-down"></i>
                                </th>
                                <th onclick="sortTable(3)">
                                    cell phones / 100
                                    <i class="fas fa-chevron-up"></i>
                                    <i class="fas fa-chevron-down"></i>
                                </th>
                                <th onclick="sortTable(4)">
                                    children / woman
                                    <i class="fas fa-chevron-up"></i>
                                    <i class="fas fa-chevron-down"></i>
                                </th>
                                <th onclick="sortTable(5)">
                                    electricity consumption / capita
                                    <i class="fas fa-chevron-up"></i>
                                    <i class="fas fa-chevron-down"></i>
                                </th>
                                <th onclick="sortTable(6)">
                                    gdp / capita
                                    <i class="fas fa-chevron-up"></i>
                                    <i class="fas fa-chevron-down"></i>
                                </th>
                                <!--
                                <th onclick="sortTable(7)">
                                    gdp / capita growth
                                    <i class="fas fa-chevron-up"></i>
                                    <i class="fas fa-chevron-down"></i>
                                </th>
                                <th onclick="sortTable(8)">
                                    inflation_annual
                                    <i class="fas fa-chevron-up"></i>
                                    <i class="fas fa-chevron-down"></i>
                                </th>
                                <th onclick="sortTable(9)">
                                    internet user / 100
                                    <i class="fas fa-chevron-up"></i>
                                    <i class="fas fa-chevron-down"></i>
                                </th>
                                <th onclick="sortTable(10)">
                                    life expectancy
                                    <i class="fas fa-chevron-up"></i>
                                    <i class="fas fa-chevron-down"></i>
                                </th>
                                <th onclick="sortTable(11)">
                                    military expenditure percent of gdp
                                    <i class="fas fa-chevron-up"></i>
                                    <i class="fas fa-chevron-down"></i>
                                </th>
                                <th onclick="sortTable(12)">
                                    gps lat
                                    <i class="fas fa-chevron-up"></i>
                                    <i class="fas fa-chevron-down"></i>
                                </th>
                                <th onclick="sortTable(13)">
                                    gps long
                                    <i class="fas fa-chevron-up"></i>
                                    <i class="fas fa-chevron-down"></i>
                                </th>
                                -->
                            </tr>
                        </thead>
                        <tbody>
                            <xsl:for-each select="Countries/Country">
                                <tr>
                                    <td><xsl:value-of select="id"/></td>
                                    <td><xsl:value-of select="name"/></td>
                                    <td><xsl:value-of select="birth_rate_per_1000"/></td>
                                    <td><xsl:value-of select="cell_phones_per_100"/></td>
                                    <td><xsl:value-of select="children_per_woman"/></td>
                                    <td><xsl:value-of select="electricity_consumption_per_capita"/></td>
                                    <td><xsl:value-of select="gdp_per_capita"/></td>
                                    <!--
                                    <td><xsl:value-of select="gdp__per__capita__growth"/></td>
                                    <td><xsl:value-of select="inflation_annual"/></td>
                                    <td><xsl:value-of select="internet_user_per_100"/></td>
                                    <td><xsl:value-of select="life_expectancy"/></td>
                                    <td><xsl:value-of select="military_expenditure_percent_of_gdp"/></td>
                                    <td><xsl:value-of select="gps_lat"/></td>
                                    <td><xsl:value-of select="gps_long"/></td>
                                    -->
                                </tr>
                            </xsl:for-each>
                        </tbody>
                    </table>
                </div>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>