{% 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">
                <a href="/home">
                    <img src="{% static 'img/logo.png' %}" alt="">
                </a>
            </div>
            <div class="nav-menu">
                <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 class="active"><a href="/exercises">Exercises</a></li>
                        <li><a href="/weight">Track Your Weight</a></li>
                    </ul>
                </nav>
                <a href="/profile" class="primary-btn">Profile</a>
                <a href="/logout" class="primary-btn">Logout</a>
            </div>
            <div id="mobile-menu-wrap"></div>
        </div>
    </header>
    <!-- Header End -->
    
    <!-- About Section Begin -->
    <section class="about-section spad">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">


                    <form method="POST">
                        {% csrf_token %}
                        <fieldset class="form-group">
                            <legend class="border-bottom mb-4">Get Jacked!</legend>
                            {{form|crispy}}
                        </fieldset>
                        <div class="form-group">
                            <button class="btn btn-outline-info" type="submit" name="form_submit">Log</button>
                        </div>
                        <div>
                            <table class="table">
                                <thead>
                                  <tr>
                                    <th scope="col">name</th>
                                    <th scope='col'>weight</th>
                                    <th scope="col">sets</th>
                                    <th scope="col">reps</th>
                                    <th scope="col">date</th>
                                  </tr>
                                </thead>
                                <tbody>
                                    {% for info in lifts %}
                                        <tr>
                                            <th scope="row">{{info.name}}</th>
                                            <td>{{info.weight}} lbs</td>
                                            <td>{{info.sets}} sets</td>
                                            <td>{{info.reps}} reps</td>
                                            <td>{{info.date}} date</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </form>


                    <div class="about-pic">
                        <img src="{% static 'img/exercise-filler.jpg' %}" alt="">
                    </div>
                </div>
                <div class="col-lg-6">

                    <div class="about-text">
                        <h2 style="color:white;" >Excercise Log</h2>
                        <p class="first-para" style="color:white;">We are a group of College Students studying Computer Science at the University of Florida. 
                            We all share a strong passion for both mental and physical health/fitness, as well as helping others upgrade and become the best versions of themselves.
                        </p>    
                        <p class="second-para" style="color:white;">In the past, we have all shared similar struggles in finding a coherent application to track various aspects of our health. 
                            Therefore, we decided to come together and create an "all in one" application that tracks bodyweight, lifts, macros, and calories, suggest workout plans and caloric intake per day,
                            and more all personalized to the individual!
                        </p>
                        <a href="#" class="primary-btn">Log</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- About Section End -->

    {% block body %}
    <h1 class="header pb-0 mb-0 pl-0" style="text-align: left;">Exercise List</h1>
    <p class="text-muted">Check out our extensive list of workouts and log your favorites to your profile!</p>
    <hr>
    <div>

        <!--Display exercise welcome message-->
        <div class="exercises-box-overflow">
            <h5 style="padding-left: 10px;">Recommended exercises: </h5>
            {% for exercise in exercises %}
                <div class="exercise">                     
                    <img src="/static/exerciseImages/{{exercise.image_link}}" class="exercise-image">
                    <p class="exercise-text" style="margin-bottom: 5px;">
                        <!--Pending: populate exercise log with selected exercise-->
                        
                        <strong>{{exercise.name}}</strong></br>
                        <em style="font-size: 80%;">Category: {{exercise.group}}</em></br>
                    </p>   
                    <p class="exercise-text">
                        {{exercise.description}}
                    </p>                      
                </div>
            {% endfor %}
        </div>
    </div>
    {% endblock body %}







    <!-- Footer Section Begin -->
    <footer class="footer-section">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="contact-option">
                        <span>Phone</span>
                        <p>(123) 118 9999 - (123) 118 9999</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="contact-option">
                        <span>Address</span>
                        <p>72 Kangnam, 45 Opal Point Suite 391</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="contact-option">
                        <span>Email</span>
                        <p>contactcompany@Gutim.com</p>
                    </div>
                </div>
            </div>
            <div class="copyright-text">
                <ul>
                    <li><a href="#">Term&Use</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
                <div class="footer-social">
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-twitter"></i></a>
                    <a href="#"><i class="fa fa-instagram"></i></a>
                    <a href="#"><i class="fa fa-dribbble"></i></a>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer Section End -->

</body>

</html>