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

{% block extra_js %}
<script type="text/javascript" src="{{ jquery_ui_home }}"></script>
{% endblock %}

{% block extra_css %}
<link type="text/css" rel="stylesheet" href="/static/css/landingpage2.css"  />
<link type="text/css" rel="stylesheet" href="/static/css/searchandbrowse.css"  />
<link type="text/css" rel="stylesheet" href="/static/css/book_panel.css"  />
<link type="text/css" rel="stylesheet" href="/static/css/learnmore.css"  />
{% endblock %}

{% block base_js %}

<script src="{{ jquery_home }}"></script>

<!-- toggle to panelview state instead of listview default -->
<script type="text/javascript">
	jQuery(document).ready(function($) { 
        $('.listview').addClass("panelview").removeClass("listview");
    });    
</script>    

<script type="text/javascript" src="/static/js/definitions.js"></script>
<script type="text/javascript" src="/static/js/wishlist.js"></script>
<script type="text/javascript" src="/static/js/greenpanel.js"></script>
<script type="text/javascript" src="/static/js/highlight_signup.js"></script>
<script src="/static/js/slides.min.jquery.js"></script>
<script src="/static/js/slideshow.js"></script>
<script type="text/javascript" src="/static/js/expand.js"></script>

{% endblock %}

{% block topsection %}
{% include "learn_more.html" %}
{% endblock %}
    
