<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="pragma" content="no-cache" />

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
    <title>Facilities</title>
</head>

<body>
    <div class="nav-menu">
        <div class="space_nav">
        </div>
        <ul>
            <li><a href="{{ url_for('index') }}"><img src="{{ url_for('static', filename='img/nav_home.png') }}" alt="">&nbsp; <span>Home</span></a></li>
            <li><a href="{{ url_for('students') }}"><img src="{{ url_for('static', filename='img/nav_student.png') }}" alt="">&nbsp;<span>Students</span></a></li>
            <li><a href="{{ url_for('teachers') }}"><img src="{{ url_for('static', filename='img/nav_teacher.png') }}" alt="">&nbsp;<span>Teachers</span></a></li>
            <li><a href="{{ url_for('schools') }}"><img src="{{ url_for('static', filename='img/nav_school.png') }}" alt="">&nbsp;<span>Schools</span></a></li>
            <li><a href="{{ url_for('classrooms') }}"><img src="{{ url_for('static', filename='img/nav_classrooms.png') }}" alt="">&nbsp;<span>Classrooms</span></a></li>
            <li><a href="{{ url_for('facilities') }}"><img src="{{ url_for('static', filename='img/nav_facilities.png') }}" alt="">&nbsp; <span>Facilities</span></a></li>
        </ul>
    </div>
    <div class="container">
        <div class="topbar">
            <div class="main_title">
                Facilities
            </div>
        </div>
        <div class="summarycard">
            <div class="containercards">
                <!-- <div class="card">
                    <div class="box">
                        <h2>{% print(facilities_summary['enrolment_lt_50']) %}</h2>
                        <h3>Enrolment &lt;= 50</h3>
                    </div>
                    <div class="icon-case">
                        <img src="{{ url_for('static', filename='img/team.png') }}" alt="">
                    </div>
                </div> -->
                <div class="card">
                    <div class="box">
                        <h2>{% print(facilities_summary['drinking_water']) %}</h2>
                        <h3>Schools with Drinking Water</h3>
                    </div>
                    <div class="icon-case">
                        <img src="{{ url_for('static', filename='img/water.png') }}" alt="">
                    </div>
                </div>
                <div class="card">
                    <div class="box">
                        <h2>{% print(facilities_summary['girls_toilet']) %}</h2>
                        <h3>Schools with Girls' Toilet</h3>
                    </div>
                    <div class="icon-case">
                        <img src="{{ url_for('static', filename='img/toilet.png') }}" alt="">
                    </div>
                </div>
                <!-- <div class="card">
                    <div class="box">
                        <h2>{% print(facilities_summary['ramp']) %}</h2>
                        <h3>Schools with Ramp</h3>
                    </div>
                    <div class="icon-case">
                        <img src="{{ url_for('static', filename='img/ramp.png') }}" alt="">
                    </div>
                </div> -->
                <div class="card">
                    <div class="box">
                        <h2>{% print(facilities_summary['single_classroom']) %}</h2>
                        <h3>Single Classroom Schools</h3>
                    </div>
                    <div class="icon-case">
                        <img src="{{ url_for('static', filename='img/s_class.png') }}" alt="">
                    </div>
                </div>
                <div class="card">
                    <div class="box">
                        <h2>{% print(facilities_summary['single_teacher']) %}</h2>
                        <h3>Single Teacher Schools</h3>
                    </div>
                    <div class="icon-case">
                        <img src="{{ url_for('static', filename='img/s_teacher.png') }}" alt="">
                    </div>
                </div>
            </div>
            <div class="graphcontainer" >
                <div class="trend-graph" >
                    <div class="topcardinf">
                        Trend by state
                    </div>
                    <form method="POST" action="/get_trend_for_schools_with_facilities">
                        Select state:
                        <select name="state_code" class="state_code">                            
                            <option value="1">JAMMU & KASHMIR</option>
                            <option value="2">HIMACHAL PRADESH</option>
                            <option value="3">PUNJAB</option>
                            <option value="4">CHANDIGARH</option>
                            <option value="5">UTTARAKHAND</option>
                            <option value="6">HARYANA</option>
                            <option value="7">DELHI</option>
                            <option value="8">RAJASTHAN</option>
                            <option value="9">UTTAR PRADESH</option>
                            <option value="10">BIHAR</option>
                            <option value="11">SIKKIM</option>
                            <option value="12">ARUNACHAL PRADESH</option>
                            <option value="13">NAGALAND</option>
                            <option value="14">MANIPUR</option>
                            <option value="15">MIZORAM</option>
                            <option value="16">TRIPURA</option>
                            <option value="17">MEGHALAYA</option>
                            <option value="18">ASSAM</option>
                            <option value="19">WEST BENGAL</option>
                            <option value="20">JHARKHAND</option>
                            <option value="21">ODISHA</option>
                            <option value="22">CHHATTISGARH</option>
                            <option value="23">MADHYA PRADESH</option>
                            <option value="24">GUJARAT</option>
                            <option value="25">DAMAN & DIU</option>
                            <option value="26">DADRA & NAGAR HAVELI</option>
                            <option value="27">MAHARASHTRA</option>
                            <option value="28">ANDHRA PRADESH</option>
                            <option value="29">KARNATAKA</option>
                            <option value="30">GOA</option>
                            <option value="31">LAKSHADWEEP</option>
                            <option value="32">KERALA</option>
                            <option value="33">TAMIL NADU</option>
                            <option value="34">PUDUCHERRY</option>
                            <option value="35">ANDAMAN & NICOBAR ISLANDS</option>
                            <option value="36">TELANGANA</option>
                        </select>
                        <input name="get_trend_for_schools_with_facilities" type="submit" value="Submit">
                    </form>
                    <div>
                        <img src="{{ url_for('static', filename=trend_school_facilities) }}">
                    </div>
                </div>
            </div>
            <div class="graphcontainer" >
                <div class="card-graph">
                    <div class="topcardinf">
                        <!-- Distribution across states of School Facilities: {% print(school_facility) %} -->
                        Distribution across states by Dimension
                    </div>
                    <form method="POST" action="/get_distribution_of_school_facilities">
                        Select Year:
                        <select name="year" class="year">
                            <option value="2016">2016</option>
                            <option value="2015">2015</option>
                            <option value="2014">2014</option>
                            <option value="2013">2013</option>
                            <option value="2012">2012</option>
                            <option value="2011">2011</option>
                            <option value="2010">2010</option>
                            <option value="2009">2009</option>
                            <option value="2008">2008</option>
                            <option value="2007">2007</option>
                            <option value="2006">2006</option>
                        </select>
                        Select Dimension:
                        <select name="facility" class="facility">
                            <!-- <option value="enrolment_lt_50">Enrolment &lt;= 50</option> -->
                            <option value="drinking_water">Schools with Drinking Water</option>
                            <option value="girls_toilet">Schools with Girls' Toilet</option>
                            <!-- <option value="ramp">Schools with Ramp</option> -->
                            <option value="single_classroom">Single Classroom Schools</option>
                            <option value="single_teacher">Single Teacher Schools</option>
                        </select>
                        <input name="get_distribution_of_school_facilities" type="submit" value="Submit">
                    </form>
                    <div>
                        <img src="{{ url_for('static', filename=distribution_school_facility) }}">
                    </div>
                </div>
            </div>
            <div class="graphcontainer" >
                <div class="card-graph">
                    <div class="topcardinf">
                        Top Performing States
                    </div>
                    <table>
                        <tr>
                            <th>Rank</th>
                            <th>Name</th>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>{% print(school_facility_summary['top3'][0]) %}</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>{% print(school_facility_summary['top3'][1]) %}</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>{% print(school_facility_summary['top3'][2]) %}</td>
                        </tr>
                    </table>
                </div>
                <div class="card-graph">
                    <div class="topcardinf">
                        Worst Performing States
                    </div>
                    <table>
                        <tr>
                            <th>Rank</th>
                            <th>Name</th>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>{% print(school_facility_summary['bottom3'][0]) %}</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>{% print(school_facility_summary['bottom3'][1]) %}</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>{% print(school_facility_summary['bottom3'][2]) %}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>

</html>