<div class="mt-5">
        {% if settings('partes', 'nuevo_checklist') == '1' %}
        <p class="font-weight-bold">
                <button data-toggle="modal" href="#nuevoChecklist" data-target="#nuevoChecklist" type="button" class="btn btn-phoenix-primary w-100">Nuevo checklist</button>
        </p>
        {% endif %}
	{% for subtarea in tarea.subtareas %}
                <div class="form row" id="subtarea_{{subtarea.idtarea}}">
                        <div class="col-10">
                                <div class="form-group">
                                        <div class="custom-control custom-checkbox">
                                                <input name="checkbox_subtarea_{{subtarea.idtarea}}" {% if subtarea.checked %}checked disabled{% endif %} type="checkbox" class="checklistsubtarea custom-control-input" id="customCheck{{subtarea.idtarea}}">
                                                <label class="custom-control-label" for="customCheck{{subtarea.idtarea}}">{{subtarea.nombre}}</label>
                                        </div>
                                </div>
                        </div>
                        <div class="col-1">
                                  {% if settings('partes', 'imagenes') == '1' %}
                                <input onchange="mostrarImagenes(this, {{subtarea.idtarea}})" type="file" id="archivos{{subtarea.idtarea}}" multiple style="display: none;">
                                <button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#modalCamara{{subtarea.idtarea}}">
                                        <i class="fas fa-camera"></i>
                                </button>
                                {% endif %}
                        </div>
                        <div class="col-1">
                                <button type="button" class="btn btn-outline-danger btn-sm" onclick="eliminarChecklist({{subtarea.idtarea}})">
                                        <svg class="svg-inline--fa fa-trash" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 80V56C0 42.7 10.7 32 24 32H104l17-17c6-6 14.1-9 22.6-9H304c8.5 0 16.6 3 22.6 9l17 17H424c13.3 0 24 10.7 24 24V80c0 13.3-10.7 24-24 24H24C10.7 104 0 93.3 0 80zm53.2 55.5l21.4 310.7C76.4 475.1 100.7 496 128 496H320c27.3 0 51.6-20.9 53.4-49.8L395.8 135.5c.8-12.2-8.9-23.1-21.2-23.1H74.4c-12.3 0-22 10.9-21.2 23.1z"/></svg>
                                </button>
                        </div>
                </div>
		<div class="container collapse" id="collapse_subtarea_{{subtarea.idtarea}}">
			<div class="col-12 d-flex align-items-center font-weight-bold mt-4 mb-4">
				<div class="row mt-3">
					<div class="col-6">
						<div class="form-group">
					    	<div class="form-group">
								<input type="time" name="hora_inicio_subtarea_{{subtarea.idtarea}}" value="{{subtarea.hora_inicio}}" class="form-control" step="1" autocomplete="off">
								<label for="hora_inicio_subtarea">Inicio:</label>
					    	</div>
						</div>
					</div>
					<div class="col-6">
						<div class="form-group">
							<div class="form-group">
								<input type="time" name="hora_fin_subtarea_{{subtarea.idtarea}}" value="{{subtarea.hora_fin}}" class="form-control" step="1" autocomplete="off">
								<label for="hora_fin_subtarea">Fin:</label>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-12 d-flex align-items-center font-weight-bold mt-4">
				<p class="mr-3 super_center">Operario</p>
				<select class="form-control" id="opciones" name="operario_subtarea_{{subtarea.idtarea}}">
				    <option value="-1">Sin Operario</option>
				    {% for operario in fsc.orden.getTareas()['operariosList'] %}
				    <option value="{{operario.nick}}" {% if operario.nick == subtarea.operarios %} selected {% endif %}>
					{{operario.nick}}
				    </option>
				    {% endfor %}
				</select>
			</div>
			<div class="col-12 mt-5 mb-4">
				<div class="form-group justify-content-center">
					<b><label for="Idesc">Comentarios</label></b>
				</div>
				<div id="summernote{{tarea.idtarea}}{{subtarea.idtarea}}"></div>
				<script>
				    $(document).ready(function() {
					$('#summernote{{tarea.idtarea}}{{subtarea.idtarea}}').summernote({
							toolbar: [
								['style', ['bold', 'italic', 'underline', 'clear']],
								['fontsize', ['fontsize']],
								['color', ['color']],
								['para', ['ul', 'ol', 'paragraph']],
							],
					});
				    });
				</script>
			</div>
			<p>
				<button class="btn btn-outline-info btn-block" type="button" data-toggle="collapse"
					data-target="#collapseObservaciones{{subtarea.idtarea}}" aria-expanded="false"
					aria-controls="collapseObservaciones{{subtarea.idtarea}}">
					<i class="fas fa-search" aria-hidden="true"></i> &nbsp;Ver Comentarios
				</button>
			</p>
			<div class="collapse" id="collapseObservaciones{{subtarea.idtarea}}">
				{% for comentario in subtarea.comentarios %}
				{% if comentario is not empty %}
			    	<div class="row mt-4">
						<textarea type="text" class="form-control" readonly>{{comentario}}</textarea>
			    	</div>
				{% endif %}
				{% endfor %}
			</div>
		</div>
		<div id="modalContainer{{subtarea.idtarea}}"></div>
		<script>
			imprimirModalCamara({{subtarea.idtarea}})
		</script>
		{% for file in subtarea.files %}
		<script>
			mostrarImagenesGuardadas({{ subtarea.idtarea }}, {{ file.filename|json_encode|raw }}, {{ myFilesUrl(file.path)|json_encode|raw }}, {{ file.idfile }});
		</script>
		{% endfor %}
	{% endfor %}
</div>
