<div id="profile" class="row" style="padding: 40px 15px;">
    <div class="col-md-8">
        <form action="/me/add" method="post" role="form" class="form-horizontal">
            <input name="id" type="hidden" value="" />

            <div class="form-group">
                <label for="product" class="col-sm-2 control-label">Consumed</label>
                <div class="col-sm-8">
                    <input name="product" type="text" value="" placeholder="What went down your pie hole?" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label for="calories" class="col-sm-2 control-label">Calories</label>
                <div class="col-sm-3">
                    <input name="calories" type="number" value="0" class="form-control text-center" min="0" max="10000" step="100" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-4">
                    <input type="submit" value="Add" class="btn btn-primary" />
                </div>
            </div>
        </form>
    </div>
    <div class="col-md-4">
        <h3>Daily Goal</h3>

        <div class="text-center">
            <canvas id="goalChart" width="250" height="250"></canvas>
        </div>

        <form action="/me/goal" method="post" role="form" class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-12 text-center">
                    <input name="calories" type="range" min="1000" max="3000" step="100" value="" class="form-control" />
                    <p style="padding-top: 0.35em;"><label for="calories">Daily:</label>&nbsp;<span class="goal">2000</span></p>
                </div>
            </div>
        </form>

        <h3>Streak</h3>
        <p class="text-center">0 days</p>

    </div>
</div>