<!--
    view.html: "View" page for who-when-where

    For each users listed under the view, display:
        * Name and profile picture
        * Location (emoji)
        * Availability (green-yellow-red)
    for a certain time period (customisable via the interface).

    Also displays a summary for each day, per location.
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3W - Who When Where?</title>

    <link rel="stylesheet" href="main.css">

    <style>
        table#view_table {
            border-collapse: collapse;
        }
        table#view_table th, table#view_table td {
            padding: 1em 1.2em;
            font-weight: normal;
        }
        table#view_table th:first-child {
            text-align: right;
        }

        table#view_table thead tr, table#view_table tfoot tr {
            background-color: var(--colour_primary);
            color: var(--colour_primary_text);
            text-align: left;
        }
        table#view_table thead th {
            text-align: center;
        }
        table#view_table thead th:first-child {
            font-weight: bold;
        }
        table#view_table thead th.me {
            font-weight: bold;
        }

        table#view_table tbody tr {
            border-bottom: 1px solid #dddddd;
        }
        table#view_table tbody th {
            font-weight: bold;
            text-align: right;
        }
        table#view_table tbody th span {
            font-size: 0.8em;
            font-weight: normal;
        }
        table#view_table tbody tr:nth-of-type(odd) {
            background-color: var(--colour_lightgrey);
        }
        table#view_table tbody tr:nth-of-type(even) {
            background-color: #ffffff;
        }
        table#view_table tbody td.me {
            cursor: pointer;
        }

        table#view_table tbody td {
            text-align: center;
        }

        table#view_table td .where {
            font-size: 2.5em;
            position: relative;
        }
        table#view_table td:has(.modifier) {
            padding-right: 1.55em;
        }


        i.modifier {
            font-style: normal;
            font-size: 0.33em;
            width: 0.33em;
            position: absolute;
            right: 0.33em;
        }
        i.modifier-top {
            top: -0em;
        }
        i.modifier-bottom {
            bottom: -0em;
        }
        i.modifier-cross::before {
            display: block;
            width: 1em;
            position: absolute;
            top: -0.25em;
            text-align: center;

            font-size: 1.5em;
            content: "βœ—";
            color: rgba(255, 0, 0, 0.7);
        }


        table#view_table tfoot {
            font-style: italic;
        }
    </style>
</head>
<body>
    <table id="view_table">
        <thead>
            <tr>
                <th>
                    <!-- Group name -->
                    Les abeilles en test
                </th>
                <!-- For-each group member -->
                <th>Alice</th>
                <th class="me">Moi (Loulou)</th>
                <th>Bob</th>
            </tr>
        </thead>
        <tbody>
            <!-- For-each date -->
            <tr>
                <th>
                    Date #1
                    <br>
                    <span title="1🏠 + 1πŸš…">πŸ‡ΈπŸ‡ͺ 2</span>
                    <span title="1🏠">πŸ—Ό 1</span>
                </th>
                <!-- For-each group member -->
                <td>
                    <span class="where">
                        πŸ—Ό
                    </span>
                </td>

                <td class="me">
                    <span class="where">
                        πŸ‡ΈπŸ‡ͺ
                        <i class="modifier modifier-bottom modifier-cross">πŸš…</i>
                    </span>
                </td>

                <td>
                    <span class="where">
                        πŸ₯¨
                        <i class="modifier modifier-top modifier-cross">🏠</i>
                        <i class="modifier modifier-bottom modifier-cross">πŸš…</i>
                    </span>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>
                    <!-- Total -->
                    3 group members
                </th>
                
                <!-- Colspan = number of members -->
                <th colspan="3"></th>
            </tr>
        </tfoot>
    </table>

    <p>
        So far, this group has planned between 2022-08-01 and 2024-11-25.
    </p>

    <p>
        <a href="index.html">Take me home!</a>
    </p>
</body>
</html>