{% extends 'base.html' %}

{% block title %}BodyRep{% endblock %}

{% block content %}
{% include 'navbar.html' %}

  <div class="row-fluid">
        <div class="span2">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Profile</li>
              <li class="active"><a href="#">Body Stats</a></li>
              <li><a href="#">Body Reputation</a></li>
              <li><a href="#">Challenges</a></li>
              <li class="nav-header">Workouts</li>
              <li class="nav-header">Meals</li>
              <li class="nav-header">Community</li>
              <li class="nav-header">Learning</li>
              <li class="nav-header">Apps</li>
              <li class="nav-header">Shopping</li>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span6" id='mcnt'>
          <div class="row-fluid">
            <h2 class="pull-left">{{ member.firstname }} {{ member.lastname }}</h2>
            <a class="pull-right btn btn-primary btn-mini" id='edprf' href="#"><i class="icon-cog icon-white"></i> Edit Profile</a>
          </div>
          <div class="row-fluid" style='font-size : 12px;'>
            <i class="icon-signal"></i><span> Weight: 100kg ( <div class='arrowup'></div> 0)</span>
            <span>Bodyfat: 20% ( <div class='arrowup'></div> 2)</span>
            <span>Measurements: 400cm ( <div class='arrowup'></div> 15)</span>
          </div>
          <div class="row-fluid" style='font-size : 12px;'>
            <i class="icon-home"></i><span> Lives in </span><a>Calgary, Alberta</a>
            <i class="icon-signal"></i><span> Trains at </span><a>Talisman Center,Fitness First</a>
            <i class="icon-signal"></i><span> Hobbies: </span><a>Skiing,</a><span> and </span><a>(5) other</a><span> ...</span>
            <i class="icon-signal"></i><span> Professionals: </span><a>Heath Spence</a><span>,</span><a>Steve Baudo</a><a>    see more...</a>
          </div>
          <hr />
          <div class="row-fluid">
            <h5 class="pull-left">Filters:</h5>
            <div class="pull-left">
              <div class="block_type_small redbg redbd pull-left">
                <i class="icon-user icon-white"></i>
              </div>
              <div class="block_type_small bluebg bluebd pull-left">
                <i class="icon-wrench icon-white"></i>
              </div>
              <div class="block_type_small orangebg orangebd pull-left">
                <i class="icon-magnet icon-white"></i>
              </div>
              <div class="block_type_small tealbg tealbd pull-left">
                <i class="icon-heart icon-white"></i>
              </div>
              <div class="block_type_small purplebg purplebd pull-left">
                <i class="icon-th icon-white"></i>
              </div>
              <div class="block_type_small greenbg greenbd pull-left">
                <i class="icon-book icon-white"></i>
              </div>
              <div class="block_type_small graybg graybd pull-left">
                <i class="icon-file icon-white"></i>
              </div>
            </div>
          </div>
          <div class="stats">
            <div class="comment_block">
              <div class="block_types">
                <div class="block_type redbd">
                  <i class="gicon-magnet"></i>
                </div>
              </div>
            </div>
            <div class="tnc-blurb">
              <i class="icon-signal"></i>
              565
            </div>
            <div class="basic-comment">
              <b>Breakfast:</b><span> 30g Oats, 1x Banana, 5x Egg Whites</span>
            </div>
            <div class="like-comment-time">
              <i class="icon-thumbs-up"></i>
              <i class="icon-comment"></i>
              <span>14 minutes ago</span>
            </div>
            <div class="user-sub-comment">
              <div class='sub-avatar user1'></div>
              <a>Brian Goff</a>
              <p>Good to see you're keeping up the good work mate. Keep us posted ;)</p>
              <div class="like-comment-time">
                <i class="icon-thumbs-up"></i>
                <i class="icon-comment"></i>
                <span>April 3 at 2:05pm</span>
              </div>
            </div>
            <div class="user-sub-comment">
              <div class='sub-avatar user2'></div>
              <a>Alex Zborowski</a>
              <p>Well it's not easy but you do your best every day and you judge every action.</p>
              <div class="like-comment-time">
                <i class="icon-thumbs-up"></i>
                <i class="icon-comment"></i>
                <span>April 3 at 2:05pm</span>
              </div>
            </div>
          </div>
          <div class="stats">
            <div class="comment_block">
              <div class="block_types">
                <div class="block_type greenbd">
                  <i class="gicon-search"></i>
                </div>
                <div class="block_type orangebd">
                  <i class="gicon-screen"></i>
                </div>
              </div>
            </div>
            <div class="tnc-blurb">
              <i class="icon-time"></i>
              45
              <i class="icon-signal"></i>
              900
            </div>
            <div class="basic-comment">
              Workout at <a>Talisman Center</a> with <a>Brian Goff</a>
            </div>
            <div class="like-comment-time">
              <i class="icon-thumbs-up"></i>
              <i class="icon-comment"></i>
              <span>37 minutes ago</span>
            </div>
          </div>
          <div class="stats">
            <div class="comment_block">
              <div class="block_types">
                <div class="block_type greenbd">
                  <i class="gicon-search"></i>
                </div>
              </div>
            </div>
            <div class="tnc-blurb">
              <i class="icon-time"></i>
              90
              <i class="icon-signal"></i>
              720
            </div>
            <div class="basic-comment">
              Workout at <a>Talisman Center</a>
            </div>
            <div class="like-comment-time">
              <i class="icon-thumbs-up"></i>
              <i class="icon-comment"></i>
              <span>April 4 at 7:00pm</span>
            </div>
          </div>
          <div class="stats">
            <div class="comment_block">
              <div class="block_types">
                <div class="block_type bluebd">
                  <i class="gicon-profile"></i>
                </div>
              </div>
            </div>
            <div class="tnc-blurb">
            </div>
            <div class="basic-comment">
              You commented on <a>Brian Goff's workout</a>
            </div>
            <div class="like-comment-time">
              <i class="icon-thumbs-up"></i>
              <i class="icon-comment"></i>
              <span>April 4 at 6:30pm</span>
            </div>
          </div>
          <div class="stats">
            <div class="comment_block">
              <div class="block_types">
                <div class="block_type purplebd">
                  <i class="gicon-profile"></i>
                </div>
              </div>
            </div>
            <div class="tnc-blurb">
            </div>
            <div class="basic-comment">
              Your read <a>"Fatigue Recovery & Supercompensation Theory"</a>
            </div>
            <div class="like-comment-time">
              <i class="icon-thumbs-up"></i>
              <i class="icon-comment"></i>
              <span>April 2 at 8:00am</span>
            </div>
          </div>
          <div class="stats">
            <div class="comment_block">
              <div class="block_types">
                <div class="block_type greenbd">
                  <i class="gicon-search"></i>
                </div>
                <div class="block_type orangebd">
                  <i class="gicon-screen"></i>
                </div>
                <div class="block_type tealbd">
                  <i class="gicon-line"></i>
                </div>
              </div>
            </div>
            <div class="tnc-blurb">
              <i class="icon-time"></i>
              30
              <i class="icon-signal"></i>
              450
            </div>
            <div class="basic-comment">
              <a>Workout</a> using <a>Runtracker</a> with <a>Brian Goff</a>
            </div>
            <div class="like-comment-time">
              <i class="icon-thumbs-up"></i>
              <i class="icon-comment"></i>
              <span>April 2 at 6:00am</span>
            </div>
          </div>

          <div class="stats">
            <div class="comment_block">
              <div class="block_types">
                <div class="block_type orangebd">
                  <i class="gicon-screen"></i>
                </div>
              </div>
            </div>
            
            <div class="user-comment">
              <div class='avatar user1'></div>
              <a>Brian Goff</a>
              <p>Hey "mate"! Want to train at the <a>Talisman</a> again tonight?</p>
            </div>
            <div class="like-comment-time">
              <i class="icon-thumbs-up"></i>
              <i class="icon-comment"></i>
              <span>April 3 at 2:00pm</span>
            </div>

            <div class="user-sub-comment">
              <div class='sub-avatar user2'></div>
              <a>Alex Zborowski</a>
              <p>Sorry Brian, working on the BodyREP pitch tonight.</p>
              <div class="like-comment-time">
                <i class="icon-thumbs-up"></i>
                <i class="icon-comment"></i>
                <span>April 3 at 2:05pm</span>
              </div>
            </div>
            <div class="user-sub-comment">
              <div class='sub-avatar user1'></div>
              <a>Brian Goff</a>
              <p>No worries "mate", maybe next time.</p>
              <div class="like-comment-time">
                <i class="icon-thumbs-up"></i>
                <i class="icon-comment"></i>
                <span>April 3 at 2:07pm</span>
              </div>
            </div>
            
          </div>
        </div>
        <div class="span4">
          <div class="hero-unit">
            <h1>Hello, world!</h1>
            <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
            <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
          </div>
          <div class="row-fluid">
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
          </div><!--/row-->
          <div class="row-fluid">
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
          </div><!--/row-->
        </div><!--/span-->
      </div><!--/row-->
{% endblock %}