{% extends 'basepledge.html' %}
{% load url from future %}
{% 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">
		<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_year }}</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.
	</div>
	{% endif %}
	{% ifnotequal 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>
	{% endifnotequal %}

    	{% 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>
        	
        	{% if premiums|length > 1 %}
                <div class="pledge_amount premium_level">Choose your premium:</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}}" {% 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|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 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></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="Pledge 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 %}