{% 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">{{ work.publication_date_year }}</h3>
				</div>
			</div>
		</div>

		<div class="jsmodule rounded pledge">
			<div class="jsmod-content">
				${{ work.last_campaign.target|floatformat:0|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 transaction.premium %}{{ transaction.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>
        	
        	<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 %} />
                	{% if premium_item.amount == 0 %}
                    <span class="menu-item-price">
                    	Any amount
                    </span>
                    {% else %}
                    <span class="menu-item-price">
                    	${{ premium_item.amount|intcomma }}
                    </span>
                    {% endif %}
                	<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>

			<div class="pledge_amount clearfix" id="mandatory_premiums">
			<div>Depending on your pledge amount, you'll also get these acknowledgements.</div>
			<div class="ack_active"><div class="ack_level">Any amount</div><div class="ack_header">The unglued ebook will be delivered to your inbox.</div></div>
			<div id="ack_name" class="ack_inactive"><div class="ack_level">$25+</div><div class="ack_header">You'll be listed on the acknowledgements page of the unglued ebook<span id="ack_section"></span>.&nbsp;{{ form.ack_name.label_tag }} {{ form.ack_name.errors }}{{ form.ack_name }}<div id="anonbox"><I>{{ form.anonymous.label_tag }}</I> {{ form.anonymous.errors }}{{ form.anonymous }}</div></div></div>
			<div id="ack_link" class="ack_inactive"><div class="ack_level">$50+</div><div class="ack_header">Your acknowledgement will link to your Unglue.it supporter page.{{ form.ack_link }}</div></div>
			<div id="ack_dedication" class="ack_inactive"><div class="ack_level">$100+</div><div class="ack_header">Your acknowledgement can include a dedication (140 characters max).&nbsp;{{ form.ack_dedication.label_tag }} {{ form.ack_dedication.errors }}{{ form.ack_dedication }}</div></div>
			</div>
			<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>
<div class="cancel_notice">
{% if faqmenu == 'modify' %}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>.{% endif %}</div>
<div id="pass_supporter_name" style="display: none;">{{ request.user.username }}</div>
{% if transaction.ack_name %}
<div id="pass_ack_name" style="display: none;">{{ transaction.ack_name }}</div>
{% else %}
<div id="pass_ack_name" style="display: none;">{{ request.user.username }}</div>
{% endif %}
<div id="pass_ack_link" style="display: none;">{{ transaction.ack_link }}</div>
<div id="pass_ack_dedication" style="display: none;">{{ transaction.ack_dedication }}</div>
<div id="pass_anon" style="display: none;">{{ transaction.anonymous }}</div>
{% endblock %}