@page "/allergene"

<PageTitle>Allergene</PageTitle>

<style type="text/css"> 
    .tg {
        border-collapse: collapse;
        border-spacing: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .tg td {
        border-color: black;
        border-style: solid;
        border-width: 1px;
        font-family: Arial, sans-serif;
        font-size: 18px;
        overflow: hidden;
        padding: 10px 5px;
        word-break: normal;
    }

    .tg th {
        border-color: black;
        border-style: solid;
        border-width: 1px;
        font-family: Arial, sans-serif;
        font-size: 18px;
        font-weight: normal;
        overflow: hidden;
        padding: 10px 5px;
        word-break: normal;
    }

    .tg .tg-c3ow { 
        border-color: inherit;
        text-align: center;
        vertical-align: center;
    }

    .tg .tg-0pky {
        border-color: inherit;
        text-align: center;
        vertical-align: center;
    }

    .icon {
        width: 100%;
        max-width: 100px;
        height: auto;
    }
</style>

//TODO: Make css tag names more readable

<table class="tg">
    <thead>
        <tr>
            <th class="tg-c3ow" colspan="3">Allergeninformation<br>gemäß Codex-Empfehlung </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="tg-0pky">Visuelles</td>
            <td class="tg-0pky">Kurzbezeichnung</td>
            <td class="tg-0pky">Buchstabencode</td>
        </tr>
        <tr>
            <td class="tg-0pky"><img class="icon" src="assets/getreide.png" alt="Getreide"></td>
            <td class="tg-0pky">glutenhaltiges Getreide</td>
            <td class="tg-c3ow">A</td>
        </tr>
        <tr>
            <td class="tg-0pky"><img class="icon" src="assets/krebstiere.png" alt="Krebstiere"></td>
            <td class="tg-0pky">Krebstiere</td>
            <td class="tg-c3ow">B</td>
        </tr>
        <tr>
            <td class="tg-0pky"><img class="icon" src="assets/ei.png" alt="Ei"></td>
            <td class="tg-0pky">Ei</td>
            <td class="tg-c3ow">C</td>
        </tr>
        <tr>
            <td class="tg-0pky"><img class="icon" src="assets/fisch.png" alt="Fisch"></td>
            <td class="tg-0pky">Fisch</td>
            <td class="tg-c3ow">D</td>
        </tr>
        <tr>
            <td class="tg-0pky"><img class="icon" src="assets/erdnuss.png" alt="Erdnuss"></td>
            <td class="tg-0pky">Erdnuss</td>
            <td class="tg-c3ow">E</td>
        </tr>
        <tr>
            <td class="tg-0pky"><img class="icon" src="assets/soja.png" alt="Soja"></td>
            <td class="tg-0pky">Soja</td>
            <td class="tg-c3ow">F</td>
        </tr>
        <tr>
            <td class="tg-0pky"><img class="icon" src="assets/milch.png" alt="Milch oder Laktose"></td>
            <td class="tg-0pky">Milch oder Laktose</td>
            <td class="tg-c3ow">G</td>
        </tr>
        <tr>
            <td class="tg-0pky"><img class="icon" src="assets/schalenfruechte.png" alt="Schalenfrüchte"></td>
            <td class="tg-0pky">Schalenfrüchte</td>
            <td class="tg-c3ow">H</td>
        </tr>
        <tr>
            <td class="tg-0pky"><img class="icon" src="assets/sellerie.png" alt="Sellerie"></td>
            <td class="tg-0pky">Sellerie</td>
            <td class="tg-c3ow">L</td>
        </tr>
        <tr>
            <td class="tg-0pky"><img class="icon" src="assets/senf.png" alt="Senf"></td>
            <td class="tg-0pky">Senf</td>
            <td class="tg-c3ow">M</td>
        </tr>
        <tr>
            <td class="tg-0pky"><img class="icon" src="assets/sesam.png" alt="Sesam"></td>
            <td class="tg-0pky">Sesam</td>
            <td class="tg-c3ow">N</td>
        </tr>
        <tr>
            <td class="tg-0pky"><img class="icon" src="assets/sulfite.png" alt="Sulfite"></td>
            <td class="tg-0pky">Sulfite</td>
            <td class="tg-c3ow">O</td>
        </tr>
        <tr>
            <td class="tg-0pky"><img class="icon" src="assets/lupinen.png" alt="Lupinen"></td>
            <td class="tg-0pky">Lupinen</td>
            <td class="tg-c3ow">P</td>
        </tr>
        <tr>
            <td class="tg-0pky"><img class="icon" src="assets/weichtiere.png" alt="Weichtiere"></td>
            <td class="tg-0pky">Weichtiere</td>
            <td class="tg-c3ow">R</td>
        </tr>
    </tbody>
</table>