{{set . "title" "My Profile"}}
{{template "header.html" .}}

{{append . "moreScripts" "//plus.google.com/js/client:plusone.js"}}
{{append . "moreScripts" "/public/js/Chart.min.js"}}
{{append . "moreScripts" "/public/js/googleplus.js"}}
{{append . "moreScripts" "/public/js/grassfed.js"}}

{{if not .account}}
<div id="authentication" class="row" style="padding: 50px 15px;">
    <div class="col-md-offset-4 col-md-4 text-center">
        <h1></h1>

        <img src="/public/img/signup.png" />

        <p style="padding-top: 1em;">
            <span id="signinButton">
                <span
                    class="g-signin"
                    data-callback="onAuthentication"
                    data-clientid="903785837828-lfsps917vkth7c88em9ieq0l0d0p35kb.apps.googleusercontent.com"
                    data-cookiepolicy="single_host_origin"
                    data-requestvisibleactions=""
                    data-scope="profile">
                </span>
            </span>
        </p>
    </div>
</div>
{{end}}

{{if not .account}}
<div id="profile" class="row" style="padding: 50px 15px; display: none;">
{{else}}
<div id="profile" class="row" style="padding: 50px 15px;">
{{end}}
    <h1></h1>

    <div class="col-md-8">
        <form id="entry" action="/me/add" method="post" role="form" class="form-horizontal">
            <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" />
                </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 id="history" class="panel-group"></div>
    </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">
            <input name="current" type="hidden" value="0" />
            <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>Trending</h3>
        <div class="text-center">
            <canvas id="trendsChart" width="400" height="250"></canvas>
        </div>

        <form id="recordWeight" action="/me/weight" method="post" role="form" class="form-horizontal">
            <div class="form-group">
                <div class="col-xs-offset-2 col-xs-3">
                    <label for="weight" class="form-label">Weight</label>
                </div>
                <div class="col-xs-5">
                    <input name="weight" type="number" min="0" max="1000" step="any" value="" class="col-xs-8 form-control" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-6 col-xs-4">
                    <input type="submit" value="Record" class="form-control btn btn-primary" />
                </div>
            </div>
        </form>

        <h3>Streak</h3>
        <h3 class="streak text-center">0</h3>
        <h3 class="streak-units text-center">days</h3>
    </div>
</div>

{{template "footer.html" .}}