<!-- OLD -->
<span>{{ region.city }}, {{ region.country }}</span>

<!-- NEW -->
<span>{{ region.abbr }}</span>
{% if region.is_premium %}<span class="badge badge-premium">Premium</span>{% endif %}
{% if region.is_out_of_stock %}<span class="badge badge-warning">Out of Stock</span>{% endif %}
{% if region.image %}
  <img src="{{ region.image }}" alt="{{ region.name }}" class="region-icon">
{% endif %}

<!-- OLD -->
<div class="product-card">
  <h3>{{ product.name }}</h3>
  <p>{{ product.description }}</p>
  {% for spec in product.spec_entries %}
    <div>{{ spec.term }}: {{ spec.value }}</div>
  {% endfor %}
  {% for price in product.price_entries %}
    <div>{{ price.term }}: {{ price.value }}</div>
  {% endfor %}
</div>

<!-- NEW -->
<div class="product-card">
  <h3>{{ product.plan.id }}</h3>
  <div class="product-specs">
    <span>{{ product.plan.specification.cpu }} vCPU</span>
    <span>{{ product.plan.specification.ram }} GB RAM</span>
    <span>{{ product.plan.specification.storage }} GB Storage</span>
    <span>{{ product.plan.specification.bandwidth_in_tb }} TB Bandwidth</span>
  </div>
  <div class="product-pricing">
    {% for price_item in product.price_items %}
      <div>
        <span>Monthly: ${{ price_item.monthly_price }}</span>
        <span>Hourly: ${{ price_item.hourly_price }}</span>
        {% if price_item.discount_percent > 0 %}
          <span class="badge badge-success">{{ price_item.discount_percent }}% OFF</span>
        {% endif %}
      </div>
    {% endfor %}
  </div>
  {% if not product.overall_activeness %}
    <span class="badge badge-warning">Unavailable</span>
  {% endif %}
</div>

<!-- Use raw data fields -->
<dl>
  <div>
    <dt>vCPU</dt>
    <dd>{{ instance.vcpu_count }}</dd>
  </div>
  <div>
    <dt>RAM</dt>
    <dd>{{ instance.ram }} MB</dd>
  </div>
  <div>
    <dt>Disk</dt>
    <dd>{{ instance.disk }} GB</dd>
  </div>
  <div>
    <dt>Class</dt>
    <dd>{{ instance.class }}</dd>
  </div>
  {% if instance.is_ddos_protected %}
    <div><span class="badge badge-security">DDoS Protected</span></div>
  {% endif %}
  {% if instance.extra_resource %}
    <div>
      <dt>Extra Resources</dt>
      <dd>
        {% if instance.extra_resource.cpu %}+{{ instance.extra_resource.cpu }} CPU{% endif %}
        {% if instance.extra_resource.ram_in_gb %}+{{ instance.extra_resource.ram_in_gb }} GB RAM{% endif %}
        {% if instance.extra_resource.disk_in_gb %}+{{ instance.extra_resource.disk_in_gb }} GB Disk{% endif %}
      </dd>
    </div>
  {% endif %}
</dl>