{% extends "users/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
    <h1>{{ user.username }}</h1>
    <div class="content-section">
        <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">Update Information</button>
            </div>
            {% if calories %}
                <div>
                    Daily Calories: {{calories}} --
                    Daily Carbohydrates: {{carbs}} --
                    Daily Fats: {{fats}} --
                    Daily Protein: {{protein}} --
                    Activity Level: {{activity}} --
                    Starting Weight: {{startingWeight}} -- 
                    Goal Weight: {{goalWeight}} --
                </div>
            {% endif %}
            {% if currWeight %}
                <div>
                    Current Weight: {{currWeight}} 
                </div>
            {% endif %}
        </form>
        <div>
            <p class="card-text">
            <img src="data:image/png;base64,{{ weightGraph }}" width="100%">
            </p>
        </div>
        <form method="POST" action="/profile/">{% csrf_token %}
            <label for="colorSelect">Select an Exercise</label>
                <select type="text" class="form-control" name="exercise" id ="exercise">
                    <option selected disabled>---------</option>
                    {% for exercise in exerciseNames %}
                        <option value="{{ exercise }}"> {{exercise}}</option> 
                    {% endfor %}
                </select>
            <Button class="btn btn-outline-secondary form-control" name="option_submit" type="submit">Select</Button>
        </form>
        <div>
            <p class="card-text">
            <img src="data:image/png;base64,{{ strengthGraph }}" width="100%">
            </p>
        </div>
        <form method="POST" action="/profile/">{% csrf_token %}
            <label for="colorSelect">Select a Date</label>
                <select type="text" class="form-control" name="date" id ="date">
                    <option selected disabled>---------</option>
                    {% for date in foodDates %}
                        <option value="{{ date }}"> {{date}}</option> 
                    {% endfor %}
                </select>
            <Button class="btn btn-outline-secondary form-control" name="date_submit" type="submit">Select</Button>
        </form>
        <div>
            <p class="card-text">
            <img src="data:image/png;base64,{{ macroGraph }}" width="100%">
            </p>
        </div>
        <div class="border-top pt-3">
        </div>
    </div>
{% endblock content %}