Index: ow/templates/workout.pt
===================================================================
--- ow/templates/workout.pt	(revision 8c2b0949ae91540ee5c8101b9d5ff39003773da3)
+++ ow/templates/workout.pt	(revision 5ec3a0b5cf5640304a0953320daef2a28bbca9a5)
@@ -16,6 +16,13 @@
     <link rel="stylesheet" tal:condition="context.has_gpx"
           href="${request.static_url('ow:static/components/Leaflet/leaflet.css')}" />
+
+    <!--!
     <link rel="stylesheet" tal:condition="context.has_gpx"
-          href="${request.static_url('ow:static/components/leaflet-elevation/leaflet-elevation.css')}" />
+          href="${request.static_url('ow:static/leaflet-elevation/leaflet.elevation.css')}" />
+
+    <link rel="stylesheet" tal:condition="context.has_gpx"
+          href="${request.static_url('ow:static/leaflet-openworkouts/leaflet.openworkouts.css')}" />
+    -->
+
   </metal:css>
 
@@ -26,123 +33,123 @@
   <metal:content metal:fill-slot="content">
 
+    <!--! Track map -->
+    <div id="map" tal:condition="context.has_gpx"></div>
 
-    <div class="workout-detail" id="workout">
-      <div class="workout-detail-resume">
-        <h3 tal:content="context.title"></h3>
-        <div id="" tal:attributes="id 'workout-' + context.workout_id + '-notes'">
-          <p tal:repeat="paragraph context.notes.split('\n')"
-             tal:content="paragraph"></p>
+    <!--! Additional map controls -->
+
+    <div id="ow-analysis">
+
+      <!--!
+          FIXME: the list of available charts should come from the workout
+          details, based on which data this workout has
+        -->
+      <!--! All those ids are needed for the leaflet openworkouts plugin -->
+      <tal:r tal:repeat="chart ['elevation', 'heartrate', 'cadence', 'temperature']">
+        <div id="ow-" tal:attributes="id 'ow-' + chart">
+          <div class="ow-average" id=""
+               tal:attributes="id 'ow-' + chart + '-average'"></div>
+          <div class="ow-chart" id=""
+               tal:attributes="id 'ow-' + chart + '-chart'"></div>
+          <div class="ow-current" id=""
+               tal:attributes="id 'ow-' + chart + '-current'"></div>
         </div>
-        <ul class="workout-options">
-          <li>
-            <a href="" i18n:translate=""
-               tal:attributes="href request.resource_url(context, 'edit')">
-              edit workout
-            </a>
-          </li>
-          <li>
-            <a href="" i18n:translate=""
-               tal:attributes="href request.resource_url(context, 'update-from-file')">
-              update with tracking file
-            </a>
-          </li>
-          <li class="owo-del"><a href="" i18n:translate=""
-                                 tal:attributes="href request.resource_url(context, 'delete')">
-            delete
-          </a>
-          </li>
-        </ul>
-      </div>
-      <div class="workout-detail-info">
-        <ul id="" tal:attributes="id 'workout-' + context.workout_id + '-details'"
-            tal:define="hr context.hr; cad context.cad; atemp context.atemp; timezone context.owner.timezone">
-          <li class="important" tal:condition="context.distance">
-            <span><tal:t i18n:translate="">Distance</tal:t></span>
-            <tal:c tal:content="context.rounded_distance"></tal:c> km
-          </li>
-          <li class="important">
-            <span><tal:t i18n:translate="">Duration</tal:t></span>
-            <!--! use the properly formatted duration instead of the timedelta object -->
-            <tal:c tal:content="context._duration"></tal:c>
-          </li>
-          <li class="important">
-            <span><tal:t i18n:translate="">Elevation</tal:t></span>
-            <tal:c tal:content="context.uphill"></tal:c> m
-          </li>
-
-          <li class="important">
-            <span><tal:t i18n:translate="">Start</tal:t></span>
-            <tal:c tal:content="context.start_in_timezone(timezone)"></tal:c>
-          </li>
-          <li tal:condition="context.speed">
-            <span><tal:t i18n:translate="">Speed</tal:t></span>
-            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
-              <tal:c tal:content="round(context.speed['avg'], 1)"></tal:c> km/h</span>
-            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
-              <tal:c tal:content="round(context.speed['max'], 1)"></tal:c> km/h</span>
-          </li>
-          <li tal:condition="hr">
-            <span><tal:t i18n:translate="">Heart Rate</tal:t></span>
-            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
-              <tal:c tal:content="hr['avg']"></tal:c> bpm</span>
-            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
-              <tal:c tal:content="hr['max']"></tal:c> bpm</span>
-          </li>
-          <li tal:condition="cad">
-            <span><tal:t i18n:translate="">Cadence</tal:t></span>
-            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
-              <tal:c tal:content="cad['avg']"></tal:c></span>
-            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
-              <tal:c tal:content="cad['max']"></tal:c></span>
-          </li>
-          <li tal:condition="atemp">
-            <span><tal:t i18n:translate="">Temperature</tal:t></span>
-            <span class="min"><tal:t i18n:translate="">Min.</tal:t>
-              <tal:c tal:content="atemp['min']"></tal:c> ℃</span>
-            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
-              <tal:c tal:content="atemp['avg']"></tal:c> ℃</span>
-            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
-              <tal:c tal:content="atemp['max']"></tal:c> ℃</span>
-          </li>
-        </ul>
-        <div id="elevation"></div>
-      </div>
+      </tal:r>
 
     </div>
