{% extends 'base.html' %} 
{% load static %}

{% block title %} Cursos populares y menos populares {% endblock title %}
{% block contenido %}
<div class="col-lg-12">
	{% if cursos_populares or cursos_menos_populares %}
	<div class="card card-lg">
    	<div class="card-body">
        	<div class="markdown">
				
				{% if cursos_populares %}
        		<img src="data:image/png;base64,{{ grafica_base64_populares }}" alt="Gráfica de Cursos" style="width: auto; height: auto;">
        		{% endif %}
        		{% if cursos_menos_populares %}
        		<img src="data:image/png;base64,{{ grafica_base64_menos_populares }}" alt="Gráfica de Cursos" style="width: auto; height: auto;">
        		{% endif %}
        	</div>
      	</div>
    </div>
	{% else %}
		<div class="page-wrapper">
		    <div class="page-body">
		      <div class="container-xl d-flex flex-column justify-content-center">
		        <div class="empty card">
		          <div class="empty-img"><img src="{% static 'img/mood-sad-2.png' %}" height="128"  alt=""></div>
		          <p class="empty-title">No hay cursos disponibles por el momento</p>
		          <p class="empty-subtitle text-muted"> Los cursos aparecerán cuando sean agregados por un instructor o administradores del sistema.
		          </p>
		        </div>
		      </div>
		    </div>
		 </div>
	{% endif %}
</div>

    
{% endblock %}
