<!DOCTYPE html>
<!--
Copyright (C) 2021 Echedey López Romero <elr@disroot.org>

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="author" content="Echedey López Romero" />
        <title>Horoscope</title>
        <link rel="stylesheet" href="./frameworks/bootstrap/css/bootstrap.min.css" />
        <script src="./frameworks/jquery/jquery-3.5.1.slim.min.js"></script>
        <script src="./frameworks/bootstrap/js/bootstrap.bundle.min.js"></script>
        <link rel="stylesheet" href="./css/common.css" />
        <script type="text/javascript" src="./js/common.js"></script>
    </head>
    <body class="container">
        <div class="row my-3">
            <div class="col"></div>
            <div class="col-lg-6 col-sm-8 col-12 border border-primary rounded p-3">
                <h1 class="text-center">Horoscope</h1>
                <form action="./index.php" method="POST">
                    <div class="container mb-2">
                        <div class="row">
                            <div class="col-lg-6 col-12 p-0 pr-lg-1 mb-lg-0 mb-2">
                                <div class="form-group">
                                    <label class="d-block t-large text-center" for="month">Month</label>
                                    <?php echo CreateSelect($Months, 'month', $Month); ?>
                                    <script>AddOnChangeMonth();</script>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12 p-0 pl-lg-1">
                                <div class="form-group">
                                    <label class="d-block t-large text-center" for="day">Day</label>
                                    <?php echo CreateSelect($Days, 'day', $Day); ?>
                                </div>
                            </div>
                            <script>LimitDays();</script>
                        </div>
                    </div>
                    <div class="container">
                        <div class="row mb-2">
                            <div class="col-md-6 col-12 p-0 pr-md-1 m-md-0 mb-2">
                                <button type="submit" name="operation" value="consult"
                                        class="btn btn-primary btn-lg btn-block">Consult</button>
                            </div>
                            <div class="col-md-6 col-12 p-0 pl-md-1 m-md-0">
                                <button type="submit" name="operation" value="all"
                                        class="btn btn-secondary btn-lg btn-block">Show All</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 p-0">
                                <button type="reset" 
                                        class="btn btn-danger btn-lg btn-block"
                                        onclick="Restart()">Restart</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col"></div>
        </div>
        <div class="row mb-3">
            <div class="col-sm-1"></div>
            <div class="col-sm-10 col-12 border border-primary rounded p-2">
                <div class="container" id="result">
                    <?php echo $Result; ?>
                </div>
            </div>
            <div class="col-sm-1"></div>
        </div>
    </body>
</html>
