{% load staticfiles %}
<a name="price"></a>
<div class="content-section-b">
  <div class="container-fluid pricing-container">
    <div class="row">
      <div class="col-lg-5 col-sm-6 col-md-offset-1">
          <hr class="section-heading-spacer">
          <div class="clearfix"></div>
        <h2 class="section-heading">Hosting Price</h2>
      </div>
      <!-- Title -->
      <div class="row">
          <div class="col-lg-12"></div>
      </div>


      <!-- Page Features -->
      <div class="row text-center">

        <div class="block col-md-offset-3">
          {% for vm in vm_types %}
            <div class="col-xs-12 col-sm-6 col-md-4">
              <form class="form-inline" method="POST" action="{{request.path}}">
                {% csrf_token %}
                <input type="hidden" name="hosting_company" value="{{vm.hosting_company}}">
                <input type="hidden" name="location_code" value="{{vm.location_code}}">
                <input type="hidden" name="vm_template" value="{{vm.id}}">
               
                
                
                <ul class="pricing {% cycle 'p-red' 'p-black' 'p-red' 'p-yel' %}">

                  <li>
                    <!-- Single button -->
                    <div class="btn-group">
                      <div class="form-group">
                        <label for="cores">Cores: {{vm.cores}}</label> 
                      </div>
                    </div>

                  </li>
                  <li>
                    <div class="form-group">
                      <div class="btn-group">
                        <label for="memory">Memory: {{vm.memory}} GiB</label> 
                      </div>
                    </div>
                  </li>           
                  <li>
                    <div class="form-group row">
                      <div class="col-xs-offset-1 col-xs-9 col-sm-12 col-md-12 col-md-offset-0">
                        <label for="Disk Size">Disk Size: {{vm.disk_size}} GiB</label>
                      </div>
                    </div>
                  </li>
                  <li>
                  <label for="configuration">Configuration: </label>
                        <select class="form-control" name="configuration" id="{{vm.hosting_company}}-configuration" data-vm-type="{{vm.hosting_company}}">
                        {% for key,value in configuration_options.items   %}
                            <option  value="{{key}}">{{ value }}</option>
                        {% endfor %}
                        </select>
                  </li>
                  <li>
                    <input type="hidden" name="final_price" value="{{vm.final_price|floatformat}}">
                    <h3 id="{{vm.hosting_company}}-final-price">{{vm.final_price|floatformat}}CHF</h3>
                    <span>per month</span>
                  </li>
                  <li>
                    <button>Book it</button>
                  </li>
                </ul>
              </form>
            </div>
          {% endfor %}

        </div><!-- /block -->
      </div>
    </div>

  </div>
</div>