{% extends 'layouts/base.html' %}

{% block title %} Maps {% endblock title %}

{% block content %}  
<div class="container-fluid pt-6 bg-secondary">
  <h2>Maps</h2>
  <p>Country level maps. More coming soon!</p>
  <div class="row">
    <div class="col-xl-12 mb-5 mb-xl-0">  <!-- Global interactive Plotly Mabpox -->
      <div class="card shadow fade-in-bottom">
        <div class="card-body plotly worldmap">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.54.6/plotly.min.js"></script>

          <div class="chart">
            {% autoescape off %}
            {{ usa_map }}
            {% endautoescape %}
          </div>
        </div>
        <div style="position: absolute; padding:1.25rem 1.5rem;">
            <h6 class="text-uppercase text-muted ls-1 mb-1">USA Counties | Per Capita</h6>
            <h2 class="text-dark mb-0">Per 100k Residents</h2>
        </div>
      </div>
    </div>
  </div>
  {% include "includes/footer.html" %}
</div>

{% endblock content %}

<!-- Specific JS goes HERE --> 
{% block javascripts %}
<script>
$('.nav-item a').removeClass('active');
$('.maps-item a').addClass('active');
</script>
{% endblock javascripts %}