{% extends "layout.html" %}
{% import "_paging.html" as paging %}
{% import "gestion/macros.html" as objetivos %}

{% block content %}
<div class="col-12 row">
	
	<div class="col-12 ml-3 mb-2">
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb">
				{% for node in root.lineage() %}
					{% if loop.first %}
				<li class="breadcrumb-item"><a href="{{ url_for('gestion.main', uri=node.padre.modulo_raw.uri) }}"><i class="mr-2 fas fa-fw fa-{{ node.tipo }}"></i>{{ node.padre.nombre }} ({{ node.responsable.nombre }})</a></li>
					{% else %}
				<li class="breadcrumb-item"><a href="{{ url_for('gestion.show',objetivoid=node.id) }}">{{node.nombre}}</a></li>
					{% endif %}
				{% endfor %}
				<li class="breadcrumb-item">{{ root.nombre }}</a></li>
			</ol>
		</nav>
	</div>
	
	
	<div class="col-12 ml-3">
		<div class="card shadow mb-4">
			<div class="card-header">
				<div class="d-flex flex-row align-items-center justify-content-between">
		
					{% if root.tipo %}
					<h3 class="m-0 font-weight-bold text-dark flex-grow-1"><i class="mr-2 fas fa-{{ root.tipo }}"></i>{{ root.nombre }}</h3>
					{% else %}
					<h3 class="m-0 font-weight-bold text-dark flex-grow-1">{{ root.nombre }}</h3>
					{% endif %}
		
				<div class="d-flex flex-row align-items-center justify-content-between">
					{% if root.is_manager and root.estado < 100 %}
					<div class="dropdown no-arrow">
						<button class="btn btn-secondary btn-circle dropdown-toggle" type="button" id="dropdownConfig{{ root.id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-cog"></i></button>
						<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownConfig{{ root.id }}">
							<a class="dropdown-item text-gray-900" data-toggle="modal" data-target="#modalConfigObjetivo{{ root.id }}" data-oid="{{ root.id }}" data-nombre="{{ root.nombre }}" data-rid="{{ root.responsableid }}" data-iid="{{ root.invitadosid }}" data-desc="{{ root.descripcion }}"><i class="mr-2 fas fa-cog"></i>Configurar {{label}}</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item text-dark" data-toggle="modal" data-target="#modalConfigObjetivo{{ root.id }}" data-pid="{{ root.id }}" data-rid="{{ root.responsableid }}"><i class="mr-2 fas fa-{{ root.icon_class }}"></i>Agregar Sub-{{label}}</a>
							<a class="dropdown-item text-gray-900" data-toggle="modal" data-target="#modalConfigActa" data-pid="{{ root.id }}" ><i class="mr-2 fas fa-file-signature"></i>Nueva Acta</a>
							<a class="dropdown-item text-gray-900" data-toggle="modal" data-target="#modalConfigIndicador" data-pid="{{ root.id }}" ><i class="mr-2 fas fa-chart-line"></i>Agregar Indicador</a>
							<a class="dropdown-item text-gray-900" data-toggle="modal" data-target="#modalConfigActividad" data-pid="{{ root.id }}" ><i class="mr-2 fas fa-icons"></i>Agregar Actividad</a>
						</div>
					</div>
					{% endif %}
					<a href="{{ url_for('gestion.reporte', objetivoid=root.id) }}" class="btn btn-outline-info btn-lg ml-2"><i class="fas fa-2x fa-file-download"></i></a>
					<a class="btn btn-outline-info btn-lg ml-2" data-toggle="modal" data-target="#modalConfirmaReporteParcial" data-oid="{{ root.id }}" ><i class="mr-2 fas fa-2x fa-file-pdf"></i>Reporte Parcial</a>

				</div>
				</div>
			</div>

			<div class="card-body">
			   <h5 class="card-title text-muted">Descripción</h5>
				   {%- autoescape false %}
				<p class="card-text">{{ root.descripcion | replace("\n", "<br/>") }}</p>
				   {% endautoescape -%}
			</div>

			<div class="card-body">
			   <h5 class="card-title text-muted">Comisión Responsable</h5>
				<p class="card-text">{{ root.responsable.nombre }}</p>
			</div>

			<div class="card-body px-4">
			{% for indicador in root.indicadores %}
				{% if loop.first %}
				<div class="list-group">
				<div class="list-group-item list-group-item-primary"><i class="mr-2 fas fa-fw fa-chart-line"></i>Indicadores</div>
				{% endif %}
					<div class="list-group-item">{{ objetivos.indicador_li( indicador, root.is_manager, root.estado ) }}</div>
				{% if loop.last %}
				</div>
				{% endif %}
			{% else %}
				<p class="card-text text-center text-muted">Este {{label}} no tinene indicadores.</p>
			{% endfor %}
			</div>

			{% for actas in root.actas %}
				{% if loop.first %}
			<div class="card-body px-4">
				<div class="list-group">
						<div class="list-group-item list-group-item-secondary"><i class="mr-2 fas fa-fw fa-file-signature"></i>Actas</div>
				{% endif %}
					<div class="list-group-item">{{ objetivos.acta_li( actas, root.is_manager, root.estado ) }}</div>
				{% if loop.last %}
				</div>
			</div>
				{% endif %}
			{% endfor %}
			
			<div class="card-body px-4">
			{% for actividad in root.actividades %}
				{% if loop.first %}
				<div class="list-group">
						<div class="list-group-item list-group-item-success"><i class="mr-2 fas fa-fw fa-icons"></i>Actividades / Acciones</div>
				{% endif %}
					<div class="list-group-item">{{ objetivos.actividad_li( actividad, root.is_manager, root.estado ) }}</div>
				{% if loop.last %}
				</div>
				{% endif %}
			{% else %}
				<p class="card-text text-center text-muted">Este {{label}} no tinene actividades.</p>
			{% endfor %}
			</div>

			{% for hijo in root.hijos %}
			{% if loop.first and loop.last %}
				<div class="card-body row px-4">
				{{ objetivos.resumen_li( hijo, label, single=True ) }}
				</div>
			{% else %}
				{% if loop.first %}
				<div class="card-body row px-4">
				{% endif %}
					{{ objetivos.resumen_li( hijo, label ) }}
				{% if loop.last %}
				</div>
				{% endif %}
			{% endif %}
			{% endfor %}
		</div>
	</div>
</div>
{% endblock content %}

{% block css %}
{{ objetivos.show_css() }}
{% endblock css %}

{% block js %}
{% if tag == 'gestion.personal' %}
	{{ objetivos.base_js(root, redirect=url_for('gestion.show', objetivoid=root.id), invitado=False) }}
	{{ objetivos.show_js(root, redirect=url_for('gestion.show', objetivoid=root.id), invitado=False) }}
{% else %}
	{{ objetivos.base_js(root, redirect=url_for('gestion.show', objetivoid=root.id), invitado=True) }}
	{{ objetivos.show_js(root, redirect=url_for('gestion.show', objetivoid=root.id), invitado=True) }}
{% endif %}
{% endblock %}
