introduce tabbars to the profile

9 files changed, 195 insertions, 130 deletions

diff --git a/asset-sources/theme.scss b/asset-sources/theme.scss
index 610e688..20708f3 100644
--- a/asset-sources/theme.scss
+++ b/asset-sources/theme.scss
@@ -156,6 +156,10 @@ strong {
   width: 25%;
 }
 
+.chart-title {
+  text-align: center;
+}
+
 .list-group.list-group-root {
   padding: 0;
   overflow: hidden;
diff --git a/fietsboek/locale/de/LC_MESSAGES/messages.mo b/fietsboek/locale/de/LC_MESSAGES/messages.mo
index aeb978d..0633a4c 100644
--- a/fietsboek/locale/de/LC_MESSAGES/messages.mo
+++ b/fietsboek/locale/de/LC_MESSAGES/messages.mo
diff --git a/fietsboek/locale/de/LC_MESSAGES/messages.po b/fietsboek/locale/de/LC_MESSAGES/messages.po
index 934ac94..b7125af 100644
--- a/fietsboek/locale/de/LC_MESSAGES/messages.po
+++ b/fietsboek/locale/de/LC_MESSAGES/messages.po
@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2024-02-02 23:44+0100\n"
+"POT-Creation-Date: 2024-04-06 21:57+0200\n"
 "PO-Revision-Date: 2022-07-02 17:35+0200\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: de\n"
@@ -16,7 +16,7 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Generated-By: Babel 2.12.1\n"
+"Generated-By: Babel 2.14.0\n"
 
 #: fietsboek/actions.py:267
 msgid "email.verify_mail.subject"
@@ -29,11 +29,11 @@ msgstr ""
 "\n"
 "Falls Du kein Konto angelegt hast, ignoriere diese E-Mail."
 
-#: fietsboek/util.py:307
+#: fietsboek/util.py:310
 msgid "password_constraint.mismatch"
 msgstr "Passwörter stimmen nicht überein"
 
-#: fietsboek/util.py:309
+#: fietsboek/util.py:312
 msgid "password_constraint.length"
 msgstr "Passwort zu kurz"
 
@@ -630,67 +630,79 @@ msgstr "Passwörter stimmen nicht überein"
 msgid "page.password_reset.reset"
 msgstr "Zurücksetzen"
 
-#: fietsboek/templates/profile.jinja2:67
+#: fietsboek/templates/profile.jinja2:64
+msgid "page.profile.tabbar.overview"
+msgstr "Übersicht"
+
+#: fietsboek/templates/profile.jinja2:69
+msgid "page.profile.tabbar.graphs"
+msgstr "Diagramme"
+
+#: fietsboek/templates/profile.jinja2:83
 msgid "page.profile.length"
 msgstr "Länge"
 
-#: fietsboek/templates/profile.jinja2:71
+#: fietsboek/templates/profile.jinja2:87
 msgid "page.profile.avg_length"
 msgstr "durchschnittliche Länge"
 
-#: fietsboek/templates/profile.jinja2:75
+#: fietsboek/templates/profile.jinja2:91
 msgid "page.profile.uphill"
 msgstr "Bergauf"
 
-#: fietsboek/templates/profile.jinja2:79
+#: fietsboek/templates/profile.jinja2:95
 msgid "page.profile.downhill"
 msgstr "Bergab"
 
-#: fietsboek/templates/profile.jinja2:83
+#: fietsboek/templates/profile.jinja2:99
 msgid "page.profile.moving_time"
 msgstr "Fahrzeit"
 
-#: fietsboek/templates/profile.jinja2:87
+#: fietsboek/templates/profile.jinja2:103
 msgid "page.profile.stopped_time"
 msgstr "Haltezeit"
 
-#: fietsboek/templates/profile.jinja2:91
+#: fietsboek/templates/profile.jinja2:107
 msgid "page.profile.avg_duration"
 msgstr "durchschnittliche Dauer"
 
-#: fietsboek/templates/profile.jinja2:95
+#: fietsboek/templates/profile.jinja2:111
 msgid "page.profile.max_speed"
 msgstr "maximale Geschwindigkeit"
 
-#: fietsboek/templates/profile.jinja2:99
+#: fietsboek/templates/profile.jinja2:115
 msgid "page.profile.avg_speed"
 msgstr "durchschnittliche Geschwindigkeit"
 
-#: fietsboek/templates/profile.jinja2:103
+#: fietsboek/templates/profile.jinja2:119
 msgid "page.profile.number_of_tracks"
 msgstr "Anzahl der Strecken"
 
-#: fietsboek/templates/profile.jinja2:109
+#: fietsboek/templates/profile.jinja2:125
 msgid "page.profile.longest_distance_track"
 msgstr "Weiteste Strecke"
 
-#: fietsboek/templates/profile.jinja2:114
+#: fietsboek/templates/profile.jinja2:130
 msgid "page.profile.shortest_distance_track"
 msgstr "Kürzeste Strecke"
 
-#: fietsboek/templates/profile.jinja2:119
+#: fietsboek/templates/profile.jinja2:135
 msgid "page.profile.longest_duration_track"
 msgstr "Am Längsten Dauernde Strecke"
 
-#: fietsboek/templates/profile.jinja2:124
+#: fietsboek/templates/profile.jinja2:140
 msgid "page.profile.shortest_duration_track"
 msgstr "Am Kürzesten Dauernde Strecke"
 
-#: fietsboek/templates/profile.jinja2:144
+#: fietsboek/templates/profile.jinja2:147
+msgid "page.profile.graph.km_per_month"
+msgstr "Kilometer pro Monat"
+
+#: fietsboek/templates/profile.jinja2:171
 msgid "page.profile.heatmap"
 msgstr "Heatmap"
 
-#: fietsboek/templates/profile.jinja2:149
+#: fietsboek/templates/profile.jinja2:176
 msgid "page.profile.tilehunt"
 msgstr "Kacheljäger"
 
diff --git a/fietsboek/locale/en/LC_MESSAGES/messages.mo b/fietsboek/locale/en/LC_MESSAGES/messages.mo
index 9f7170c..cc713cb 100644
--- a/fietsboek/locale/en/LC_MESSAGES/messages.mo
+++ b/fietsboek/locale/en/LC_MESSAGES/messages.mo
diff --git a/fietsboek/locale/en/LC_MESSAGES/messages.po b/fietsboek/locale/en/LC_MESSAGES/messages.po
index 645d059..5e1762c 100644
--- a/fietsboek/locale/en/LC_MESSAGES/messages.po
+++ b/fietsboek/locale/en/LC_MESSAGES/messages.po
@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2024-02-02 23:44+0100\n"
+"POT-Creation-Date: 2024-04-06 21:57+0200\n"
 "PO-Revision-Date: 2023-04-03 20:42+0200\n"
 "Last-Translator: \n"
 "Language: en\n"
@@ -16,7 +16,7 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Generated-By: Babel 2.12.1\n"
+"Generated-By: Babel 2.14.0\n"
 
 #: fietsboek/actions.py:267
 msgid "email.verify_mail.subject"
@@ -29,11 +29,11 @@ msgstr ""
 "\n"
 "If you did not create an account, ignore this email."
 
-#: fietsboek/util.py:307
+#: fietsboek/util.py:310
 msgid "password_constraint.mismatch"
 msgstr "Passwords don't match"
 
-#: fietsboek/util.py:309
+#: fietsboek/util.py:312
 msgid "password_constraint.length"
 msgstr "Password not long enough"
 
@@ -624,67 +624,79 @@ msgstr "Passwords must match"
 msgid "page.password_reset.reset"
 msgstr "Reset"
 
-#: fietsboek/templates/profile.jinja2:67
+#: fietsboek/templates/profile.jinja2:64
+msgid "page.profile.tabbar.overview"
+msgstr "Overview"
+
+#: fietsboek/templates/profile.jinja2:69
+msgid "page.profile.tabbar.graphs"
+msgstr "Graphs"
+
+#: fietsboek/templates/profile.jinja2:83
 msgid "page.profile.length"
 msgstr "Length"
 
-#: fietsboek/templates/profile.jinja2:71
+#: fietsboek/templates/profile.jinja2:87
 msgid "page.profile.avg_length"
 msgstr "Average Length"
 
-#: fietsboek/templates/profile.jinja2:75
+#: fietsboek/templates/profile.jinja2:91
 msgid "page.profile.uphill"
 msgstr "Uphill"
 
-#: fietsboek/templates/profile.jinja2:79
+#: fietsboek/templates/profile.jinja2:95
 msgid "page.profile.downhill"
 msgstr "Downhill"
 
-#: fietsboek/templates/profile.jinja2:83
+#: fietsboek/templates/profile.jinja2:99
 msgid "page.profile.moving_time"
 msgstr "Moving Time"
 
-#: fietsboek/templates/profile.jinja2:87
+#: fietsboek/templates/profile.jinja2:103
 msgid "page.profile.stopped_time"
 msgstr "Stopped Time"
 
-#: fietsboek/templates/profile.jinja2:91
+#: fietsboek/templates/profile.jinja2:107
 msgid "page.profile.avg_duration"
 msgstr "Average Duration"
 
-#: fietsboek/templates/profile.jinja2:95
+#: fietsboek/templates/profile.jinja2:111
 msgid "page.profile.max_speed"
 msgstr "Max Speed"
 
-#: fietsboek/templates/profile.jinja2:99
+#: fietsboek/templates/profile.jinja2:115
 msgid "page.profile.avg_speed"
 msgstr "Average Speed"
 
-#: fietsboek/templates/profile.jinja2:103
+#: fietsboek/templates/profile.jinja2:119
 msgid "page.profile.number_of_tracks"
 msgstr "Number of tracks"
 
-#: fietsboek/templates/profile.jinja2:109
+#: fietsboek/templates/profile.jinja2:125
 msgid "page.profile.longest_distance_track"
 msgstr "Longest Track"
 
-#: fietsboek/templates/profile.jinja2:114
+#: fietsboek/templates/profile.jinja2:130
 msgid "page.profile.shortest_distance_track"
 msgstr "Shortest Track"
 
-#: fietsboek/templates/profile.jinja2:119
+#: fietsboek/templates/profile.jinja2:135
 msgid "page.profile.longest_duration_track"
 msgstr "Most Time-Consuming Track"
 
-#: fietsboek/templates/profile.jinja2:124
+#: fietsboek/templates/profile.jinja2:140
 msgid "page.profile.shortest_duration_track"
 msgstr "Quickest Track"
 
-#: fietsboek/templates/profile.jinja2:144
+#: fietsboek/templates/profile.jinja2:147
+msgid "page.profile.graph.km_per_month"
+msgstr "Kilometers per month"
+
+#: fietsboek/templates/profile.jinja2:171
 msgid "page.profile.heatmap"
 msgstr "Heat Map"
 
-#: fietsboek/templates/profile.jinja2:149
+#: fietsboek/templates/profile.jinja2:176
 msgid "page.profile.tilehunt"
 msgstr "Tilehunt"
 
diff --git a/fietsboek/locale/fietslog.pot b/fietsboek/locale/fietslog.pot
index 4fd3812..747cd78 100644
--- a/fietsboek/locale/fietslog.pot
+++ b/fietsboek/locale/fietslog.pot
@@ -8,14 +8,14 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2024-02-02 23:44+0100\n"
+"POT-Creation-Date: 2024-04-06 21:57+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Generated-By: Babel 2.12.1\n"
+"Generated-By: Babel 2.14.0\n"
 
 #: fietsboek/actions.py:267
 msgid "email.verify_mail.subject"
@@ -25,11 +25,11 @@ msgstr ""
 msgid "email.verify.text"
 msgstr ""
 
-#: fietsboek/util.py:307
+#: fietsboek/util.py:310
 msgid "password_constraint.mismatch"
 msgstr ""
 
-#: fietsboek/util.py:309
+#: fietsboek/util.py:312
 msgid "password_constraint.length"
 msgstr ""
 
@@ -618,67 +618,79 @@ msgstr ""
 msgid "page.password_reset.reset"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:67
+#: fietsboek/templates/profile.jinja2:64
+msgid "page.profile.tabbar.overview"
+msgstr ""
+
+#: fietsboek/templates/profile.jinja2:69
+msgid "page.profile.tabbar.graphs"
+msgstr ""
+
+#: fietsboek/templates/profile.jinja2:83
 msgid "page.profile.length"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:71
+#: fietsboek/templates/profile.jinja2:87
 msgid "page.profile.avg_length"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:75
+#: fietsboek/templates/profile.jinja2:91
 msgid "page.profile.uphill"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:79
+#: fietsboek/templates/profile.jinja2:95
 msgid "page.profile.downhill"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:83
+#: fietsboek/templates/profile.jinja2:99
 msgid "page.profile.moving_time"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:87
+#: fietsboek/templates/profile.jinja2:103
 msgid "page.profile.stopped_time"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:91
+#: fietsboek/templates/profile.jinja2:107
 msgid "page.profile.avg_duration"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:95
+#: fietsboek/templates/profile.jinja2:111
 msgid "page.profile.max_speed"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:99
+#: fietsboek/templates/profile.jinja2:115
 msgid "page.profile.avg_speed"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:103
+#: fietsboek/templates/profile.jinja2:119
 msgid "page.profile.number_of_tracks"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:109
+#: fietsboek/templates/profile.jinja2:125
 msgid "page.profile.longest_distance_track"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:114
+#: fietsboek/templates/profile.jinja2:130
 msgid "page.profile.shortest_distance_track"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:119
+#: fietsboek/templates/profile.jinja2:135
 msgid "page.profile.longest_duration_track"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:124
+#: fietsboek/templates/profile.jinja2:140
 msgid "page.profile.shortest_duration_track"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:144
+#: fietsboek/templates/profile.jinja2:147
+msgid "page.profile.graph.km_per_month"
+msgstr ""
+
+#: fietsboek/templates/profile.jinja2:171
 msgid "page.profile.heatmap"
 msgstr ""
 
-#: fietsboek/templates/profile.jinja2:149
+#: fietsboek/templates/profile.jinja2:176
 msgid "page.profile.tilehunt"
 msgstr ""
 
diff --git a/fietsboek/static/theme.css b/fietsboek/static/theme.css
index 8917269..8a77608 100644
--- a/fietsboek/static/theme.css
+++ b/fietsboek/static/theme.css
@@ -149,6 +149,10 @@ strong {
   width: 25%;
 }
 
+.chart-title {
+  text-align: center;
+}
+
 .list-group.list-group-root {
   padding: 0;
   overflow: hidden;
diff --git a/fietsboek/static/theme.css.map b/fietsboek/static/theme.css.map
index 2efb7d7..fb7eb58 100644
--- a/fietsboek/static/theme.css.map
+++ b/fietsboek/static/theme.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../asset-sources/theme.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EAqCE;EACA;EACA;EACA;EACA;EACA;;AAzCA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAWJ;EACI;;;AAGJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"theme.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../asset-sources/theme.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EAqCE;EACA;EACA;EACA;EACA;EACA;;AAzCA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAWJ;EACI;;;AAGJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"theme.css"}
\ No newline at end of file
diff --git a/fietsboek/templates/profile.jinja2 b/fietsboek/templates/profile.jinja2
index e5ac181..1e798c8 100644
--- a/fietsboek/templates/profile.jinja2
+++ b/fietsboek/templates/profile.jinja2
@@ -58,75 +58,96 @@
 <div class="container">
   <h1>{{ user.name }}</h1>
 
-  {% if heatmap_url or tilehunt_url %}
-  <div id="userMap" style="height: 600px; width: 100%;"></div>
-  {% endif %}
-
-  <table class="table table-hover table-sm">
-    <tr>
-      <th scope="row">{{ _("page.profile.length") }}</th>
-      <td id="profileLength">{{ (total.length / 1000) | round(2) | format_decimal }} km</td>
-    </tr>
-    <tr>
-      <th scope="row">{{ _("page.profile.avg_length") }}</th>
-      <td id="profileAvgLength">{{ (total.avg_length / 1000) | round(2) | format_decimal }} km</td>
-    </tr>
-    <tr>
-      <th scope="row">{{ _("page.profile.uphill") }}</th>
-      <td id="profileUphill">{{ total.uphill | round(2) | format_decimal }} m</td>
-    </tr>
-    <tr>
-      <th scope="row">{{ _("page.profile.downhill") }}</th>
-      <td id="profileDownhill">{{ total.downhill | round(2) | format_decimal }} m</td>
-    </tr>
-    <tr>
-      <th scope="row">{{ _("page.profile.moving_time") }}</th>
-      <td id="profileMovingTime">{{ total.moving_time }}</td>
-    </tr>
-    <tr>
-      <th scope="row">{{ _("page.profile.stopped_time") }}</th>
-      <td id="profileStoppedTime">{{ total.stopped_time }}</td>
-    </tr>
-    <tr>
-      <th scope="row">{{ _("page.profile.avg_duration") }}</th>
-      <td id="profileAvgDuration">{{ total.avg_duration }}</td>
-    </tr>
-    <tr>
-      <th scope="row">{{ _("page.profile.max_speed") }}</th>
-      <td id="profileMaxSpeed">{{ mps_to_kph(total.max_speed) | round(2) | format_decimal }} km/h</td>
-    </tr>
-    <tr>
-      <th scope="row">{{ _("page.profile.avg_speed") }}</th>
-      <td id="profileAvgSpeed">{{ mps_to_kph(total.avg_speed) | round(2) | format_decimal }} km/h</td>
-    </tr>
-    <tr>
-      <th scope="row">{{ _("page.profile.number_of_tracks") }}</th>
-      <td id="profileNumberOfTracks">{{ total.count }}</td>
-    </tr>
-  </table>
-
-  {% if total.longest_distance_track %}
-  <h2>{{ _("page.profile.longest_distance_track") }}</h2>
-  {{ render_track_card(total.longest_distance_track) }}
-  {% endif %}
-
-  {% if total.shortest_distance_track %}
-  <h2>{{ _("page.profile.shortest_distance_track") }}</h2>
-  {{ render_track_card(total.shortest_distance_track) }}
-  {% endif %}
-
-  {% if total.longest_duration_track %}
-  <h2>{{ _("page.profile.longest_duration_track") }}</h2>
-  {{ render_track_card(total.longest_duration_track) }}
-  {% endif %}
-
-  {% if total.shortest_duration_track %}
-  <h2>{{ _("page.profile.shortest_duration_track") }}</h2>
-  {{ render_track_card(total.shortest_duration_track) }}
-  {% endif %}
-
-  <h2>{{ _("page.profile.monthly_graph") }}</h2>
-  <div style="width: 75%; margin: auto;"><canvas id="graph-month-summary"></canvas></div>
+  <ul class="nav nav-tabs" id="profileTabbar" role="tablist">
+    <li class="nav-item" role="presentation">
+      <button class="nav-link active" id="tabOverviewButton" data-bs-toggle="tab" data-bs-target="#tabOverviewPane" type="button" role="tab" aria-controls="tabOverviewPane" aria-selected="true">
+        {{ _("page.profile.tabbar.overview") }}
+      </button>
+    </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="tabGraphsButton" data-bs-toggle="tab" data-bs-target="#tabGraphsPane" type="button" role="tab" aria-controls="tabGraphsPane" aria-selected="false">
+        {{ _("page.profile.tabbar.graphs") }}
+      </button>
+    </li>
+  </ul>
+
+  <div class="tab-content">
+    <!-- First tab -->
+    <div class="tab-pane fade show active" id="tabOverviewPane" role="tabpanel" aria-labelledby="tabOverviewButton">
+      {% if heatmap_url or tilehunt_url %}
+      <div id="userMap" style="height: 600px; width: 100%;"></div>
+      {% endif %}
+
+      <table class="table table-hover table-sm">
+        <tr>
+          <th scope="row">{{ _("page.profile.length") }}</th>
+          <td id="profileLength">{{ (total.length / 1000) | round(2) | format_decimal }} km</td>
+        </tr>
+        <tr>
+          <th scope="row">{{ _("page.profile.avg_length") }}</th>
+          <td id="profileAvgLength">{{ (total.avg_length / 1000) | round(2) | format_decimal }} km</td>
+        </tr>
+        <tr>
+          <th scope="row">{{ _("page.profile.uphill") }}</th>
+          <td id="profileUphill">{{ total.uphill | round(2) | format_decimal }} m</td>
+        </tr>
+        <tr>
+          <th scope="row">{{ _("page.profile.downhill") }}</th>
+          <td id="profileDownhill">{{ total.downhill | round(2) | format_decimal }} m</td>
+        </tr>
+        <tr>
+          <th scope="row">{{ _("page.profile.moving_time") }}</th>
+          <td id="profileMovingTime">{{ total.moving_time }}</td>
+        </tr>
+        <tr>
+          <th scope="row">{{ _("page.profile.stopped_time") }}</th>
+          <td id="profileStoppedTime">{{ total.stopped_time }}</td>
+        </tr>
+        <tr>
+          <th scope="row">{{ _("page.profile.avg_duration") }}</th>
+          <td id="profileAvgDuration">{{ total.avg_duration }}</td>
+        </tr>
+        <tr>
+          <th scope="row">{{ _("page.profile.max_speed") }}</th>
+          <td id="profileMaxSpeed">{{ mps_to_kph(total.max_speed) | round(2) | format_decimal }} km/h</td>
+        </tr>
+        <tr>
+          <th scope="row">{{ _("page.profile.avg_speed") }}</th>
+          <td id="profileAvgSpeed">{{ mps_to_kph(total.avg_speed) | round(2) | format_decimal }} km/h</td>
+        </tr>
+        <tr>
+          <th scope="row">{{ _("page.profile.number_of_tracks") }}</th>
+          <td id="profileNumberOfTracks">{{ total.count }}</td>
+        </tr>
+      </table>
+
+      {% if total.longest_distance_track %}
+      <h2>{{ _("page.profile.longest_distance_track") }}</h2>
+      {{ render_track_card(total.longest_distance_track) }}
+      {% endif %}
+
+      {% if total.shortest_distance_track %}
+      <h2>{{ _("page.profile.shortest_distance_track") }}</h2>
+      {{ render_track_card(total.shortest_distance_track) }}
+      {% endif %}
+
+      {% if total.longest_duration_track %}
+      <h2>{{ _("page.profile.longest_duration_track") }}</h2>
+      {{ render_track_card(total.longest_duration_track) }}
+      {% endif %}
+
+      {% if total.shortest_duration_track %}
+      <h2>{{ _("page.profile.shortest_duration_track") }}</h2>
+      {{ render_track_card(total.shortest_duration_track) }}
+      {% endif %}
+    </div>
+
+    <!-- Second tab -->
+    <div class="tab-pane fade" id="tabGraphsPane" role="tabpanel" aria-labelledby="tabGraphsButton">
+      <h2 class="chart-title">{{ _("page.profile.graph.km_per_month") }}</h2>
+      <div style="position: relative; height: 500px; width: 75%; margin: auto;"><canvas id="graph-month-summary"></canvas></div>
+    </div>
+  </div>
 
 </div>
 {% endblock %}