regluit/frontend/templates/pledge.html

{% extends "basepledge.html" %}
{% load humanize %}

{% 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/reconcile_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|intcomma }} 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|intcomma }}
        	</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 clearfix">
    <div class="jsmod-content">

	{% if faqmenu == 'modify' %}	
	<div class="modify_notification clearfix"><h4>You've already pledged to this campaign:</h4>
		<div>
		Amount: ${{preapproval_amount|intcomma}}.<br />
		Your premium: {% if premium_description %}{{ premium_description }}{% else %}You did not request a premium for this campaign.{% endif %}<br />
		</div>
	<br /> You can modify your pledge below.
	</div>
	{% 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 %}
        	
        	<div class="pledge_amount premium_level">Choose your premium:</div>

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

	       <input name="pledge" type="submit" {% if faqmenu == 'modify' %}value="Modify Pledge"{% else %}value="Pledge Now"{% endif %} id="pledgesubmit" />
	       <input name="decoy" type="submit" id="fakepledgesubmit" disabled="disabled" />
	       {% comment %}
	       When the pledge amount and premium are in an inconsistent state, the real button is disabled and (via css) hidden; instead we display this fake button with a helpful message.  It's a button so we can reuse all the existing CSS for buttons, so that it looks like the real button has just changed in appearance.  It's hidden and the other one un-disabled and un-hidden when the pledge & premium return to a correct state.  People without javascript enabled will miss out on the front-end corrections but form validation will catch it.
	       {% endcomment %}
    	</form>    	
    </div>
</div>

{% if faqmenu == 'modify' %}<div class="cancel_notice">(We hope you won't, but of course you're also free to <a href="{% url pledge_cancel campaign_id=work.last_campaign.id %}">cancel your pledge</a>.)</div>{% endif %}

{% endblock %}