{% extends "base.html" %}

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

{% block extra_head %}
<link type="text/css" rel="stylesheet" href="/static/css/supporter_layout.css" />
<link type="text/css" rel="stylesheet" href="/static/css/book_list.css" />
<link type="text/css" rel="stylesheet" href="/static/css/book_panel.css" />

<script type="text/javascript" src="/static/js/wishlist.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function(){
        $j('.user-block-hide').hide();
        $j('.user-block1 a').click(
            function() {
                $j(this).toggleClass("active");
                $j(".user-block-hide").slideToggle(300);
            }
        );
        $j('.tabs1').click(function(){
            $j('.tabs').find('.active').removeClass('active');
            $j(this).addClass('active');
            $j('.content-block-content').find('.active').removeClass('active');
            $j('.tabs-1').addClass('active').show(300);
            $j('.tabs-2').hide(200);
            $j('.tabs-3').hide(200);
        });
        $j('.tabs2').click(function(){
            $j('.tabs').find('.active').removeClass('active');
            $j(this).addClass('active');
            $j('.content-block-content').find('.active').removeClass('active');
            $j('.tabs-2').addClass('active').show(300);
            $j('.tabs-1').hide(200);
            $j('.tabs-3').hide(200);
        });
        $j('.tabs3').click(function(){
            $j('.tabs').find('.active').removeClass('active');
            $j(this).addClass('active');
            $j('.content-block-content').find('.active').removeClass('active');
            $j('.tabs-3').addClass('active').show(300);
            $j('.tabs-2').hide(200);
            $j('.tabs-1').hide(200);
            });
        $j('.empty-wishlist span.bounce-search').click(function(){
            $j('div.js-search-inner').effect("bounce", 500, function() {
                $j('div.js-search-inner input[type="text"]').focus();
            });
        });
    });
</script>
<link rel="stylesheet" href="/static/css/book_list.css">

{% endblock %}

/*
To do:
create topsection file for inclusion in multiple contexts, if needed
figure out how to configure date display 
    decide if we're even including date joined in profile
add support for userpics
    crop/resize? other infrastructure we need?  can we pull from twitter/fb?
add support for twitter/fb/other links?
    part of user profile?  can I just add to db model?
    loosely coupled vs actually integrated with signin
    canonicalize -- user enters cut/paste link vs username
Goodreads & Librarything support
If people lack homepage, etc., do we have greyed-out icons or no icons?
    if greyed-out, can they add in place by clicking on them?
make sure we have the profile settings we need
resurrect add/remove functionality
    be sure words display correctly
    do I need both add-wishlist and remove-wishlist classes? do they differ?
better alignment on I am ungluing & badges

make sure backed/backing/wishlist is the order we want the badges to be in
test code with other campaign statuses -- random_campaigns needs to set a variety of statuses!
why is there a status in regluit.payment.models.Transaction?  does it duplicate the status in regluit.core.models.Campaign?


there's no tab for seeing ALL my books, only the filters! huh.
    
Values I need:
how do I integrate the your wishlist thing with the tabs thing?

*/

{% block topsection %}

