{% extends "base.html" %}
{% block content %}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>.modebar{display: none !important;}</style>

<div class="card mb-4 shadow">
    <div class="card-body">
      <h5 class="card-title">{{ user.name }} - Profile overview</h5>
      <ul class="list-group list-group-flush">
        <li class="list-group-item"><b>id</b>: {{user.id }}</li>
        <li class="list-group-item"><b>total trips:</b> {{ user.number_of_trips }}</li>
        <li class="list-group-item"><b>g of CO2 saved (total):</b> {{ user.total_co2_savings }}</li>
      </ul>
    </div>
</div>
<div class="card mb-4 shadow">
    <div class="card-body">
        <h5 class="card-title">Previous destinations</h5>
        <iframe src="{{ context.map_path }}" style="width: 100%; min-height: 23rem;"></iframe>
    </div>
</div>
<div class="card mb-4 shadow">
    <div class="card-body">
      {{ context.plotly_html|safe }}
    </div>
</div>
{% endblock %}