{% extends "base.html" %}

{% block title %} — {{ supporter.username }}{% endblock %}

{% block extra_head %}
<script type="text/javascript">
$(document).ready(function() {
    $(".remove-wishlist").each(function (index, element) {
        $(element).click(function() {
            var span = $(element).find("span");
            var work_id = span.attr('id')
            $.post('/wishlist/', {'remove_work_id': work_id}, function(data) {
                var book = $(element).parent();
                book.fadeOut();
            });
        });
    });
});
</script>
{% endblock %}

{% block content %}
    <div id="main-container">
    <div class="js-main">

{% include "explore.html" %}

        <div id="js-maincol-fr">
        <div class="js-maincol-inner">
            <div class="content-block">
                <div class="content-block-heading">
                    <h2 class="content-heading">
                        {% ifequal supporter request.user %}
                        Your Wishlist
                        {% else %}
                        {{ supporter.username }} Wishlist 
                        {% endifequal %}
                    </h2>
                        <ul class="book-list-view">
                            <li>View As:</li>
                            <li class="view-list">
                                <a href="#view-list">
                                <img src="/static/images/booklist/view-list.png" align="view list" title="view list" height="21" width="24" />
                                </a>
                            </li>
                            <li class="view-list">
                                <a href="#view-icon">
                                <img src="/static/images/booklist/view-icon.png" align="view icon" title="view icon" height="22" width="22" />
                                </a>
                            </li>
                            <li class="view-list">
                            <a href="#view-icon-small">
                            <img src="/static/images/booklist/view-small-icon.png" align="view icon small" title="view icon small" height="22" width="22" />
                            </a>
                            </li>
                        </ul>
                </div>
                <div class="content-block-content">
                    {% for work in wishlist.works.all %}
                    <div class="book-list row1">
                        <div class="book-thumb">
                            <a href="#"><img src="{{ work.cover_image_small }}" alt="Book name" title="book name"  /></a>
                        </div>
                        <div class="book-name">
                        <span>
                            {{ work.title }}
                        </span>
                        </div>
                        <div class="remove-wishlist">
                            <span id="{{ work.id }}">Remove from Wishlist</span>
                        </div>
                        <div class="booklist-status">
                            <span class="booklist-status-text">Status: In Progress</span>
                            <span class="booklist-status-img">
                                <img src="/static/images/booklist/icon1.png" title="book list status" alt="book list status" />
                            </span>
                        </div>
                        <div class="unglue-this none">
                            <div class="unglue-this-inner1">
                                <div class="unglue-this-inner2">
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>    
        </div>
        </div>
    </div>
    </div>

{% endblock %}