{% 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="hosting_company_name" value="{{vm.hosting_company_name}}">
                
                
                <ul class="pricing {% cycle 'p-red' 'p-black' 'p-red' 'p-yel' %}">
                  <li class="type">
                    <!-- <img src="http://bread.pp.ua/n/settings_g.svg" alt=""> -->
                    <h3 >{{vm.hosting_company_name}}</h3>
                    <br/>
                    <img class="img-responsive" src="{{ STATIC_URL }}hosting/img/{{vm.location_code}}_flag.png" alt="">
                   
                  </li>
                  <li>
                    <!-- Single button -->
                    <div class="btn-group">
                      <div class="form-group">
                        <label for="cores">Location: </label>
                        {{vm.location}}
                      </div>
                    </div>
                  </li>
                  <li>
                    <!-- Single button -->
                    <div class="btn-group">
                      <div class="form-group">
                        <label for="cores">Cores: </label>
                        <select class="form-control cores-selector" name="cores" id="{{vm.hosting_company}}-cores" data-vm-type="{{vm.hosting_company}}">
                        {% with ''|center:10 as range %}
                        {% for _ in range %}
                            <option>{{ forloop.counter }}</option>
                        {% endfor %}
                        {% endwith %}
                        </select>
                      </div>
                    </div>

                  </li>
                  <li>
                    <div class="btn-group">
                      <div class="form-group">
                        <label for="memory">Memory: </label>
                        <select class="form-control memory-selector" name="memory" id="{{vm.hosting_company}}-memory" data-vm-type="{{vm.hosting_company}}">
                        {% with ''|center:50 as range %}
                        {% for _ in range %}
                            <option>{{ forloop.counter }}</option>
                        {% endfor %}
                        {% endwith %}
                        </select>
                        <span>GiB</span>
                      </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: </label>
                        <input class="form-control short-input text-center disk-space-selector" name="disk_space" type="number" id="{{vm.hosting_company}}-disk_space" min="10" value="10" step="10" data-vm-type="{{vm.hosting_company}}"/>
                        <span>GiB</span>
                      </div>
                    </div>
                  </li>
                  <li>
                    <input id="{{vm.hosting_company}}-final-price-input" type="hidden" name="final_price" value="{{vm.default_price|floatformat}}">
                    <h3 id="{{vm.hosting_company}}-final-price">{{vm.default_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>