{% extends "base.html" %}
<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
    {{ super() }}
    <script src="{{ url_for('static', filename='js/index.js') }}" type="text/javascript"></script>
    {% endblock %}
</head>
<body>
{% block content %}
<div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12">
                  <div class="info-box">
                    <span class="info-box-icon bg-aqua"><i class="ion ion-thermometer"></i></span>
                    <div class="info-box-content">
                      <span class="info-box-text">Temperature</span>
                      <span class="info-box-number"><span id="temp_text">45</span><small>°C</small></span>
                    </div><!-- /.info-box-content -->
                  </div><!-- /.info-box -->
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                  <div class="info-box">
                    <span class="info-box-icon bg-aqua"><i class="ion ion-waterdrop"></i></span>
                    <div class="info-box-content">
                      <span class="info-box-text">Humidity</span>
                      <span class="info-box-number"><span id="humidity_text">45</span><small>%</small></span>
                    </div><!-- /.info-box-content -->
                  </div><!-- /.info-box -->
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                  <div class="info-box">
                    <span id="status_color" class="info-box-icon bg-red"><i class="fa fa-tachometer"></i></span>
                    <div class="info-box-content">
                      <span class="info-box-text">A/C Status</span>
                      <span id="status_text" class="info-box-number">Off</span>
                    </div><!-- /.info-box-content -->
                  </div><!-- /.info-box -->
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="box no-border flat">
                        <div class="box-header">
                            <h3 class="box-title">
                                A/C Control
                            </h3>
                        </div>
                        <div class="box-body">
                            <div class="btn-group btn-group-justified" role="group">
                                <div class="btn-group" role="group">
                                    <button id="btn_on" class="btn btn-success btn-sm btn-flat">Turn On</button>
                                </div>
                                <div class="btn-group" role="group">
                                <button id="btn_off" class="btn btn-danger btn-sm btn-flat">Turn Off</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="box box-primary">
                        <div class="box-header">
                            <h3 class="box-title">
                                Temperature
                            </h3>
                            <div class="box-tools pull-right">
                                <button class="btn btn-box-tool" data-widget="collapse">
                                    <i class="fa fa-minus"></i>
                                </button>
                                <button class="btn btn-box-tool" data-widget="remove">
                                    <i class="fa fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="box-body">
                            <div class="chart">
                                <canvas id="tempChart" width="694" height="260" style="width: 694px; height: 260px;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                 <div class="col-md-6">
                    <div class="box box-info">
                        <div class="box-header">
                            <h3 class="box-title">
                                Humidity
                            </h3>
                            <div class="box-tools pull-right">
                                <button class="btn btn-box-tool" data-widget="collapse">
                                    <i class="fa fa-minus"></i>
                                </button>
                                <button class="btn btn-box-tool" data-widget="remove">
                                    <i class="fa fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="box-body">
                            <div class="chart">
                                <canvas id="humidityChart" width="694" height="260" style="width: 694px; height: 260px;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}
</body>
</html>