{% extends "basepledge.html" %}

{% block title %}Pledge{% endblock %}

{% block extra_extra_head %}
<link type="text/css" rel="stylesheet" href="/static/css/campaign.css"  />
<link type="text/css" rel="stylesheet" href="/static/css/pledge.css"  />

<script type="text/javascript" src="/static/js/prefill_pledge.js"></script>
{% endblock %}

{% block doccontent %}
<div style="height:15px";></div>
<div class="book-detail">
	<div id="book-detail-img">
		<a href="#"><img src="{{ work.cover_image_thumbnail }}" alt="{{ work.title }}" title="{{ work.title }}" width="131" height="192" /></a>
    </div>
    
    <div class="book-detail-info">
		<div class="layout">
			<h2 class="book-name">{{ work.title }}</h2>
			<div>
				<div class="pubinfo">
					<h3 class="book-author">{{ work.author }}</h3>
					<h3 class="book-year">{{ pubdate }}</h3>
				</div>
			</div>
		</div>

		<div class="jsmodule rounded pledge">
			<div class="jsmod-content">
				${{ work.last_campaign.target }} needed by<br />
				{{ work.last_campaign.deadline }}
			</div>
		</div>
                
        <div class="pledged-info">
        	<div class="pledged-group">
        		{{ work.last_campaign.supporters.count }} Ungluers have pledged ${{ work.last_campaign.current_total }}
        	</div>
        	<div class="status">
        		<img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png"  title="book list status" alt="book list status" />
        	</div>
        </div>
    </div>
</div>
    
<div class="jsmodule rounded">
    <div class="jsmod-content">

	{% if faqmenu == 'modify' %}	
	<p>You have pledged ${{preapproval_amount}}.  If you would like to modify your pledge, please use the following form.</p>
	{% endif %}

    	{% comment %}
    	Even there is a CampaignPledgeForm in frontend/forms.py , the "widget" for premium_id is implemented in HTML here for now.
    	{% endcomment %}	
	
    	<form class="pledgeform" method="POST" action="{% if faqmenu == 'modify' %}{% url pledge_modify work_id=work.id %}{% else %}{% url pledge work_id=work.id %}{% endif %}">
        	{% csrf_token %}
			{{ form.non_field_errors }}
        	<div class="pledge_amount">{{ form.preapproval_amount.label_tag }}: {{ form.preapproval_amount.errors }}${{ form.preapproval_amount }}</div>
        	
        	{% comment %}
        	not supported yet; don't display
        	{{ form.anonymous.label_tag }}: {{ form.anonymous.errors }}{{ form.anonymous }}	
        	{% endcomment %}

        	<ul class="support menu" id="premiums_list">
            	{% for premium in premiums %}
            	{% if premium.limit == 0  or  premium.limit > premium.premium_count  %}
            	<label for="premium_{{premium.id}}">
            	<li class="{% if forloop.first %}first{% else %}{% if forloop.last %}last{% endif %}{% endif %}">
                	<input type="radio" name="premium_id" id="premium_{{premium.id}}" value="{{premium.id}}" {% ifequal request.REQUEST.premium_id premium.id|stringformat:"s"  %}checked="checked"{% endifequal %} />
                    <span class="menu-item-price">
                    	${{ premium.amount }}
                    </span>
                	<span class="menu-item-desc">
                		{{ premium.description }} {% ifnotequal premium.limit 0 %}<br /> Only  {{ premium.premium_remaining }} remaining! {% endifnotequal %}
                	</span>
           		</a></li></label>
            	{% endif %}
            	{% endfor %}
         	</ul>

	       <input type="submit" {% if faqmenu == 'modify' %}value="Modify Pledge"{% else %}value="Pledge"{% endif %} id="pledgesubmit" />    
    	</form>
    </div>

{% endblock %}