{% extends 'application/index.html' %}
{% load application_extras %}

{% block title %} Dashboard {% endblock title %}

{% block content %}
    <div class="container">
        <hr/>
        {% include 'application/includes/django_messages.html' %}
        {% for s in sensors %}
            <div class="row">
                <div class="container">
                    <div class="card-body shadow">
                        <div class="card-content">
                            <div class="row">
                                <div class="col d-flex justify-content-center">
                                    <p>Name: <b>{{ s.name }}</b></p>
                                </div>
                                <div class="col d-flex justify-content-center">
                                    <p>Location: {{ s.location }}</p>
                                </div>
                                <div class="col d-flex justify-content-center">
                                    {% with records|get_item:s.topic as values %}
                                        <p>
                                            {{ s.sensor_type.name }}:
                                            {% if values != NoneType %}
                                                {{ values|last }} {{ s.sensor_type.units }}
                                            {% else %}
                                                No data
                                            {% endif %}
                                        </p>
                                    {% endwith %}
                                </div>
                                <div class="col d-flex justify-content-center">
                                    <a href="{% url 'delete-sensor' s.id %}" type="button"
                                       class="btn btn-outline-danger">Delete</a>
                                </div>
                            </div>
                        </div>
                        <div class="card-details">
                            <hr/>
                            <div class="row">
                                <div class="col-4">
                                    <h4>Details:</h4>
                                    <ul>
                                        <li><b>Sensor type:</b> {{ s.model.name }}</li>
                                        <li><b>MQTT topic:</b> {{ s.topic }}</li>
                                        <li><b>Average value:</b> {{ averages|get_item:s.topic }} </li>
                                        <li><b>Min value:</b> {{ minimums|get_item:s.topic }} </li>
                                        <li><b>Max value:</b> {{ maxima|get_item:s.topic }}</li>
                                    </ul>
                                </div>
                                <div class="col-8" id="sensor-graph">
                                    {% autoescape off %}
                                    {% with figures|get_item:s.topic as graph %}
                                    {% if graph != NoneType %}
                                        {{ graph }}
                                    {% else %}
                                        No data available to render graph.
                                    {% endif %}
                                    {% endwith %}
                                    {% endautoescape %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="container text-center">
                <p style="color: #7a848c">You have no sensors yet.</p>
            </div>
        {% endfor %}
    </div>

    <script>
        $(".card-content").click(function () {
            $cardContent = $(this);
            $cardDetails = $cardContent.next();
            $cardDetails.slideToggle(500);
        });
    </script>

{% endblock content %}