<div id="js-topsection">
    <div class="js-main">
        <div class="js-topnews">
            <div class="js-topnews1">
                <div class="js-topnews2">
                    <div class="js-topnews3">
                        <div class="user-block">
                            {% ifequal supporter request.user %}
                            <div class="user-block1">
                            <div class="block-inner">
                            <a class="my-setting" href="#">My Settings</a>
                            </div>
                            </div>
                            {% endifequal %}
                            <div class="user-block2">
                                <img class="user-avatar" src="/static/images/header/avatar.png" height="50" width="50" alt="User avatar" title="User avatar" />
                                <span class="user-name"><a href="#">{{ supporter.username }}</a></span>
                                <span class="user-date">{{ date }}</span>
                                <span class="user-short-info">{{ supporter.profile.tagline }}</span>
                            </div>
                            <div class="user-block4">
                                <div class="social">
                                {% if supporter.profile.home_url %}
                               	<a href="{{ supporter.profile.home_url }}">
                               		<img src="/static/images/header/icon-home.png" alt="{{ supporter }}'s Homepage" title="{{ supporter }}'s Homepage"  />
                               	</a>
                                {% endif %}
                                <a href="#"><img src="/static/images/header/icon-facebook.png" alt="{{ supporter }}'s Facebook" title="{{ supporter }}'s Facebook"  /></a>
                                {% if supporter.profile.twitter_id %}
                                <a href="https://twitter.com/#!/{{ supporter.profile.twitter_id }}">
                                	<img src="/static/images/header/icon-twitter.png" alt="{{ supporter }}'s Twitter" title="{{ supporter }}'s Twitter"  />
                                </a>
                                {% endif %}
                                <a href="#"><img src="/static/images/header/icon-google.png" alt="google" title="google"  /></a>
                                <a href="#"><img src="/static/images/header/icon-group.png" alt="group" title="group"  /></a></div>
                            </div>
                            <div class="user-block3">
                                <div class="user-block">
                                <span class="rounded"><span class="blue">{{ backed }}</span></span>
                                <span class="rounded"><span class="orange">{{ backing }}</span></span>
                                <span class="rounded"><span class="grey">{{ wished }}</span></span>
                                </div>
                                <span class="user-status-title">I am ungluing</span>
                            </div>
                        </div>
						{% ifequal supporter request.user %}
                        <div class="user-block-hide">
						<form method="POST" action="">
							{% csrf_token %}
                            <div class="block block1">
                            <div class="block-inner">
                                <h3><a class="profile-edit" href="#">Your Tagline</a></h3>
									{{ profile_form.tagline }}

 									<input class="profile-save" type="submit" name="submit" value="Update" id="submit">
                            </div>
                            </div>
                            
                             <div class="block block2">
                                <h3 class="title">Links</h3>
                                <div class="check-list">
                                    <label>Your homepage URL:</label>
                                    {{ profile_form.home_url }}
                                </div>
                                <div class="check-list">
                                    <label>Your Twitter handle:</label>
                                    {{ profile_form.twitter_id }}
                                </div>
                            </div>
                            <div class="block block3">
                                <h3 class="title">Other Stuff (to use?)</h3>
                                <div class="check-list">
                                    <label>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</label>
                                </div>
                                <div class="check-list">
                                    <input type="checkbox" />
                                    <label>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</label>
                                </div>
                            </div>
                               
 						</form>
                        </div>
                      {% endifequal %}
                    </div>
                </div>
            </div>
        </div>
       
    </div>
</div>

{% endblock %}

{% block content %}

    <div id="main-container">
    <div class="js-main">
        <div id="js-leftcol">
			{% include "explore.html" %}
		</div>

        <div id="js-maincol-fr">
        <div class="js-maincol-inner">
            <div class="content-block">
                <div class="content-block-heading" id="tabs">
                    <ul class="tabs">
                        <li class="tabs1"><a href="#">Unglued</a></li>
                        <li class="tabs2"><a href="#">Being Unglued</a></li>
                        <li class="tabs3 active"><a href="#">Want to Unglue</a></li>
                    </ul>
    
                        <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">
                    {% ifequal wishlist.works.all.count 0 %}
                    {% ifequal request.user supporter %}
                    <div class="empty-wishlist">
                        Your wishlist is currently empty.<br><br>
                        Go ahead and <span class="bounce-search">find</span> some books to give to the world, and add them to your Wishlist!<br><br>
                        We double dog dare you...
                    </div>
                    {% else %}
                    <div class="empty-wishlist">
                        It looks like {{ supporter.username }} is just
                        getting started, and hasn't added anything to their
                        wishlist just yet.<br><br>
                        Nudge, nudge, say no more. 
                    {% endifequal %}
                    {% else %}
                    {% for work in wishlist.works.all %}
                       <!-- classify which tab depending on work.last_campaign_status -->
                       {% if work.last_campaign_status == 'SUCCESSFUL' %}
                            <div class="tabs tabs-1">
                       {% else %}{% if work.last_campaign_status == 'ACTIVE' %}
                            <div class="tabs tabs-2">
                       {% else %}
                            <div class="tabs tabs-3">
                       {% endif %}{% endif %}
                    <div class="book-list {% cycle 'row1' 'row2' %}">
                        <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>
                            <a href="{% url work work.id %}">{{ work.title }}</a>
                        </span>
                        </div>
                        {% ifequal supporter request.user %}
                        <div class="remove-wishlist">
                            <span id="{{ work.id }}">Remove from Wishlist</span>
                        </div>
                        {% else %}{% if work in shared_works %}
                        <div>
                            <span>On Your Wishlist!</span>
                        </div>
                        {% else %}{% if request.user.is_anonymous %}
                        <div class="create-account">
                            <span>Add to Wishlist</span>
                        </div>
                        {% else %}
                        <div class="add-wishlist">
                            <span id="{{ work.editions.all.0.googlebooks_id }}">Add to Wishlist</span>
                        </div>
                        {% endif %}{% endif %}{% endifequal %}
                        <div class="booklist-status">
                            <span class="booklist-status-text">{{ work.last_campaign_status }}</span>
                            <span class="booklist-status-img">
                                <img src="/static/images/icon-book{{ work.percent_unglued }}.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>
                    </div>
                    {% endfor %}
                    {% endifequal %}
                </div>
            </div>    
        </div>
        </div>
    </div>
    </div>

{% endblock %}