-        <div id="map" tal:condition="context.has_gpx"></div>
 
+    <div id="workout">
+      <h3 tal:content="context.title"></h3>
+      <h4>
+        <a href="" i18n:translate=""
+           tal:attributes="href request.resource_url(context, 'edit')">
+          (edit workout)
+        </a> |
+        <a href="" i18n:translate=""
+           tal:attributes="href request.resource_url(context, 'update-from-file')">
+          (update with tracking file)
+        </a> |
+        <a href="" i18n:translate=""
+           tal:attributes="href request.resource_url(context, 'delete')">
+          (delete)
+        </a>
+      </h4>
+
+      <ul id="" tal:attributes="id 'workout-' + context.workout_id + '-details'"
+          tal:define="hr context.hr; cad context.cad">
+        <li>
+          <tal:t i18n:translate="">Start:</tal:t>
+          <tal:c tal:content="context.start"></tal:c>
+        </li>
+        <li>
+          <tal:t i18n:translate="">End:</tal:t>
+          <tal:c tal:content="context.end"></tal:c>
+        </li>
+        <li>
+          <tal:t i18n:translate="">Duration:</tal:t>
+          <tal:c tal:content="context.duration"></tal:c>
+        </li>
+        <li tal:condition="context.distance">
+          <tal:t i18n:translate="">Distance:</tal:t>
+          <tal:c tal:content="context.rounded_distance"></tal:c> km
+        </li>
+        <li tal:condition="hr">
+          <tal:t i18n:translate="">Heart Rate:</tal:t>
+          <tal:t i18n:translate="">Min.</tal:t>
+          <tal:c tal:content="hr['min']"></tal:c> bpm |
+          <tal:t i18n:translate="">Avg.</tal:t>
+          <tal:c tal:content="hr['avg']"></tal:c> bpm |
+          <tal:t i18n:translate="">Max.</tal:t>
+          <tal:c tal:content="hr['max']"></tal:c> bpm
+        </li>
+        <li tal:condition="cad">
+          <tal:t i18n:translate="">Cadence:</tal:t>
+          <tal:t i18n:translate="">Min.</tal:t>
+          <tal:c tal:content="cad['min']"></tal:c> |
+          <tal:t i18n:translate="">Avg.</tal:t>
+          <tal:c tal:content="cad['avg']"></tal:c> |
+          <tal:t i18n:translate="">Max.</tal:t>
+          <tal:c tal:content="cad['max']"></tal:c>
+        </li>
+      </ul>
+      <div id="" tal:content="context.notes"
+           tal:attributes="id 'workout-' + context.workout_id + '-notes'">
+      </div>
+    </div>
   </metal:content>
 
   <metal:body-js metal:fill-slot="body-js">
 
-    <script src="${request.static_url('ow:static/components/d3/d3.min.js')}"
+    <!--
+    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="${request.static_url('ow:static/d3/d3.min.js')}"
             tal:condition="context.has_gpx"></script>
+    -->
 
     <script src="${request.static_url('ow:static/components/Leaflet/leaflet.js')}"
             tal:condition="context.has_gpx"></script>
 
-    <script src="${request.static_url('ow:static/components/leaflet-gpx/gpx.js')}"
+    <script src="${request.static_url('ow:static/leaflet-gpx/gpx.js')}"
             tal:condition="context.has_gpx"></script>
 
-    <script src="${request.static_url('ow:static/components/leaflet-elevation/leaflet-elevation.js')}"
+    <!--!
+    <script src="${request.static_url('ow:static/leaflet-elevation/leaflet.elevation.min.js')}"
             tal:condition="context.has_gpx"></script>
-
+    <script src="${request.static_url('ow:static/leaflet-openworkouts/leaflet.openworkouts.src.js')}"
+            tal:condition="context.has_gpx"></script>
     <script src="${request.static_url('ow:static/js/ow.js')}"
             tal:condition="context.has_gpx"></script>
+    -->
 
     <script type="text/javascript" tal:condition="context.has_gpx">
-     var workout_map = owjs.map({
-         map_id: 'map',
-         latitude: ${start_point['latitude']},
-         longitude: ${start_point['longitude']},
-         zoom: 11,
-         gpx_url: '${request.resource_url(context, 'gpx')}',
-         start_icon: '${request.static_url('ow:static/components/leaflet-gpx/pin-icon-start.png')}',
-         end_icon: '${request.static_url('ow:static/components/leaflet-gpx/pin-icon-end.png')}',
-         shadow: '${request.static_url('ow:static/components/leaflet-gpx/pin-shadow.png')}',
-         elevation: true,
-         zoom_control: true
-     });
-     workout_map.render();
+      var workout_map = owjs.map({
+          latitude: ${start_point['latitude']},
+          longitude: ${start_point['longitude']},
+          zoom: 11,
+          gpx_url: '${request.resource_url(context, 'gpx')}',
+          start_icon: '${request.static_url('ow:static/leaflet-gpx/pin-icon-start.png')}',
+          end_icon: '${request.static_url('ow:static/leaflet-gpx/pin-icon-end.png')}',
+          shadow: '${request.static_url('ow:static/leaflet-gpx/pin-shadow.png')}',
+      });
+      workout_map.render()
     </script>
   </metal:body-js>
