{% extends 'base.html' %}

{% load typogrify_tags utils_tags zebra_tags %}

{% block bodyclass %}NB-static{% endblock %}
{% block extra_head_js %}
  {% include_stylesheets "common" %}
  {% include_javascripts "payments" %}

  <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
  <script type="text/javascript" src="https://js.stripe.com/v1/"></script>

  {% zebra_head_and_stripe_key %}
{% endblock %}

{% block content %}

{% if new_user_queue_position >= 0 %}
    <div class="NB-static-alert">
        <p style="margin: 0">
            {% if new_user_queue_position == 0 %}
                You are at the front of the line! Just a few more minutes<br />until you receive your free invite to use NewsBlur.
            {% else %}
                There {{ new_user_queue_position|pluralize:"is,are" }} {{ new_user_queue_position|commify }} {{ new_user_queue_position|pluralize:"person,people" }} in front of you{% if new_user_queue_behind %} <span style="color:#999">(and {{ new_user_queue_behind|commify }} {{ new_user_queue_behind|pluralize:"person,people" }} behind you)</span>{% endif %}, {{ new_user_queue_position|pluralize:",all" }} patiently waiting<br /> on their free accounts on NewsBlur.
            {% endif %}
        </p>
        <p style="margin: 6px 0 0;color: #355599;font-weight: bold;">By going premium you can get full and immediate access to NewsBlur.</p>
    </div>
{% endif %}

<div class="NB-static-form-wrapper" style="overflow:hidden">
   <div class="NB-modal-feedchooser NB-static-feedchooser NB-feedchooser-type" style="    margin: 0 10% 0 0;
    width: 376px;
float: right;">
    <div class="NB-feedchooser-info">
        <div class="NB-feedchooser-info-type">
            <span class="NB-feedchooser-subtitle-type-prefix">Super-Mega</span> Premium Account
        </div>
    </div>
    <ul class="NB-feedchooser-premium-bullets">
        <li class="NB-1">
            <div class="NB-feedchooser-premium-bullet-image"></div>Enable every site by going premium<br /><span style="color: rgba(0, 0, 0, .5)">Free accounts are limited to 64 sites</span>
        </li>
        <li class="NB-2">
            <div class="NB-feedchooser-premium-bullet-image"></div>Sites updated up to 10x more often
        </li>
        <li class="NB-3">
            <div class="NB-feedchooser-premium-bullet-image"></div>River of News (reading by folder)
        </li>
        <li class="NB-4">
            <div class="NB-feedchooser-premium-bullet-image"></div>Search sites and folders
        </li>
        <li class="NB-5">
            <div class="NB-feedchooser-premium-bullet-image"></div>Save stories with searchable tags
        </li>
        <li class="NB-6">
            <div class="NB-feedchooser-premium-bullet-image"></div>Privacy options for your blurblog
        </li>
        <li class="NB-7">
            <div class="NB-feedchooser-premium-bullet-image"></div>Custom RSS feeds for folders and saved stories
        </li>
        <li class="NB-8">
            <div class="NB-feedchooser-premium-bullet-image"></div>Text view conveniently extracts the story
        </li>
        <li class="NB-9">
            <div class="NB-feedchooser-premium-bullet-image"></div>You feed Shiloh, my poor, hungry dog, for <span class="NB-feedchooser-hungry-dog">12 days</span><img src="/media//img/reader/shiloh.jpg" class="NB-feedchooser-premium-poor-hungry-dog">
        </li>
    </ul>
</div>

    <div class="NB-static-form NB-stripe-form">

        <label>Username</label>
        <div class="NB-stripe-username">
            <a href="{% url "logout" %}" class="NB-right" style="font-size: 10px;">logout</a>
            {{ user.username }}
        </div>
        <div class="NB-creditcards">
            <img src="{{ MEDIA_URL }}img/reader/cc_visa.png">
            <img src="{{ MEDIA_URL }}img/reader/cc_mastercard.png">
            <img src="{{ MEDIA_URL }}img/reader/cc_amex.png">
            <img src="{{ MEDIA_URL }}img/reader/cc_discover.png">
        </div>
                
        <form action="" method="POST" id="payment-form">{% csrf_token %}
            
            <div>
                {{ zebra_form.card_number.label_tag }}
                {{ zebra_form.card_number }}
                {% if error %}
                    <label class="error">{{ error }}</label>
                {% endif %}
            </div>
            <div>
                {{ zebra_form.card_cvv.label_tag }}
                {{ zebra_form.card_cvv }}
            </div>
            
            <div>
                {{ zebra_form.card_expiry_month.label_tag }}
                {{ zebra_form.card_expiry_month }}
            </div>
            
            <div>
                {{ zebra_form.card_expiry_year.label_tag }}
                {{ zebra_form.card_expiry_year }}
            </div>
            
            <div>
                {{ zebra_form.email.label_tag }}
                {{ zebra_form.email }}
            </div>
            
            <div style="overflow: hidden;">
                <style>
                .NB-stripe-plan-choice label:first-child,
                .NB-stripe-plan-choice label:nth-child(2) {
                    display: none;
                }
                </style>
                {{ zebra_form.plan.label_tag }}
                <label for="payextra" class="payextra-label">
                    <!-- <input type="checkbox" id="payextra" name="payextra" />
                    I'm feeling generous -->
                    {{ zebra_form.plan|safe }}
                </label>
            </div>
            
            {{ zebra_form.last_4_digits }}
            {{ zebra_form.stripe_token }}
            
            <noscript><h3>Note:&nbsp; this form requires Javascript to use.</h3></noscript>
        
            <span class="payment-errors"></span>
            <button type="submit" class="submit-button NB-modal-submit-button NB-modal-submit-green">{% if renew %}Switch to this Credit Card{% else %}Submit Payment{% endif %}</button>
            
            <span class="payment-notice">
                {% if not immediate_charge and user.profile.premium_expire %}
                You will not be charged until {{ user.profile.premium_expire|date:"F j, Y" }}
                {% endif %}
            </span>
        </form>

    </div>  
</div>

{% endblock %}