{% load i18n %}

<div class="form-horizontal">
    <div class="stripe-errors sr-only">

    </div>
    <noscript>
        <div class="alert alert-warning">
            {% trans "For a credit card payment, please turn on JavaScript." %}
        </div>
    </noscript>
    <div class="form-group stripe-number">
        <label class="control-label col-sm-2">
            {% trans "Credit card number" %}
        </label>
        <div class="col-sm-4">
            <input type="text" id="stripe_number" class="form-control" placeholder="4242 4242 4242 4242">
            <span class="fa form-control-feedback sr-only"></span>
        </div>
    </div>
    <div class="form-group stripe-exp">
        <label class="control-label col-sm-2">
            {% trans "Expiration date" %}
        </label>
        <div class="col-sm-2">
            <input type="number" min="1" max="12" id="stripe_exp_month" class="form-control" placeholder=
                    "{% trans "Month" %}">
            <span class="fa form-control-feedback sr-only"></span>
        </div>
        <div class="col-sm-2">
            <input type="number" min="{% now "Y" %}" id="stripe_exp_year" class="form-control" placeholder=
            "{% trans "Year" %}">
            <span class="fa form-control-feedback sr-only"></span>
        </div>
    </div>
    <div class="form-group stripe-cvc">
        <label class="control-label col-sm-2">
            {% trans "Security code (CVC)" %}
        </label>
        <div class="col-sm-2">
            <input type="text" maxlength="3" id="stripe_cvc" class="form-control" placeholder=
                    "{% trans "123" %}">
            <span class="fa form-control-feedback sr-only"></span>
        </div>
    </div>
    <div class="form-group stripe-name">
        <label class="control-label col-sm-2">
            {% trans "Cardholder name" %}
        </label>
        <div class="col-sm-4">
            <input type="text" id="stripe_name" class="form-control">
        </div>
    </div>
    <p>
        <em>{% blocktrans trimmed %}
            Your payment will be processed by Stripe, Inc. Your credit card data will be transmitted directly to
            Stripe and never touches our servers.
        {% endblocktrans %}</em>
        <input type="hidden" name="stripe_token" value="" id="stripe_token" />
        <input type="hidden" name="stripe_card_last4" value="" id="stripe_card_last4" />
        <input type="hidden" name="stripe_card_brand" value="" id="stripe_card_brand" />
    </p>
</div>

