{% extends 'basepledge.html' %}

{% load humanize %}

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

{% block extra_extra_head %}
<script type="text/javascript" src="/static/js/reconcile_pledge.js"></script>
<script type="text/javascript" src="/static/js/loader-gif.js"></script>
{% endblock %}

{% block news %}
{% endblock %}

{% block doccontent %}
<div style="height:15px"></div>
<div class="book-detail">
	<div id="book-detail-img" class="book-cover" >
		<a href="{% url 'work' work.id %}"><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"><a href="{% url 'work' work.id %}">{{ work.title }}</a></h2>
			<div>
				<div class="pubinfo">
					<h3 class="book-author">{{ work.authors_short }}</h3>
					<h3 class="book-year">{{ work.publication_date }}</h3>
				</div>
			</div>
		</div>
                
        <div>
            <div class="thermometer"  title="{{ work.percent_of_goal }}% of goal">
                <div class="cover" style="width: {{ cover_width }}%;">
                </div>
                <span>{{ work.percent_of_goal }}% of goal</span>
            </div>
            <div class="pledged-info noborder">
                <div class="campaign-status-info">
                    <span>${{ work.last_campaign.current_total|floatformat:0|intcomma }}</span> pledged
                </div>
                <div class="campaign-status-info">
                    <span>${{ work.last_campaign.target|floatformat:0|intcomma }}</span> goal
                </div>
                <div class="campaign-status-info">
                    {% if work.last_campaign.supporters_count == 1 %}
                        <span>1</span> ungluer
                    {% else %}
                        <span>                                            {{ work.last_campaign.supporters_count }}</span> ungluers
                    {% endif %}                                    
                </div>
                <div class="campaign-status-info">
                    <span>{{ work.last_campaign.countdown }}</span> to go
                </div>
            </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: ${{transaction.amount|floatformat:2|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. <span id="change_pledge_notice">If you change your pledge to a donation, the pledge will be cancelled and your credit card charged immediately. </span>
	</div>
	{% endif %}
	{% if work.last_campaign.status != 'ACTIVE' %}	
	<div class="clearfix"><h4>Campaign NOT ACTIVE</h4>
		This pledge form is not functional because the campaign is NOT ACTIVE.<br /><br /><br />
	</div>
	{% endif %}

    	{% comment %}
    	Even though there is a CampaignPledgeForm in frontend/forms.py , the "widget" for premium selection 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 }}
        	{% if work.last_campaign.charitable %}
        	<div class="pledgeform_label">{{ form.donation }} {{ form.donation.label_tag }}</div>
        	{% else %}

        	{% endif %}
        	</div>
        	<div id="select_premiums">
        	{% if premiums|length > 1 %}
                <div class="pledge_amount premium_level">Choose your premium<span id="premium_note"></span>:</div>
                
                <div style="height:10px;"></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}}" {% if  request.GET.premium_id ==  premium_item.id|stringformat:"s"  %}checked="checked"{% elif  premium_id == premium_item.id %}checked="checked"{% endif %} />
                        {% if premium_item.amount == 0 %}
                        <span class="menu-item-price">
                            Any amount
                        </span>
                        {% else %}
                        <span class="menu-item-price">
                            ${{ premium_item.amount|floatformat:0|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>
            {% else %}
            <div style="height:10px;"></div>
            <input type="hidden" name="premium_id" id="premium_{{ premiums.0.id }}" value="{{ premiums.0.id }}" checked="checked" />
                {% comment %}
                If the RH hasn't added any premiums, there's no point in displaying the "no premium" option, but we do need to check it off so the form will validate.
                {% endcomment %}
         	{% endif %}
            </div>
            
			<div class="pledge_amount clearfix" id="mandatory_premiums">
			<div>Depending on your support 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></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>
			<div id="anonbox"><I>{{ form.anonymous.label_tag }}</I> {{ form.anonymous.errors }}{{ form.anonymous }}</div>
			<input name="pledge" type="submit" {% if faqmenu == 'modify' %}value="Modify Pledge"{% else %}value="Support Now"{% endif %} id="pledgesubmit" class="loader-gif" />
			<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>

{% endblock %}