{% extends base_template %}
{% load i18n %}
{% load staticfiles %}

{% block practice_active %}active{% endblock practice_active %}

{% block headcss %}{{ block.super }}
    <link rel='stylesheet' type='text/css' href='{% static "css/tipsy.css" %}' />
    <link rel='stylesheet' type='text/css' href='{% static "css/knowledgemap/knowledgemap.css" %}' />
{% endblock headcss %}

{% block headjs %}{{ block.super }}
    <script src="{% static 'js/jquery.tipsy.js' %}"></script>
    <script src="{% static 'js/d3.v3.min.js' %}"></script>
    <script type="text/javascript">
        var ALL_TOPICS_URL = '{{ data_url }}/topics.json';
        var K_MAP_URL = "{% url 'api_dispatch_list' resource_name='KnowledgeMapExerciselog' %}";
    </script>
    <script src="{% static 'js/knowledgemap/d3.knowledgemap.js' %}"></script>
{% endblock headjs %}

{% block content %}
  <img id="map-explanation" src="{% static 'images/knowledgemap/map_explain_img.png' %}" 
  style="width:100px; top:70px; left:10px; position:absolute">
  <h5 style="top:65px; left:37px; position:absolute">{% trans "not-started" %}</h5>
  <h5 style="top:93px; left:37px; position:absolute">{% trans "in-progress" %}</h5>
  <h5 style="top:121px; left:37px; position:absolute">{% trans "completed" %}</h5>
  <h5 style="font-size: 80%; top:165px; left:16px; position:absolute; color:white">{% trans "partially unfolded" %}</h5>
  <h5 style="font-size: 80%; top:214px; left:25px; position:absolute">{% trans "fully unfolded" %}</h5>
{% endblock content %}