{% extends "base.html" %}

{% block body %}
  <div id="header">
    <div class="button"><fb:login-button autologoutlink="true" perms="read_stream,publish_stream"></fb:login-button></div>
    <h1>Facebook Client Demo</h1>
  </div>
  <div id="content" class="feed">

    <div class="entry post clearfix">
      <div class="profile"><a href="{{ current_user.profile_url|escape }}"><img src="http://graph.facebook.com/{{ current_user.id }}/picture"/></a></div>
      <div class="body">
	<form action="/post" method="post">
	  <div class="textbox"><textarea name="message"></textarea></div>
	  <div class="buttons"><input type="submit" value="Share"/></div>
	</form>
      </div>
    </div>

    {% for post in news_feed.data %}
      <div class="entry clearfix">
        <div class="profile"><a href="http://www.facebook.com/profile.php?id={{ post.from.id }}"><img src="http://graph.facebook.com/{{ post.from.id }}/picture"/></a></div>
	<div class="body">
          <div class="message">
	    <a class="name" href="http://www.facebook.com/profile.php?id={{ post.from.id }}">{{ post.from.name|escape }}</a>
            {% if post.message %}{{ post.message|escape }}{% endif %}
	  </div>
	  {% if post.caption or post.picture %}
	    <div class="attachment clearfix{% if not post.picture %} nopicture{% endif %}">
	      {% if post.picture %}
	        <div class="picture"><a href="{{ post.link|escape }}"><img src="{{ post.picture|escape }}"/></a></div>
	      {% endif %}
	      {% if post.name %}
	        <div class="name"><a href="{{ post.link|escape }}">{{ post.name|escape }}</a></div>
	      {% endif %}
	      {% if post.caption %}
	        <div class="caption">{{ post.caption|escape }}</div>
	      {% endif %}
	      {% if post.description %}
	        <div class="description">{{ post.description|escape }}</div>
	      {% endif %}
	    </div>
	  {% endif %}
	  <div class="info{% if post.icon %} icon{% endif %}"{% if post.icon %} style="background-image:url('{{ post.icon|escape }}')"{% endif %}>
	    {{ post.created_time|timesince }} ago
	  </div>
	</div>
      </div>
    {% endfor %}

  </div>
{% endblock %}
