{% extends "shared/base.html" %}

{% block head %}
<script>
 $(document).ready(function() {
  $(".accordion table").click(function(){
    $(this).find(".bigurl").slideToggle("slow")
    $(this).siblings("table:visible").find(".bigurl").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("table").removeClass("active");
  });
 });
</script>
{% endblock %}

{% block content %}
  <div class="accordion">
  {% rssfeed "https://api.flickr.com/services/feeds/photos_public.gne?format=rss2" "/rss/channel/item" %}
    {% xmlns "http://search.yahoo.com/mrss/" as media %}
    <table class="imagerow" style="background-color:{% cycle "#E3E4FA" "#E9CFEC" "#C8BBBE" %}" width="100%">
    <tr><td><img src="{% xmlrole "media:thumbnail/@url/string()" %}" /></td>
    <td>
      <p>Title: {% xmlrole "title/string()" %}
      <p>Tags: {% xmlrole "media:category/string()" %}
      <p>photoAuthor: {% xmlrole "author/string()" %}
      <p>photoDate: {% xmlrole "pubDate/string()" %}
      <div class="bigurl"><img src="{% filter resize %}{% xmlrole "media:thumbnail/@url/string()" %}{% endfilter %}" /></div>
    </td>
    </tr>
    </table>
  {% endrssfeed %}
  </div>
{% endblock %}