{% load crispy_forms_tags %}
{% load static %}
<!DOCTYPE html>
<html lang="zxx">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Gutim Template">
    <meta name="keywords" content="Gutim, unica, creative, html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>GymBuddy</title>
    
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap"
        rel="stylesheet">
    
    <!-- Css Styles -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css">
</head>

<body style="background-color:grey;" >
    <!-- Header Section Begin -->
    <header class="header-section">
        <div class="container">
            <div class="logo" style="margin-left: 15px;">
                <a href="/home">
                    <img src="{% static 'img/logo2.png' %}" alt="">
                </a>
            </div>
            <div class="nav-menu" style="margin-top: 45px;">
                <nav class="mainmenu mobile-menu">
                    <ul>
                        <li><a href="/home">Home</a></li>
                        <li><a href="/macros">Track Macros/Calories</a></li>
                        <li><a href="/meals">Meals</a></li>
                        <li><a href="/exercises">Exercises</a></li>
                        <li class="active"><a href="/weight">Track Your Weight</a></li>
                    </ul>
                </nav>
                <a href="/profile" style="background-color: #cc3300" class="primary-btn">Profile</a>
                <a href="/logout" style="background-color: #cc3300" class="primary-btn">Logout</a>
            </div>
            <div id="mobile-menu-wrap"></div>
        </div>
    </header>
    <!-- Header End -->
    
    <!-- About Section Begin -->
    <section class="about-section spad" style="margin-top: 50px;padding-bottom: 25%;">
        <div>
            <div class="row" >
                <div class="about-text" >
                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
                    {% if messages %}
                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
                        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
                        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
                        <div class="row">
                            <div class="col-sm-6 col-sm-offset-3">
                                {% for message in messages %}
                                    <div class="alert alert-dark alert-dismissible fade show" style="width: 150%; margin-left: 55%;">
                                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                                        <p>{{ message }}</p>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                    <form method="POST">
                        {% csrf_token %}
                        <fieldset class="form-group" style=" float: left; border-width: 10px; font-size: 20px; width: 100%; margin-top: 0px; margin-left: 25%;" >
                            <legend class="border-bottom mb-4" style="font-size: 40px; font-weight: bold; color: white;">Log Weight!</legend>
                            {{form|crispy}}
                            <div class="form-group" style="margin-bottom: 10px; margin-top: 10px;">
                                <button class="primary-btn" type="submit" name="form_submit">Log</button>
                            </div>
                        </fieldset>
                    </form>
                    <table class="table" style=" float: left; margin-top: -80%; width: 100%; margin-left: 150%; color : white; font-size: 20px; border: 5px solid darkgrey;">
                        <thead>
                            {% if size != 0 %}
                                <!-- <h3 style="color: white; margin-left: 65%; margin-top: 30px; font-weight: bold; font-size: 40px;">Weight Tracker</h3> -->
                                <tr>
                                    <th scope="col" style="text-align: center">Date</th>
                                    <th scope="col" style="text-align: center">Weight</th>
                                    <th scope="col"></th>
                                </tr>
                            {% endif %}
                            {% if size == 0 %}
                                <tr>
                                    <th scope="col" style="padding: 5px;">No weight logged yet, add a log to get started!</th>
                                </tr>
                            {% endif %}
                        </thead>
                        <tbody>
                            {% for weight in listG %}

                                <tr>
                                    <th scope="row" style="text-align: center">{{weight.0}}</th>
                                    <td style="text-align: center">{{weight.1}} lbs</td>
                                    <td>
                                        <form action="" method="post">
                                            {% csrf_token %}
                                            <input type ="hidden" value="{{ weight.2.pk }}" name="pk">
                                            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                                            <button type="submit" name="delete_but" style="border:none;background-color:transparent;font-size:30px;cursor: pointer;color: #990000;" value="Delete" class="p-0 m-0 text-danger pl-3 pr-1"><i class="fa fa-trash"></i></button>
                                        </form>
                                    </td>
                                </tr>

                            {% endfor %}
                        </tbody>
                    </table>
                    <form method="POST">
                        {% csrf_token %}
                        <button class="add btn btn-block btn-primary mb-2" type="submit" name="weight_graph" style="margin-left: 25%; width: 100%;">View Weight Graph</button>
                    </form>
                </div>

                    </div>

            </div>

        </div>
    </section>
    <!-- About Section End -->

</body>

</html>