<script type="text/javascript" src="{{ url_for('static', filename='js/widgets/skycons.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/widgets/date-time-weather.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/widgets/date-time-weather.css') }}"></script>

<div class="date-time-weather-container">
    <div class="date" data-bind="date"></div>
    <div class="time" data-bind="time"></div>

    <h1 class="temperature">
        <canvas id="weather-icon" width="50" height="50"></canvas> &nbsp;
        <span data-bind="temperature">N/A</span>&deg;
    </h1>

    <div class="forecast" data-bind="forecast"></div>

    <div class="sensors row">
        <div class="sensor-temperature six columns">
            <i class="fa fa-thermometer"></i> &nbsp;
            <span data-bind="sensor-temperature">N/A</span>&deg;
        </div>

        <div class="sensor-humidity six columns">
            <i class="fa fa-tint"></i> &nbsp;
            <span data-bind="sensor-humidity">N/A</span>%
        </div>
    </div>
</div>

