{% load static i18n %}

<div class="col-lg-5 col-xl-4 my-auto">
    <div class="bg-white rounded shadow-md pt-3">
        <div class="price-text text-white bg-dark-3 text-center mt-3 p-3">
            <p class="mb-0">
                {% if vm_pricing.set_up_fees %}<span class="mr-1">Setup Fees</span>{{ vm_pricing.set_up_fees }} CHF included<br>{% endif %}
                {% if vm_pricing.discount_amount %}
                    {% trans "Discount" %} <span class="text-primary ml-1">{{ vm_pricing.discount_amount }}</span> CHF
                {% endif %}
                {% if vm_pricing.vat_inclusive %}<span class="text-muted ml-1">{% trans "( VAT included )" %}</span>{% endif %}
            </p>
        </div>
        <hr class="mb-3 mx-n4">
        <h5 class="text-2 mb-2 text-center">{% trans "Hosted in Switzerland" %}</h5>
        <hr class="mb-4 mx-n4">
        <div class="pb-4 px-4">
            <form id="order_form" method="POST" action="{% url 'nextcloud:index' %}" data-toggle="validator" role="form" method="post">
                {% csrf_token %}
                <div class="form-group px-n4">
                    <div class="input-group">
                        <div class="input-group-prepend"><i class="fa fa-minus-circle left text-5 p-3" data-minus="cores" aria-hidden="true"></i></div>
                        <input class="input-price select-number form-control" type="number" min="1" max="48" id="cores" step="1" name="cores"
                        {% if form.cores.value != None %}value="{{ form.cores.value }}"{% endif %} data-error="{% trans 'Please enter a value in range 1 - 48.' %}" required>
                        <div class="input-group-append"> 
                            <span class="input-group-text">Core</span>
                            <i class="fa fa-plus-circle right text-5 p-3" data-plus="cores" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
                <div class="form-group px-n4">
                    <div class="input-group">
                        <div class="input-group-prepend"><i class="fa fa-minus-circle left text-5 p-3" data-minus="memory" aria-hidden="true"></i></div>
                        <input id="memory" class="input-price select-number form-control" type="number" min="2" max="200" name="memory" 
                        {% if form.memory.value != None %}value="{{ form.memory.value }}"{% endif %} data-error="{% blocktrans with min_ram=min_ram %}Please enter a value in range {{min_ram}} - 200.{% endblocktrans %}" required step="1">
                        <div class="input-group-append"> 
                            <span class="input-group-text">{% trans "RAM" %}</span>
                            <i class="fa fa-plus-circle right text-5 p-3" data-plus="memory" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
                <div class="form-group px-n4">
                    <div class="input-group">
                        <div class="input-group-prepend"><i class="fa fa-minus-circle left text-5 p-3" data-minus="storage" aria-hidden="true"></i></div>
                        <input id="storage" class="input-price select-number form-control" type="number" min="100" max="10000" step="100"
                           name="storage" {% if form.storage.value != None %}value="{{ form.storage.value }}"{% endif %} data-error="{% trans 'Please enter a value in range 100 - 10000.' %}" required>
                        <div class="input-group-append"> 
                            <span class="input-group-text">{% trans "GB Storage" %}</span>
                            <i class="fa fa-plus-circle right text-5 p-3" data-plus="storage" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
                <hr class="mb-1 mx-n1">
                {% if vm_pricing.discount_amount %}
                    <p class="text-muted mb-1">{% trans "You save" %} <span class="text-dark">{{ vm_pricing.discount_amount }}</span> CHF</p>
                {% endif %}
                <p class="text-muted mb-1">{% trans "Subtotal" %} <span id="subtotal" class="text-dark"></span> CHF</p>
                <p class="text-muted text-3 mb-2">{% trans "Total" %}<span id="total" class="font-weight-500 text-primary pl-2"></span><span class="text-2 p-1">CHF</span></p>
                <input type="hidden" name="pricing_name" id="pricing_name" value="{% if vm_pricing.name %}{{vm_pricing.name}}{% else %}unknown{% endif%}"></input>
                <input type="submit" class="btn btn-primary btn-block" value="{% trans 'Continue' %}"></input>
          </form>
        </div>
    </div>
  </div>