{% extends "datavis/index.html" %} {% block content %}
<main>
    <article>
        <h1>Summary</h1>
        <table
            class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
        >
            <thead
                class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
            >
                <tr>
                    <th scope="col" class="px-6 py-3">Measurement Time</th>
                    <th scope="col" class="px-6 py-3">Device ID</th>
                    <th scope="col" class="px-6 py-3">Temperature (18")</th>
                    <th scope="col" class="px-6 py-3">Temperature (36")</th>
                    <th scope="col" class="px-6 py-3">Battery Voltage</th>
                </tr>
            </thead>
            <tbody class="">
                {% for measurement in measurements %}
                <tr
                    class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600"
                >
                    <td
                        class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                    >
                        {{measurement.received_time}}
                    </td>
                    <td class="px-6 py-4">{{measurement.device_id}}</td>
                    <td class="px-6 py-4">{{measurement.temp18}} C</td>
                    <td class="px-6 py-4">
                        {{measurement.ambient_temperature}} C
                    </td>
                    <td class="px-6 py-4">{{measurement.battery_voltage}}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </article>
    <article>
        <h1>Graphics</h1>
        <section>
            <svg viewBox="0 0 500 500">
                <rect x="0" width="500" y="0" height="500" fill="#aaa" />
            </svg>
        </section>
    </article>
</main>
{% endblock content %}
