{% load static %}
{% load crispy_forms_tags %}
<!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 class="active"><a href="/meals">Meals</a></li>
                        <li><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>
    </header>
    <!-- Header End -->

    <!-- About Section Begin -->
    <section class="about-section spad"style="margin-top: 50px;">
        <div class="container">
            <h2 style="color:white; padding-bottom: 10px; padding-top: 10px; margin-top: 3%; text-align: center;" >Find New Meals To Fit Your Goals!</h2>
            <div class="meal-box-overflow">

             <form method='POST' action="{{filter.get_category_display}}" style="padding-bottom: 30px; padding-left: 15px; width: 25%; margin-left: 36.5%;">
                 {% csrf_token %}
                {{filter|crispy}}
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
                <Button class="add btn btn-block btn-primary mb-2" type="submit" name="filter_submit">Filter</Button>
             </form>

                           {% for recipe in meals %}
                               {{filter.get_category_display}}
                               <div class="card" style="background-color: #D8D8D8; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); border-radius: 10px; transition: 0.3s; float: left; width: 30%; margin-left: 1%; margin-bottom: 1%; margin-top: 1%; margin-right: 1%; padding-bottom: 20px; padding-top: 20px; text-align: center;" >
                                <img src={{recipe.img}} width="250px" height="300px">

                                    <h5 style="color:black;">{{recipe.title}}</h5>
                                    <a href = {{recipe.link}}>Get Recipe!</a>
                                    <form method="POST">
                                        {% csrf_token %}
                                        <button class="add btn btn-block btn-primary mb-2" type= "submit" name="log_submit" value="{{recipe.title}}" style="margin-top: 10px; cursor: pointer; width: 50%; text-align: center; margin-left: 25%;">Log</button>
                                    </form>
                                </div>
                          {% endfor %}

            </div>
        </div>

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


</body>

</html>