{% block content %}
		<div id="expandable">
          <div id="js-rightcol2">
            <div id="js-rightcol-padd2">
            	<div class="jsmodule">
 		       		<div id="collapser" class="collapser_x">X</div>
                	<h3 class="module-title">Start Ungluing Now!</h3>
                    <div class="jsmod-content">
                    {% if not request.user.is_authenticated %}
                      <form action='/accounts/register/' method='post'>{% csrf_token %}
                    	<div class="user-name">
                    	<label>Username</label>
                        <input id="id_username_pop" type="text" class="required" name="username" maxlength="30" size="30" />
                        </div>
                        <div class="email">
                    	<label>Email</label>
                        <input id="id_email_pop" type="text" class="required" name="email" maxlength="75" size="30" />
                        </div>
                        <div class="password">
                    	<label>Password</label>
                        <input id="id_password1_pop" type="password" class="required" name="password1" size="30" />
                        </div>
                        <div class="password">
                    	<label>Password (again):</label>
                        <input id="id_password2_pop" type="password" class="required" name="password2" size="30" />
                        </div>
						<div class="button">
                        	<input type="submit" class="signup" value="Sign Up" />
                        </div>
                        </form>
                        <div class="google_signup">
                            <a href="/socialauth/login/google?next={{request.build_absolute_uri}}"><img src="{{ STATIC_URL }}images/auth/google_32_noborder.png" alt="google" /></a><div>Or: <a href="/socialauth/login/google?next={{request.build_absolute_uri}}">Sign Up With Google</a></div>
                        </div>
                    {% else %}
                    <div>
                    You are logged in as <a href="{% url supporter supporter_username=request.user.username %}">{{ request.user.username }}</a>.
                    </div>
                    {% endif %}

                    </div>
                </div>
            </div>
            </div>
            </div>

    <div id="main-container" class="main-container-fl">
    <div class="js-main">
        <div id="js-maincol-fl">
        	<div id="js-main-container">
            <div class="js-main-container-inner">
            		<div id="js-maincontainer-content" class="have-content-right-module">
                        <div class="content-right-module">
                        	<h3>How does it work?</h3>
                        </div>
                        <div style="clear:right;">
                        	<div class="item-content">
                        		<h2 class="page-heading">Give ebooks to the world.</h2>
                        	</div>
                            <div class="jsmod-content">
                            	<a href="{{ faqurl }}#crowdfunding"><img src="/static/images/landingpage/icon-group.png" alt="How does it work?" title="How does it work?" height="269" width="268" /></a>
                            </div>
                        </div>
                    </div>
                    <div id="js-maincontainer-bot-block">
                        <div id="js-search">
                        	<label>What book would you give to the world? </label>
				                <form action="{% url search %}" method="get">
                				    <input type="text" id="watermark" onfocus="imgfocus()" onblur="imgblur(0)" size="25" class="inputbox" name="q" value="{{ q }}">
                				    <input type="submit" class="greenbutton" value="Search">
               					</form>
                        </div>
                    </div>
                    <div id="js-maincontainer-faq">
                    	<div class="js-maincontainer-faq-inner">
                        	Questions? Read our <a href="/faq/">general FAQ</a> or <a href="/faq/rightsholders/">FAQ for rights holders</a>.
                        </div>
                    </div>
            </div>
            </div>
            <div id="js-rightcol">
            <div class="js-rightcol-padd">
            	<div class="jsmodule" id="mainlogin">
                	<h3 class="module-title">Start Ungluing Now!</h3>
                	{% if not request.user.is_authenticated %}
                    <div class="jsmod-content">
                      <form action='/accounts/register/' method='post'>{% csrf_token %}
                    	<div class="user-name">
                    	<label>Username</label>
                        <input id="id_username_main" type="text" class="required" name="username" maxlength="30" size="30" />
                        </div>
                        <div class="email">
                    	<label>Email</label>
                        <input id="id_email_main" type="text" class="required" name="email" maxlength="75" size="30" />
                        </div>
                        <div class="password">
                    	<label>Password</label>
                        <input id="id_password1_main" type="password" class="required" name="password1" size="30" />
                        </div>
                        <div class="password">
                    	<label>Password (again):</label>
                        <input id="id_password2_main" type="password" class="required" name="password2" size="30" />
                        </div>
						<div class="button">
                        	<input type="submit" class="signup" value="sign up" />
                        </div>
                        <div class="google_signup">
                            <a href="/socialauth/login/google?next={{request.build_absolute_uri}}"><img src="{{ STATIC_URL }}images/auth/google_32_noborder.png" alt="google" /></a><div><a href="/socialauth/login/google?next={{request.build_absolute_uri}}">Sign Up With Google</a></div>
                        </div>
                      </form>
                    </div>
                    {% else %}
                    <div>
                    You are logged in as <a href="{% url supporter supporter_username=request.user.username %}">{{ request.user.username }}</a>.
                    </div>
                    {% endif %}

                </div>
                <div class="jsmodule">
                	<h3 class="module-title">Who's ungluing what</h3>
                    <div class="jsmod-content">
						<ul class="ungluingwhat">
						{% for event in events %}
                        	<li>
                            	<div class="user-avatar"><a href="{% url supporter event.wishlist.user.username %}"><img src="{% if event.wishlist.user.picurl %}{{ event.wishlist.user.picurl}}{% else %}/static/images/header/avatar.png{% endif %}" width="43" height="43" title="{{event.wishlist.user.username}}" alt="{{event.wishlist.user.username}} avatar" /></a></div>
                                <div class="user-book-info">
                                	<p class="user-book-info"><a href="{% url supporter event.wishlist.user.username %}">{{event.wishlist.user.username|truncatechars:20}}</a> is Wishing For</p>
                                    <a class="user-book-name" href="{% url work event.work.id %}">{{ event.work.title }}</a>
                                </div>
                                <div class="user-book-thumb"><a class="user-book-name" href="{% url work event.work.id %}"><img src="{{ event.work.cover_image_thumbnail }}" width="29" height="43" title="{{ event.work.title }}" alt="{{ event.work.title }}" /></a></div>
                            </li>
                        {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
    </div>
    
    <div id="js-slide">
    	<div class="js-main">
        	<div class="jsmodule" id="content-block">
        	{% include "slideshow.html" %}
            </div>
        </div>
    </div>
{% endblock %}