{% extends "base/templates/base.html" %}
{% block header_js %}
<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/persona' folder='media' %}js/persona.js?v={{settings.JS_VERSION}}"></script>
{% endblock %}

{% block breadcumb %}
	<ul class="breadcrumb">
		<li><a href="/"><i class="icon-home2 position-left"></i>Principal</a></li>
		<li class="active">Notificaciones</li>
	</ul>
{% endblock %}

{% block toolbar %}
	
{% endblock %}

{% block content %}
	{% if notificaciones_usuario %}
	<div class="row">
		{% for notificacion_usuario in notificaciones_usuario %}
		<div class="col-md-12">
			<div class="panel border-left-lg mb-5 border-left-{{ notificacion_usuario.notificacion.clase_tipo_alerta }}" style="{% if notificacion_usuario.estado == 'NOL' %}background-color:#f0f0f0;{% endif %}">
				<div class="panel-body body-notification">
					<div class="row">
						<div class="col-md-8">
							<h6 class="no-margin-top"><a href="{% url 'ver_notificacion' notificacion_usuario.id %}"><i class="{{ notificacion_usuario.notificacion.clase_icono_notificacion }}"></i>&nbsp;&nbsp;{{ notificacion_usuario.notificacion.titulo }}</a></h6>
							<p class="mb-15">{{ notificacion_usuario.notificacion.contenido|truncatewords:100 }}</p>
						</div>
						<div class="col-md-4">
							<ul class="list task-details time-notification">
								<li><i class="glyphicon glyphicon-time text-default text-size-small"></i>&nbsp;&nbsp;{{ notificacion_usuario.fecha_creacion|timesince }}</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="panel-footer" style="{% if notificacion_usuario.estado == 'NOL' %}background-color:#f0f0f0;{% endif %}">
					<ul>
						<li data-popup="tooltip" title="" data-original-title="Fecha de Notificaci&oacute;n">
							<i class="icon-calendar text-default text-size-small"></i>&nbsp;&nbsp;{{ notificacion_usuario.fecha_creacion|date:"d/m/Y h:i:s A" }}
						</li>
					</ul>
					<ul class="pull-right">
						<li data-popup="tooltip" title="" data-original-title="{{ notificacion_usuario.get_estado_display }}">
							<i class="{{ notificacion_usuario.get_clase_leido_noleido }} text-default"></i> 
						</li>
					</ul>
				</div>
			</div>
		</div>
		{% endfor %}
	</div>
	{% else %}
		<h3 class="text-center"><small>No posee notificaciones</small></h3>
	{% endif %}
{% endblock %}

{% block footer_js %}
	<script>

	</script>
{% endblock %}