<%- include('partials/_header'); %>

    <section>
        <div class="container py-5" style="width: 1140px;height: 789.8px;">
            <div class="row">
                <div class="col-md-8 col-xl-6 text-center mx-auto">
                    <h1 class="display-3 fw-bold">Anlık İstatistikler</h1>
                </div>
            </div>
            <div class="py-5 p-lg-5">
                <div class="row row-cols-1 row-cols-md-2 text-start justify-content-center mx-auto"
                    style="max-width: 900px;">
                    <div class="col mb-5">
                        <div class="card shadow-sm">
                            <div class="card-body px-4 py-5 px-md-5">
                                <div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
                                    style="top: 1rem;right: 1rem;position: absolute;"><i class="fas fa-sun"
                                        style="color: var(--bs-yellow);"></i></div>
                                <h4 class="fw-bold card-title" style="color: var(--bs-yellow);">Ortam Sıcaklığı</h4>
                                <h1 class="display-2" style="font-weight: bold;">
                                    <%= lastDht.temperature %> °C
                                </h1><button class="btn btn-warning shadow text-white" type="button"
                                    style="width: 180px;height: 50px; border: none !important;" onclick="location.href='/temperature'">Verileri
                                    Gör&nbsp;&nbsp;<i class="fas fa-arrow-right" style="width: 14.3px;"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="col mb-5">
                        <div class="card shadow-sm">
                            <div class="card-body px-4 py-5 px-md-5">
                                <div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
                                    style="top: 1rem;right: 1rem;position: absolute;"><i class="fas fa-tint"
                                        style="color: var(--bs-primary);border-color: var(--bs-primary);"></i></div>
                                <h4 class="fw-bold card-title" style="color: var(--bs-primary);">Ortam Nemi</h4>
                                <h1 class="display-2" style="font-weight: bold;">%<%= lastDht.humidity %></h1><button
                                    class="btn btn-primary text-white shadow" type="button"
                                    style="width: 180px;height: 50px;border: none !important;" onclick="location.href='/humidity'">Verileri
                                    Gör&nbsp;&nbsp;<i class="fas fa-arrow-right" style="width: 14.3px;"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="col mb-5">
                        <div class="card shadow-sm">
                            <div class="card-body px-4 py-5 px-md-5">
                                <div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
                                    style="top: 1rem;right: 1rem;position: absolute;"><i class="fas fa-tree"
                                        style="color: var(--bs-green);"></i></div>
                                <h4 class="fw-bold card-title"
                                    style="color: var(--bs-green);border-color: var(--bs-green);">Toprak Nemi</h4>
                                <h1 class="display-2" style="font-weight: bold;">%<%= lastSoil.soilRatio %></h1><button
                                    class="btn btn-success text-white shadow" type="button"
                                    style="width: 180px;height: 50px;border: none !important;" onclick="location.href='/soil'">Verileri
                                    Gör&nbsp;&nbsp;<i class="fas fa-arrow-right" style="width: 14.3px;"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="bg-primary-gradient">
        <div class="container py-4 py-lg-5">
            <hr>
            <div class="text-muted d-flex justify-content-between align-items-center pt-3">
                <p class="mb-0">2022 © ozkurkculer.com</p>
            </div>
        </div>
    </footer>
    <script src="js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/bold-and-bright.js"></script>
    </body>

    </html>