{% extends "panel_base.html" %}

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

{% block content %}
<div class="row">
  <div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
      <div class="x_title">
        <h2>{{gettext("New Product")}}</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-md-7 col-xs-12">
              <div class="form-group">
              	<label>{{gettext("name")}}</label>
              	<input class="form-control" type="text" name="name" placeholder="{{gettext('name')}}" required="required" {% if product %}value="{{product.name}}"{% endif %}>
	            </div>
              <div class="divider-dashed"></div>
              <div class="form-group">
                <label>{{gettext("description")}} ({{gettext("optional")}})</label>
                <textarea name="description" id="description" class="form-control">{% if product %}{{product.description or ""}}{% endif %}</textarea>
              </div>
              <div class="divider-dashed"></div>
              <div class="form-group">
                <label for="seo-title">{{gettext("SEO title")}} {{ngettext("%(num)d character", "%(num)d characters", __num=70)}} ({{gettext("optional")}})</label>
                <textarea maxlength="70" id="seo-title" name="seo-title" class="form-control">{% if product %}{{product.seo_title or ""}}{% endif %}</textarea>
              </div>
              <div class="divider-dashed"></div>
              <div class="form-group">
                <label for="seo-description">{{gettext("SEO Description")}} {{ngettext("%(num)d character", "%(num)d characters", __num=300)}} ({{gettext("optional")}})</label>
                <textarea maxlength="300" name="seo-description" id="seo-description" class="form-control">{% if product %}{{product.seo_description or ""}}{% endif %}</textarea>
              </div>
	        </div>
          <div class="col-md-5 col-xs-12">
            <div class="form-group">
              <label>{{gettext("Price")}}</label>
              <input type="number" name="price" class="form-control" required="required" {% if product %}value="{{product.price}}"{% endif %}>
            </div>
            {% if not product_type.has_variants %}
            <div class="divider-dashed"></div>
            <div class="form-group">
              <label>{{gettext("SKU")}}</label>
              <input type="text" name="sku" class="form-control" required="required" {% if product %}value="{{product.variants[0].sku}}"{% endif %}>
            </div>
            <div class="divider-dashed"></div>
            <div class="form-group">
              <label>{{gettext("Number in stock")}}</label>
              <input type="number" name="quantity" class="form-control" required="required" {% if product %}value="{{product.variants[0].quantity}}"{% endif %} min=0>
            </div>
            {% endif %}
            <div class="divider-dashed"></div>
            <div class="form-group">
              <label>{{gettext("Category")}}</label>
              <select id="category" name="category_id" class="form-control">
                <option value="">---</option>
                {% for c in categories %}
                <option value="{{c.id}}" {% if product and product.category_id == c.id %}selected="selected"{% endif %}>{{c.get_name()}}</option>
                {% endfor %}
              </select>
            </div>
            <div class="divider-dashed"></div>
            <div class="form-group">
              <label for="publish">{{gettext("Publish")}}</label>
              <input id="publish" type="checkbox" name="publish" class='fomr-check-input'{% if product and product.is_published%}checked=""{% endif %}>
            </div>
            <div class="form-group">
              <label for="featured">{{gettext("Featured")}}</label>
              <input id="featured" type="checkbox" name="featured" class='fomr-check-input'{% if product and product.is_featured%}checked=""{% endif %}>
            </div>
            {% if product_type.product_attributes %}              
            <div class="divider-dashed"></div>
            <h3>{{gettext("Attributes")}}</h3>
            <div class="form-group">
              {% for attribute in product_type.product_attributes %}
              <label for="attribute-{{attribute.id}}">{{attribute.name}} ({{gettext("optional")}})</label>
              <select class="form-control" id="attribute-{{attribute.id}}" name="attribute-{{attribute.id}}">
                <option value="">---</option>
                {% for choice in attribute.choices %}
                <option value="{{choice.id}}" {% if product and product.get_attr_choice_id(attribute.id) == choice.id %}selected=""{% endif %}>{{choice.name}}</option>
                {% endfor %}
              </select>
              {% endfor %}
            </div>
            {% endif %}

            <div class="form-group col-md-12">
              <button class="btn btn-success" type="submit">{{gettext("Save")}}</button>
            </div>
          </div>
		    </form>
		  </div>
		</div>
	</div>
</div>
{% endblock %}

{% block js_block %}
<script>
$(function(){
  tinymce.init({
    selector: '#description',
    height: 300,
    plugins: [
          "advlist autolink lists link image charmap print preview anchor",
          "searchreplace visualblocks code fullscreen",
          "insertdatetime media table contextmenu paste imagetools wordcount"
      ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    
    images_upload_url: "/panel/blog/upload/images/",
  });

  $('#category').select2();
});
</script>
{% endblock %}