{% extends "base.html" %}
{% load endless %}
{% load truncatechars %}

{% block title %} — {{ supporter.username }}{% endblock %}
{% block extra_css %}
<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" />
{% endblock %}
{% block extra_head %}
<script type="text/javascript" src="/static/js/wishlist.js"></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>
<script type="text/javascript" src="/static/js/import_books.js"></script>

{% endblock %}

{% comment %}
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
Goodreads 
    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?

{% endcomment %}

{% 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>
                            <div class="user-block2">
                            	{% if supporter.profile.pic_url %}
                                <img class="user-avatar" src="{{ supporter.profile.pic_url }}" height="50" width="50" alt="Picture of {{ supporter }}" title="{{ supporter }}" />
                           		{% else %}
                                <img class="user-avatar" src="/static/images/header/avatar.png" height="50" width="50" alt="Generic Ungluer Avatar" title="Ungluer" />
                                {% endif %}
                                <span class="user-name"><a href="#">{{ supporter.username|truncatechars:20 }}</a></span>
                                <span class="user-date">{{ date }}</span>
                                <span class="user-short-info">{{ supporter.profile.tagline }}</span>
                            </div>
                            {% else %}
                            <div class="user-block1">
                            <div class="block-inner">
                            	{% if supporter.profile.pic_url %}
                                <img class="user-avatar" src="{{ supporter.profile.pic_url }}" height="50" width="50" alt="Picture of {{ supporter }}" title="{{ supporter }}" />
                           		{% else %}
                                <img class="user-avatar" src="/static/images/header/avatar.png" height="50" width="50" alt="Generic Ungluer Avatar" title="Ungluer" />
                                {% endif %}
                                <span class="user-name"><a href="#">{{ supporter.username }}</a></span>
                                <span class="user-date">{{ date }}</span>
                            </div>
                            </div>
                            <div class="user-block2">
                                <span class="user-short-info">{% with supporter.profile.tagline as tagline %}{% if tagline %}{{ tagline }}{% else %}&nbsp;{% endif %}{% endwith %}</span>
                            </div>
                            {% endifequal %}
                            <div class="user-block3">
                                <div class="badges">
                                <span class="rounded"><span class="blue tabs1" {% ifequal request.user supporter %}title="I've unglued {{ backed }} {% if backed == 1 %}book{% else %}books{% endif %}."{% else %}title="{{ supporter }} has unglued {{ backed }} {% if backed == 1 %}book{% else %}books{% endif %}."{% endifequal %}><span class="hovertext">I've unglued&nbsp;</span>{{ backed }}</span></span>
                                <span class="rounded"><span class="orange tabs2" {% ifequal request.user supporter %}title="I'm supporting {{ backing }} {% if backing == 1 %}book{% else %}books{% endif %}."{% else %}title="{{ supporter }} is supporting {{ backing }} {% if backing == 1 %}book{% else %}books{% endif %}."{% endifequal %}><span class="hovertext">I'm ungluing&nbsp;</span>{{ backing }}</span></span>
                                <span class="rounded"><span class="grey tabs3" {% ifequal request.user supporter %}title="I'm wishing for {{ wished }} {% if wished == 1 %}book{% else %}books{% endif %}."{% else %}title="{{ supporter }} is wishing for {{ wished }} {% if wished == 1 %}book{% else %}books{% endif %}."{% endifequal %}><span class="hovertext">I'm wishing for&nbsp;</span>{{ wished }}</span></span>
                                </div>
                            </div>
                            <div class="user-block4">
                                <div class="social">
                                {% if supporter.profile.home_url %}
                                   <a href="{{ supporter.profile.home_url }}">
                                       <img src="/static/images/supporter_icons/home_square.png" alt="{{ supporter }}'s homepage" title="{{ supporter }}'s Homepage"  />
                                   </a>
                                {% endif %}
                                {% if supporter.profile.facebook_id %}
									<a href="http://www.facebook.com/profile.php?id={{supporter.profile.facebook_id}}">
										<img src="/static/images/supporter_icons/facebook_square.png" alt="{{ supporter }}'s Facebook" title="{{ supporter }}'s Facebook"  />
									</a>
                                {% endif %}
                                {% if supporter.profile.twitter_id %}
									<a href="https://twitter.com/#!/{{ supporter.profile.twitter_id }}">
										<img src="/static/images/supporter_icons/twitter_square.png" alt="{{ supporter }}'s Twitter" title="{{ supporter }}'s Twitter"  />
									</a>
                                {% endif %}
                                {% if supporter.profile.goodreads_user_link %}
									<a href="{{supporter.profile.goodreads_user_link}}">
										<img src="/static/images/supporter_icons/goodreads_square.png" alt="{{ supporter }}'s profile on GoodReads" title="{{ supporter }}'s page on GoodReads"  />
									</a>
                                {% endif %}
                                {% if supporter.profile.librarything_id %}
									<a href="http://www.librarything.com/profile/{{ supporter.profile.librarything_id }}">
										<img src="/static/images/supporter_icons/librarything_square.png" alt="{{ supporter }}'s profile on LibraryThing" title="{{ supporter }}'s page on LibraryThing"  />
									</a>
                                 {% endif %}
                               </div>
                            </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> (140 characters max)
                                    {{ profile_form.tagline.errors }}
                                    {{ profile_form.tagline }}

                            </div>
                                     <input class="profile-save" type="submit" name="submit" value="Update" id="submit">
                            </div>
                            
                             <div class="block block2">
                                <h3 class="title">Links</h3>
                                <div class="check-list">
                                   <label> {% if supporter.profile.home_url %}Change{% else %}Add{% endif %} your homepage URL:</label>
                                    {{ profile_form.home_url }}{{ profile_form.home_url.errors }}
                                </div>
                                <div class="check-list">
                                    {% if supporter.profile.twitter_id %}
                                    <a href="{% url socialauth_associate_begin backend='twitter' %}">Update your Twitter connection</a> <br/> or disconnect Twitter: {{ profile_form.clear_twitter }}                                 
                                    {% else %}
                                    <a href="{% url socialauth_associate_begin backend='twitter' %}">Connect your Twitter account</a> to Unglue.it 
                                    {% endif %} 
                                </div>
                                <div class="check-list">
                                    {% if supporter.profile.facebook_id %}
                                    <a href="{% url socialauth_associate_begin backend='facebook' %}">Update your Facebook connection</a>  <br/> or disconnect Facebook: {{ profile_form.clear_facebook }}
                                    {% else %}
                                    <a href="{% url socialauth_associate_begin backend='facebook' %}">Connect your Facebook account</a> to Unglue.it                                   
                                    {% endif %} 
                                </div>
                                <div class="check-list">
                                    {% if user.profile.goodreads_user_id %}
                                    <a href="{{goodreads_auth_url}}">Update your GoodReads connection</a>  
                                    {% else %}
                                    <a href="{{goodreads_auth_url}}">Connect your GoodReads account</a> to Unglue.it                                   
                                    {% endif %} 
                                </div>
                                <div class="check-list">
                                    <label>{% if supporter.profile.librarything_id %}Change{% else %}Add{% endif %} your LibraryThing User ID:</label>
                                    {{ profile_form.librarything_id }}{{ profile_form.librarything_id.errors }}
                                </div>
                            </div>
                            </form> 
                            <div class="block block3">
                                <h3 class="title">Import your books</h3>
                                {% if goodreads_shelf_load_form %}
                                <form id="load_shelf_form" method="post" action="#">
                                    {% csrf_token %}
                                    {{ goodreads_shelf_load_form.non_field_errors }}
                                    <div class="fieldWrapper">
                                        <div id="loadgr"><span><div>{{ goodreads_shelf_load_form.goodreads_shelf_name_number.errors }}                                        
                                        {{ goodreads_shelf_load_form.goodreads_shelf_name_number }}</div>
                                        <input type="submit" value="Add this shelf" />
                                        </div></span>
                                    </div>
                                </form>
                                {% else %}
                                <div id="loadgr"><div>Connect your GoodReads account to import from GoodReads.</div></div>
                                {% endif %}
                                {% if librarything_id %}
                                <form id="librarything_load" method="post" action="#">
                                    {% csrf_token %}
                                    <div id="loadlt"><input type="submit" value="Add your LibraryThing library" /></div>
                                </form>
                                {% else %}
                                <div id="loadlt"><div>Add your LibraryThing ID to import from LibraryThing.</div></div>
                                {% endif %}
                            </div>
                        </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 wantto" 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" alt="view list" title="view list" />
                                </a>
                            </li>
                            <li class="view-list">
                                <a href="#" id="toggle-panel">
                                <img src="/static/images/booklist/view-icon.png" alt="view icon" title="view icon" />
                                </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 %}
                    {% paginate 20 works %}
                    {% for work in works %}
                    <div class="{% cycle 'row1' 'row2' %}">
                    {% with work.last_campaign_status as status %}
					{% with work.last_campaign.deadline as deadline %}
					{% with work.editions.all.0.googlebooks_id as googlebooks_id %}					
                    {% include "book_panel.html" %}
                    {% endwith %}{% endwith %}{% endwith %}
                    </div>
                    {% endfor %}
                    <br>
                    <div class="pagination content-block-heading">
                        {% show_pages %}
                    </div>
                    {% endifequal %}
                </div>
            </div>    
        </div>
        </div>
    </div>
    </div>

{% endblock %}

{% block counter %}
<div class="statcounter"><a title="web
statistics" href="http://statcounter.com/free-web-stats/"
class="statcounter"><img class="statcounter"
src="https://c.statcounter.com/7447776/0/9ae2ba93/1/"
alt="web statistics" /></a></div>
{% endblock %}