{% 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 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" style="margin-top: 50px;">
        <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="primary-btn" type="submit" name="form_submit">Log</button>
                        </div>
                    </form>
                </div>
                <!-- <div class="col-lg-6"> -->

                    <!-- <div>
                    <h2 class="log-text" >Excercise List</h2>
                    <p class="text-muted">Check out our extensive list of workouts and log your favorites to your profile!</p>
                    </div> -->
                <!-- </div> -->
            </div>
        </div>
    </section>
    <!-- About Section End -->

    {% block body %}
    <h2 class="log-text" >Excercise List</h2>
    <p style="color: white;">Check out our extensive list of workouts and log your favorites to your profile!</p>

    
    <div class="exercies">
            <!--Alert message-->
            <!-- {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }}" role="alert">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %} -->
            <form method='POST' action="{{filter.get_category_display}}" style="padding-bottom: 30px; padding-left: 15px;">
                {% csrf_token %}
                {{filter|crispy}}
                <Button class="primary-btn" type="submit" name="form_submit">Filter</Button>  
            </form>
                {% for exercise in exercises %}
                    <li style="display: inline-block; padding-right: 25px; padding-bottom: 20px; width: 350px; padding-left: 15px" >                     
                        <img src={{exercise.img}} width="350px" height="400px">
                            <!--Pending: populate exercise log with selected exercise-->
                            <!-- <strong>{{filter.get_category_display}}</strong></br> -->
                        <h2 style="color:whitesmoke; margin: 0; font-size : 26px;"><strong>{{exercise.name}}</strong></br>
                        <h4 style="color:white;"> Category: {{exercise.category}} </h4> 
                        <h4 style="color:white;"> Equipment: {{exercise.equipment}} </h4> 
                        <a href = {{exercise.description_link}}>Description Link</a>
                        <div class="form-group" style="text-align: center;">
                            <form action="{% url 'exercises' %}" method="post">
                                {% csrf_token %}
                                
                                
                                <button class="primary-btn" type= "submit" name="form_submit" value="{{exercise.name}}">Log</button>
                                 </form>



                            
                        </div>
                                            
                    </li>
                {% endfor %}
    </div>
    {% endblock body %}


</body>

</html>