{% 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" src="/static/js/greenpanel.js"></script>
<script type="text/javascript" src="/static/js/toggle.js"></script>
<script type="text/javascript" src="/static/js/tabs.js"></script>

{% 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.errors }}
                                    {{ 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 }}{{ profile_form.home_url.errors }}
                                </div>
                                <div class="check-list">
                                    <label>Your Twitter handle:</label>
                                    {{ profile_form.twitter_id }}{{ profile_form.twitter_id.errors }}
                                </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="#" id="toggle-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="#" id="toggle-panel">
                                <img src="/static/images/booklist/view-icon.png" align="view icon" title="view icon" 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="listview tabs tabs-1">
                       {% else %}{% if work.last_campaign_status == 'ACTIVE' %}
                            <div class="listview tabs tabs-2">
                       {% else %}
                            <div class="listview tabs tabs-3">
                       {% endif %}{% endif %}
                    <div class="listview book-list {% cycle 'row1' 'row2' %} side1">
                        	<span class="listview panelback side2">
		    					<div class="greenpanel2">
									<div class="unglued_white">
										{% if work.first_ebook %}
										<b>AVAILABLE!</b>
										{% else %}
										<b>{{ work.last_campaign_status }}</b>
										{% if work.last_campaign_status == 'SUCCESSFUL' %} 
										<p><b>On:</b> {{ work.last_campaign.deadline|date:"M d, Y" }}</p>
				  						<p><b>Raised:</b> {{ work.last_campaign.current_total }}</p>
				  						{% else %}{% if work.last_campaign_status == 'ACTIVE' %}
										<p><b>Until:</b> {{ work.last_campaign.deadline|date:"M d, Y" }}</p>
				  						<p><b>Raised:</b> {{ work.last_campaign.current_total }}</p>
				                        {% else %}{% if work.last_campaign_status == 'INITIALIZED' %}
				                        <p>Campaign coming soon!</p>
				                        {% else %}{% if work.last_campaign_status == 'SUSPENDED' %}
										<p>This campaign was suspended on {{ work.last_campaign.suspended }}.</p>
				                        {% else %}{% if work.last_campaign_status == 'WITHDRAWN' %}
										<p>This campaign was withdrawn on {{ work.last_campaign.withdrawn }}.</p>
				                        {% else %}{% if work.last_campaign_status == 'UNSUCCESSFUL' %}
										<p>{{ work.last_campaign.deadline }}</p>
										<p>Watch for a new campaign.</p>
										{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}
									</div> 
									{% if work.first_ebook %}
									<div class="read_itbutton"><a href="{{ work.first_ebook.url }}">Read it Now</a> </div>
									{% else %}
									<div class="Unglue_itbutton"><a href="#">Unglue it!</a> </div>
									{% endif %}
									{% ifequal supporter request.user %}
       								<div class="moreinfo remove-wishlist"><a id="{{ work.id }}">Remove</a></div>
			                        {% else %}{% if work in shared_works %}
            			            <div class="moreinfo on-wishlist">
		                            <a href="#">On Your Wishlist!</a>
        			                </div>
                    			    {% else %}{% if request.user.is_anonymous %}
                        			<div class="moreinfo create-account">
                           			<a href="#">Add to Wishlist</a>
                       				</div>
                       			 	{% else %}
                        			<div class="moreinfo add-wishlist">
                           			<a href="#" id="{{ work.editions.all.0.googlebooks_id }}">Add to Wishlist</a>
                        			</div>
                        			{% endif %}{% endif %}{% endifequal %}
                        			<div class="white_text"> <p><a href="{% url work work.id %}">{{ work.title }}</a></p>
				  						<p>{{ work.author }}</p>
									</div>
									<div class="moreinfo">
										<a href="{% url work work.id %}">More Info</a> 
									</div>
		  						</div>
          					</span>
                        <div class="listview book-thumb">
                            <a href="#"><img src="{{ work.cover_image_thumbnail }}" alt="Book name" title="book name" /></a>
                        </div>
                        <div class="listview book-name">
                            <div class="title">
                                <a href="{% url work work.id %}">{{ work.title }}</a>
                            </div>
                            <div class="listview author {{ work.author }}">{{ work.author }}</div>
                        </div>
                        {% ifequal supporter request.user %}
                        <div class="listview remove-wishlist">
                            <span id="{{ work.id }}">Remove from Wishlist</span>
                        </div>
                        {% else %}{% if work in shared_works %}
                        <div class="listview on-wishlist">
                            <span>On Your Wishlist!</span>
                        </div>
                        {% else %}{% if request.user.is_anonymous %}
                        <div class="listview create-account">
                            <span>Add to Wishlist</span>
                        </div>
                        {% else %}
                        <div class="listview add-wishlist">
                            <span id="{{ work.editions.all.0.googlebooks_id }}">Add to Wishlist</span>
                        </div>
                        {% endif %}{% endif %}{% endifequal %}
                        <div class="listview booklist-status">
                            <span class="booklist-status-label">Status:&nbsp;</span><span class="booklist-status-text">{{ work.last_campaign_status }}</span>
                        </div>
                        <div class="listview icons">
                            <div class="booklist-status-img">
            					<img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png" title="book list status" alt="book list status" />
                            </div>
            				<div class="booklist-status-label">{{ work.percent_unglued_number }}%</div>
                            <div class="right_add"><img src="/static/images/book-panel/add_gray.png" border="0" /></div>
                        </div>
                        <div class="listview ebooks">
                            {% if work.first_epub %}
                            <span class="listview boolist-ebook">
                                <a href="{{ work.first_epub.url }}">epub</a>
                            </span>
                            {% endif %}
                            {% if work.first_pdf %}
                            <span class="listview boolist-ebook">
                                <a href="{{ work.first_pdf.url }}">pdf</a>
                            </span>
                            {% endif %}
                        </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 %}