{% extends "base.html" %}
{% block title %}Subida{% endblock %}

{% block content %}

<!-- Row Header -->
<div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
    <h1 class="display-4">Sensores</h1>
</div>

<div class="container">
    <div class="card-deck mb-3 text-center"></div>

    <!-- Sensors row -->
    <div class="row">
        {% for i in probes %}
        <div class="col-sm">
            <div class="card mb-4 shadow-sm">
                <div class="card-header">
                    <h4 class="my-0 font-weight-normal">{{ i.sensor }}</h4>
                </div>

                <div class="card-body">
                    <div class="text-center">
                        <img src="{{ url_for('static',filename='img/'+i.img) }}" class="rounded" alt="..."
                            height="200px" width="200px" />
                    </div>
                </div>

                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#upload{{i.sensor}}">
                    Subir datos
                </button>
            </div>
        </div>
        {% endfor%}
    </div>

    <!-- Setting up the modal foreach probe -->
    {% for i in probes %}
    <div class="modal fade" id="upload{{i.sensor}}" role="dialog">
        <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Subir datos de {{ i.sensor }}</h4>

                    <button type="button" class="close" data-dismiss="modal">
                        &times;
                    </button>
                </div>

                <div class="modal-body">

                    <!-- Modal header -->
                    <div class="upload-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
                        <h2 class="display-5">{{ i.sensor }}</h2>
                    </div>

                    <div class="container">
                        <div class="text-center">

                            <!-- Modal form -->
                            <form class="list-group list-group-flush" action="{{pagename}}/uploader" method="POST"
                                enctype="multipart/form-data">

                                <!-- File input -->
                                <div class="list-group-item" style="padding-left: 50px;">
                                    <input type="file" class="form-control-file" name="file" />
                                </div>

                                <!-- Sensor select -->
                                <div class="form-group required" style="padding-top: 10px;">
                                    <label class="form-check-label" for="activeProbe" style="padding-left: 5px;">Escoge
                                        el sensor utilizado</label>
                                    <select name="activeProbe" id="activeProbe">
                                        {% for j in i.active %}
                                        <option value="{{ j }}">{{ j }}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <!-- Force station -->
                                <div class="form-group">
                                    <input class="form-check-input" type="checkbox" name="forceStation{{i.sensor}}"
                                        id="forceStation{{i.sensor}}"
                                        onchange="toggleSelect('forceStation{{i.sensor}}', 'stations{{i.sensor}}')">
                                    <label class="form-check-label" for="forceStation{{i.sensor}}"
                                        style="padding-left: 5px;">
                                        Forzar estación
                                    </label>

                                    <label class="form-check-label" for="stations{{i.sensor}}"
                                        style="padding-left: 5px;">Selecciona la estación utilizada</label>
                                    <select name="stations{{i.sensor}}" id="stations{{i.sensor}}" disabled>
                                        {% for j in i.stations %}
                                        <option value="{{ j }}">{{ j }}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <!-- Apply quality control -->
                                <div class="list-group-item" style="padding-bottom: 50px;">
                                    <input class="form-check-input" type="checkbox" id="autoSizingCheck" checked>
                                    <label class="form-check-label" for="autoSizingCheck" style="padding-left: 5px;">
                                        Aplicar control de calidad
                                    </label>
                                </div>

                                <!-- Submit -->
                                <input type="hidden" value="{{i.sensor}}" name="probe" />
                                <button type="submit" class="btn btn-primary btn-lg btn-block">Subir CSV</button>

                            </form>

                        </div>
                    </div> <!-- Close Modal Container Body -->
                </div> <!-- Close Modal Body -->
            </div> <!-- Close Modal Content -->
        </div> <!-- Close Modal dialog -->
    </div> <!-- Close Modal -->
    {% endfor %}
    <!-- End Sensors Modals -->

</div> <!-- Close container field -->

{% endblock %}