{% extends "strava/base.html" %}

{% block title %}
<title>{{ activity.name }}</title>
{% endblock %}

{% block body %}
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th -->
<style media="screen">
    td,
th {
    border: 1px solid rgb(190, 190, 190);
    padding: 10px;
}

td {
    text-align: center;
}

tr:nth-child(even) {
    background-color: #eee;
}

th[scope="col"] {
    background-color: #696969;
    color: #fff;
}

th[scope="row"] {
    background-color: #d7d9f2;
}

caption {
    padding: 10px;
    caption-side: bottom;
}

table {
    border-collapse: collapse;
    border: 2px solid rgb(200, 200, 200);
    letter-spacing: 1px;
    font-family: sans-serif;
    font-size: .8rem;
}
</style>
        <h1>
            {{ activity.name }}
        </h1>

<table>

        <thead>
            <tr>
                <th colspan="1">Field</th>
                <th colspan="1">Value</th>
            </tr>
        </thead>
        <tbody>
            {% for field, value in activity_dict.items %}
            <tr>
                <td>{{ field }}</td>
                <td>{{ value }}</td>
            </tr>
            {% endfor%}
        </tbody>
</table>
        <p>
            <a href="{% url 'home' %}" id="home">Back to dashboard</a>.
        </p>

{% endblock %}