{% extends 'layout.html' %}

{% block title %}JERNIHINin | Prediksi Air{% endblock %}

{% block content %}
<div class="tm-container tm-container-predict">
    <div class="tm-predict">
        <div class="tm-predict-result">
            {% if result == 5 %}
            <p class="tm-predict-title">Kualitas air Anda <span class="result green">Sangat Bagus</span></p>
            <p class="tm-predict-desc"><span>Anda dapat meminum air Anda dengan aman</span></p>
            {% endif %}
    
            {% if result == 4 %}
            <p class="tm-predict-title">Kualitas air Anda <span class="result green">Bagus</span></p>
            <p class="tm-predict-desc"><span>Anda dapat meminum air Anda dengan aman</span></p>
            {% endif %}
    
            {% if result == 3 %}
            <p class="tm-predict-title">Kualitas air Anda <span class="result orange">Sedang</p>
            <p class="tm-predict-desc"><span>Anda dapat meminum air Anda, tetapi direkomendasikan untuk merebusnya terlebih dahulu</span></p>
            <p class="tm-predict-desc"><span>"<a href="https://projectchild.ngo/blog/2019/08/01/standardisasi-kualitas-air" target="_blank">Standardisasi Kualitas Air Menurut Dinas Kesehatan dan Dinas Lingkungan Hidup</a>"</span></p>
            {% endif %}
    
            {% if result == 2 %}
            <p class="tm-predict-title">Kualitas air Anda <span class="result orange">Buruk</span></p>
            <p class="tm-predict-desc"><span>Air Anda perlu dilakukan penjernihan dan pengujian lebih lanjut</span></p>
            <p class="tm-predict-desc"><span>"<a href="https://projectchild.ngo/blog/2019/08/01/standardisasi-kualitas-air" target="_blank">Standardisasi Kualitas Air Menurut Dinas Kesehatan dan Dinas Lingkungan Hidup</a>"</span></p>
            {% endif %}
    
            {% if result == 1 %}
            <p class="tm-predict-title">Kualitas air Anda <span class="result red">Sangat Buruk</span></p>
            <p class="tm-predict-desc"><span>Anda tidak dapat meminum air Anda</span></p>
            <p class="tm-predict-desc"><span>"<a href="https://projectchild.ngo/blog/2019/08/01/standardisasi-kualitas-air" target="_blank">Standardisasi Kualitas Air Menurut Dinas Kesehatan dan Dinas Lingkungan Hidup</a>"</span></p>
            {% endif %}

            {% if result %}
            <a href="/predict" class="tm-btn btn-blue tm-mt-35">Prediksi Ulang</a>
            {% endif%}
        </div>
        
        <div class="tm-close">
            <a href="/" class="tm-close-popup">
                <i class="fas fa-times"></i>
            </a>
        </div>

        <form id="contact-form" action="/result" method="POST">
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        <input type="nunmber" name="fecal" class="form-control" id="fecal" placeholder="WQI Fecal" onkeypress="return isNumber(event)" required>
                        <label for="fecal" class="form-label">WQI Fecal</label>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        <input type="nunmber" name="oxygen" class="form-control" id="oxygen" placeholder="WQI Oxygen" onkeypress="return isNumber(event)" required>
                        <label for="oxygen" class="form-label">WQI Oxygen</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        <input type="nunmber" name="ph" class="form-control" id="ph" placeholder="WQI pH" onkeypress="return isNumber(event)" required>
                        <label for="ph" class="form-label">WQI pH</label>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        <input type="nunmber" name="tot_sediment" class="form-control" id="tot_sediment" placeholder="WQI Total Sediment" onkeypress="return isNumber(event)" required>
                        <label for="tot_sediment" class="form-label">WQI Total Sediment</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        <input type="nunmber" name="temp" class="form-control"  id="temp" placeholder="WQI Temperature" onkeypress="return isNumber(event)" required>
                        <label for="temp" class="form-label">WQI Temperature</label>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        <input type="nunmber" name="nitrogen" class="form-control" id="nitrogen" placeholder="WQI Nitrogen" onkeypress="return isNumber(event)" required>
                        <label for="nitrogen" class="form-label">WQI Nitrogen</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        <input type="nunmber" name="phosphorus" class="form-control" id="phosphorus" placeholder="WQI Phosphorus" onkeypress="return isNumber(event)" required>
                        <label for="phosphorus" class="form-label">WQI Phosphorus</label>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-floating">
                        <input type="nunmber" name="turbidity" class="form-control" id="turbidity" placeholder="WQI Turbidity" onkeypress="return isNumber(event)" required>
                        <label for="turbidity" class="form-label">WQI Turbidity</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <button type="reset" class="tm-btn btn-red">Reset</button>
                <button type="submit" class="tm-btn btn-blue tm-ml-10">Prediksi</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}