{% extends "panel_base.html" %}

{% block header_title %}{{gettext("New Product Variant")}} | {{get_sitename()}}{% endblock %}
{% block title %}{{gettext("New Product Variant")}}{% endblock %}

{% block content %}
<div class="row">
  <div class="col-lg-7 col-md-9 col-sm-12 col-xs-12">
    <div class="x_panel">
      <div class="x_title">
        <h2>{{gettext("New Product Variant")}}</h2>
        <ul class="nav navbar-left panel_toolbox">
          <li><a class="close-link"><i class="fa fa-close"></i></a>
          </li>
          <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
          </li>            
        </ul>
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <form method="POST" enctype="multipart/form-data">
          <div class="col-xs-12">
            <div class="form-group col-xs-12">
              <label for="sku">{{gettext("SKU")}}</label>
              <input placeholder="{{gettext('SKU')}}" type="text" id="sku" name="sku" required="required" class="form-control col-xs-12" {% if variant %}value="{{variant.sku}}"{% endif %}>
            </div>
            <div class="form-group col-xs-12">
              <label for="price_override" class="control-label">
                {{gettext("Price override")}} ({{gettext("optional")}})
              </label>
              <input type="number" name="price_override" class="form-control col-xs-12" {% if variant %}value="{{variant.price_override}}"{% endif %}>
            </div>
            <div class="form-group col-xs-12">
              <label for="tags" class="control-label">
                {{gettext("Number in stock")}}
              </label>
              <input type="number" name="quantity" class="form-control col-xs-12" {% if variant %}value="{{variant.quantity}}"{% else %}value=1{% endif %} required="">
            </div>
            {% for variant_attr in product.product_type.variant_attributes %}
            <div class="form-group col-xs-12">
              <label for="tags" class="control-label">
                {{variant_attr.name}}
              </label>
              <select class="form-control" name="variant-attr-{{variant_attr.id}}">
                <option value="">---</option>
              {% for choice in variant_attr.choices %}
                <option value="{{choice.id}}" {% if variant and variant.get_attr_choice_id(variant_attr.id) == choice.id %}selected=""{% endif %}>{{choice.name}}</option>
              {% endfor %}
              </select>
            </div>
            {% endfor %}
            <div class="form-group">
              <div class="col-lg-12">
                <button class="btn btn-success" type="submit">{{gettext("Save")}}</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>  
{% endblock %}