{% extends "navbar.html" %}
{% block content %}
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <div class="card">
                        <div class="content">
                            <div class="row">
                                <div class="col-xs-4">
                                    <div class="icon-big icon-danger text-center">
                                        <i class="fas fa-temperature-high"></i>
                                    </div>
                                </div>
                                <div class="col-xs-8">
                                    <div class="numbers">
                                        <p>Temperature</p>
                                        <span id="tempValue"></span>&#176;C
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="card">
                        <div class="content">
                            <div class="row">
                                <div class="col-xs-3">
                                    <div class="icon-big icon-info text-center">
                                        <i class="fas fa-tint"></i>
                                    </div>
                                </div>
                                <div class="col-xs-9">
                                    <div class="numbers">
                                        <p>Humidity</p>
                                        <span id="humValue"></span>%
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="card">
                        <div class="content">
                            <div class="row">
                                <div class="col-xs-3">
                                    <div class="icon-big icon-success text-center">
                                        <i class="fas fa-seedling"></i>
                                    </div>
                                </div>
                                <div class="col-xs-9">
                                    <div class="numbers">
                                        <p>Soil Moisture</p>
                                        <span id="soilValue"></span>%
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <div class="card">
                        <div class="content">
                            <div class="row">
                                <div class="col-xs-3">
                                    <div class="icon-big icon-warning text-center">
                                        <i class="fas fa-lightbulb"></i>
                                    </div>
                                </div>
                                <div class="col-xs-9">
                                    <div class="numbers">
                                        <p>Brightness Level</p>
                                        <span id="lightValue"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                        <div class="header">
                            <h4 class="title">Automated Watering</h4>
                        </div>
                        <div class="content">
                            <center>
                                <label class="toggleBtn">
                                    <input class="switch-input" id="autoSwitch" type="checkbox" onclick="auto()"/>
                                    <span class="switch-label" data-on="on" data-off="off"></span>
                                    <span class="switch-handle"></span>
                                </label>
                            </center>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="header">
                            <h4 class="title">Manual Watering</h4>
                        </div>
                        <div class="content">
                            <center>
                                <label class="toggleBtn">
                                    <input class="switch-input switch2-input" id="manualSwitch" type="checkbox"
                                           onclick="manual()"/>
                                    <span class="switch-label switch2-label" data-on="on" data-off="off"></span>
                                    <span class="switch-handle switch2-handle"></span>
                                </label>
                            </center>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="container-fluid">
                <div class="pull-right">
                   Last Update: <span id="dateTimeStamp"></span>
                </div>
            </div>
        </footer>
    </div>
{% endblock content %}