{% load static %}
<div class="legenda" id="legenda" style="bottom: 0px;display:none">
    <input type="hidden" id="infoLongitude">
    <input type="hidden" id="infoLatitude">
    <input type="hidden" id="infoLimitx">

    <div class="row">
        <div class="col-xs-12">
            <div class="col-md-4" style="min-width: 150px;">
                <div class="form-group">
                    <label class="text-semibold">LEGENDA</label>

                    <div>
                        <table>
                            <tr>
                                <th>
                                    <div class="square" style="  border: solid 10px #ffff00;
                                    width: 30px;
                                    height: 20px;margin-bottom: 5px;">
                                        <img/>
                                    </div>
                                </th>
                                <td>
                                    <div style="margin-bottom: 5px;">
                                        &nbsp;&nbsp;&nbsp;Pemukiman
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <div class="square" style="  border: solid 10px #ece0cf;
                                    width: 30px;
                                    height: 20px;margin-bottom: 5px;">
                                        <img/>
                                    </div>
                                </th>
                                <td>
                                    <div style="margin-bottom: 5px;">
                                        &nbsp;&nbsp;&nbsp;Sawah
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <div class="square" style="  border: solid 10px #ff1fff;
                                    width: 30px;
                                    height: 20px;margin-bottom: 5px;">
                                        <img/>
                                    </div>
                                </th>
                                <td>
                                    <div style="margin-bottom: 5px;">
                                        &nbsp;&nbsp;&nbsp;Tanah Terbuka
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <div class="square" style="border: solid 10px #5cff5c;
                                    width: 30px;
                                    height: 20px;margin-bottom: 5px;">
                                        <img/>
                                    </div>
                                </th>
                                <td>
                                    <div style="margin-bottom: 5px;">
                                        &nbsp;&nbsp;&nbsp;Perkebunan
                                    </div>
                                </td>
                            </tr>
                            <th>
                                <div class="square" style="border: solid 10px #ffc65c;
                                width: 30px;
                                height: 20px;margin-bottom: 5px;">
                                    <img/>
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Savana / Padang rumput
                                </div>
                            </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-4" style="min-width: 150px;">
                <div class="form-group" style="margin-top: 30px;">
                    <table>
                        <tr>
                            <th>
                                <div class="square" style="  border: solid 10px #b9894b;
                                width: 30px;
                                height: 20px;margin-bottom: 5px;">
                                    <img/>
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Pertanian Lahan Kering
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div class="square" style="  border: solid 10px #C0C0C0;
                                width: 30px;
                                height: 20px;margin-bottom: 5px;">
                                    <img/>
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Pertanian Lahan Kering Campur
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div class="square" style="  border: solid 10px #00db00;
                                width: 30px;
                                height: 20px;margin-bottom: 5px;">
                                    <img/>
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Hutan Tanaman
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div class="square" style="border: solid 10px #caa677;
                                width: 30px;
                                height: 20px;margin-bottom: 5px;">
                                    <img/>
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Pertambangan
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div class="square" style="border: solid 10px #c2a500;
                            width: 30px;
                            height: 20px;margin-bottom: 5px;">
                                    <img/>
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Transmigrasi
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>



            <div class="col-md-4" style="min-width: 150px;">
                <div class="form-group" style="margin-top: 30px;">
                    <table>
                        <tr>
                            <th>
                                <div class="square" style="  border: solid 10px #004200;
                                width: 30px;
                                height: 20px;margin-bottom: 5px;">
                                    <img/>
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Hutan Lahan Kering Primer
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div class="square" style="  border: solid 10px #009e00;
                                width: 30px;
                                height: 20px;margin-bottom: 5px;">
                                    <img/>
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Hutan Lahan Kering Sekunder
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div class="square" style="  border: solid 10px #002400;
                                width: 30px;
                                height: 20px;margin-bottom: 5px;">
                                    <img/>
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Belukar
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div class="square" style="border: solid 10px #424200;
                                width: 30px;
                                height: 20px;margin-bottom: 5px;">
                                    <img/>
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Belukar Rawa
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="footer" id="thisFooter" style="bottom: 10px; left: 0px;">
    <input type="hidden" id="infoLongitude">
    <input type="hidden" id="infoLatitude">
    <input type="hidden" id="infoLimitx">
    <div>
        <a href="#" class="btn btn-default" id="button_hide"><span class="caret" style="margin-left: -5px;"></span></a>
    </div>
    <div class="row">
        <div class="col-md-3"></div>

        <div class="col-md-6 content-footer">
            <div class="row" id="info-footer">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-4" style="min-width: 150px;">
                            <div class="form-group">
                                <table>
                                    <tr>
                                        <th>Luas Wilayah</th>
                                        <td>: {{ global.1 }}</td>
                                    </tr>
                                    <tr>
                                        <th>Jumlah Kecamatan</th>
                                        <td>: {{ global.5 }}</td>
                                    </tr>

                                    <tr>
                                        <th>Jumlah Kelurahan</th>
                                        <td>: {{ global.6 }}</td>
                                    </tr>

                                    <tr>
                                        <th>Jumlah Penduduk</th>
                                        <td>: {{ global.19 }}</td>
                                    </tr>

                                    <tr>
                                        <th>Jumlah KK</th>
                                        <td>: {{ global.20 }}</td>
                                    </tr>
                                    <tr>
                                        <th>Jumlah Laki-laki</th>
                                        <td>: {{ global.21 }}</td>
                                    </tr>
                                    <tr>
                                        <th>Jumlah Perempuan</th>
                                        <td>: {{ global.22 }}</td>
                                    </tr>

                                </table>

                            </div>
                        </div>
                        <div class="col-md-4" style="min-width: 150px;">
                            <div class="form-group">
                                <table>
                                    <tr>
                                        <th>Jumlah Kantor Administrasi</th>
                                        <td>: {{ global.23 }}</td>
                                    </tr>
                                    <tr>
                                        <th>Jumlah Rumah Sakit</th>
                                        <td value=>: {{ global.11 }}</td>
                                    </tr>
                                    <tr>
                                        <th>Jumlah Puskesmas</th>
                                        <td>: {{ global.10 }}</td>
                                    </tr>
                                    <tr>
                                        <th>Jumlah Layanan Kesehatan</th>
                                        <td>: {{ global.24 }}</td>
                                    </tr>
                                    <tr>
                                        <th>Jumlah Sekolah</th>
                                        <td>: {{ global.13 }}</td>
                                    </tr>
                                    <tr>
                                        <th>Jumlah Stasiun</th>
                                        <td>: {{ global.16 }}</td>
                                    </tr>
                                    <tr>
                                        <th>Jumlah Terminal</th>
                                        <td>: {{ global.18 }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <div class="col-md-4" style="min-width: 120px;">
                            <div class="form-group">
                                <table>
                                    <tr>
                                        <th>Jumlah Cagar Budaya</th>
                                        <td>: {{ global.4 }}</td>
                                    </tr>
                                    <tr>
                                        <th>Jumlah Gardu Listrik</th>
                                        <td>: {{ global.25 }}</td>
                                    </tr>
                                    <tr>
                                        <th>Luas Pemukiman</th>
                                        <td>: {{ global.2 }}</td>
                                    </tr>
                                    <tr>
                                        <th>Luas Ladang & Sawah</th>
                                        <td>: {{ global.3 }}</td>
                                    </tr>
                                    <tr>
                                        <th>Luas Hutan Kering</th>
                                        <td>: {{ global.7 }}</td>
                                    </tr>
                                    <tr>
                                        <th>Luas Semak Belukar</th>
                                        <td>: {{ global.14 }}</td>
                                    </tr>
                                    <tr>
                                        <th>Panjang Ruas Jalan</th>
                                        <td>: {{ global.8 }}</td>
                                    </tr>
                                </table>
                            </div>

                        </div>
                        <div style="min-width: 150px;padding-left:50px;bottom:-140px">
                            <i><b>
                            Sumber : DUKCAPIL, 2019
                            </b></i>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3"></div>

    </div>
</div>
<div>
    <a href="#" class="btn btn-default" id="button_unhide" style="display: none;"><span class="caret" style="margin-left: -5px;transform: rotate(180deg)"></span></a>
</div>