{#**
 * 2007-2018 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/OSL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2018 PrestaShop SA
 * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *#}
<div role="tabpanel" class="form-contenttab tab-pane active" id="step1">
  <div class="row">
    <div class="col-md-12">
      <div class="container-fluid">
        <div class="row">

          {# LEFT #}
          <div class="col-md-9 left-column">

            <div id="js_form_step1_inputPackItems">
              {{ form_errors(formPackItems) }}
              {{ form_widget(formPackItems) }}
            </div>

            <div id="product-images-container" class="mb-4">
              <div id="product-images-dropzone" class="panel dropzone ui-sortable col-md-12"
                  url-upload="{{ path('admin_product_image_upload', {'idProduct': productId}) }}"
                  url-position="{{ path('admin_product_image_positions') }}"
                  data-max-size="{{ 'PS_LIMIT_UPLOAD_IMAGE_VALUE'|configuration }}"
              >
                <div id="product-images-dropzone-error" class="text-danger"></div>
                <div class="dz-default dz-message openfilemanager">
                    <i class="material-icons">add_a_photo</i><br/>
                    {{js_translatable['Drop images here']}}<br/>
                    <a>{{js_translatable['or select files']}}</a><br/>
                    <small>
                        {{js_translatable['files recommandations']}}<br/>
                        {{js_translatable['files recommandations2']}}
                    </small>
                </div>
                {% if images is defined %}
                    {% if editable %}
                        <div class="dz-preview disabled openfilemanager">
                            <div><span>+</span></div>
                        </div>
                    {% endif %}
                  {% for image in images %}
                    <div class="dz-preview dz-processing dz-image-preview dz-complete ui-sortable-handle"
                        data-id="{{ image.id }}"
                        url-delete="{{ path('admin_product_image_delete', {'idImage': image.id}) }}"
                        url-update="{{ path('admin_product_image_form', {'idImage': image.id}) }}"
                    >
                      <div class="dz-image bg" style="background-image: url('{{ image.base_image_url }}-home_default.{{ image.format }}');"></div>
                      <div class="dz-details">
                        <div class="dz-size"><span data-dz-size=""></span></div>
                        <div class="dz-filename"><span data-dz-name=""></span></div>
                      </div>
                      <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress="" style="width: 100%;"></span></div>
                      <div class="dz-error-message"><span data-dz-errormessage=""></span></div>
                      <div class="dz-success-mark"></div>
                      <div class="dz-error-mark"></div>
                      {% if image.cover %}
                        <div class="iscover">{{ 'Cover'|trans({}, 'Admin.Catalog.Feature') }}</div>
                      {% endif %}
                    </div>
                  {% endfor %}
                {% endif %}
              </div>
              <div id="product-images-form-container" class="col-md-4">
                <div id="product-images-form"></div>
              </div>
              <div class="dropzone-expander text-sm-center col-md-12">
                <span class="expand">{{ 'View all images'|trans({}, 'Admin.Catalog.Feature') }}</span>
                <span class="compress">{{ 'View less'|trans({}, 'Admin.Catalog.Feature') }}</span>
              </div>

            </div>

            <div class="summary-description-container">
              <ul class="nav nav-tabs bordered">
                <li id="tab_description_short" class="nav-item"><a href="#description_short" data-toggle="tab" class="nav-link description-tab active">{{ 'Summary'|trans({}, 'Admin.Catalog.Feature') }}</a></li>
                <li id="tab_description" class="nav-item"><a href="#description" data-toggle="tab" class="nav-link description-tab">{{ 'Description'|trans({}, 'Admin.Global') }}</a></li>
              </ul>

              <div class="tab-content bordered">
                <div class="tab-pane panel panel-default active" id="description_short">
                  {{ form_widget(formShortDescription) }}
                </div>
                <div class="tab-pane panel panel-default " id="description">
                  {{ form_widget(formDescription) }}
                </div>
              </div>
            </div>

            {{ renderhook('displayAdminProductsMainStepLeftColumnMiddle', { 'id_product': productId }) }}

            <div id="features" class="mb-3">
              <div id="features-content" class="content {{ formFeatures|length == 0 ? 'hide':'' }}">
                <h2>{{ 'Features'|trans({}, 'Admin.Catalog.Feature') }}</h2>
                {{ form_errors(formFeatures) }}
                <div
                  class="feature-collection nostyle"
                  data-prototype="{% filter escape %}
                    {{ include('@Product/ProductPage/Forms/form_feature.html.twig', { 'form': formFeatures.vars.prototype }) }}
                  {% endfilter %}"
                >
                  {% for feature in formFeatures %}
                    {{ include('@Product/ProductPage/Forms/form_feature.html.twig', { 'form': feature }) }}
                  {% endfor %}
                </div>
              </div>
              <div class="row">
                <div class="col-md-4">
                  <button type="button" class="btn btn-outline-primary sensitive add" id="add_feature_button"><i class="material-icons">add_circle</i> {{ 'Add a feature'|trans({}, 'Admin.Catalog.Feature') }}</button>
                </div>
              </div>
            </div>

            <div id="manufacturer" class="mb-3">
              {{ include('@Product/ProductPage/Forms/form_manufacturer.html.twig', { 'form': formManufacturer }) }}
            </div>

            <div id="related-product" class="mb-3">
              {{ include('@Product/ProductPage/Forms/form_related_products.html.twig', { 'form': formRelatedProducts }) }}
            </div>

            {{ renderhook('displayAdminProductsMainStepLeftColumnBottom', { 'id_product': productId }) }}

          </div>

          {# RIGHT #}
          <div class="col-md-3 right-column">

              <div class="row">
                <div class="col-md-12">

                  {% if is_combination_active %}
                    <div class="form-group mb-3" id="show_variations_selector">
                      <h2>
                        {{ "Combinations"|trans({}, 'Admin.Catalog.Feature') }}
                        <span class="help-box" data-toggle="popover"
                          data-content="{{ "Combinations are the different variations of a product, with attributes like its size, weight or color taking different values. Does your product require combinations?"|trans({}, 'Admin.Catalog.Help') }}" ></span>
                      </h2>
                      <div class="radio">
                        <label>
                          <input type="radio" name="show_variations" value="0" {% if not has_combinations %}checked="checked"{% endif %}>
                          {{ "Simple product"|trans({}, 'Admin.Catalog.Feature') }}
                        </label>
                      </div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="show_variations" value="1" {% if has_combinations %}checked="checked"{% endif %}>
                          {{ "Product with combinations"|trans({}, 'Admin.Catalog.Feature') }}
                        </label>
                        <div id="product_type_combinations_shortcut">
                          <span class="small font-secondary">
                            {# First tag [1][/1] is for a HTML link. Second tag [2] is an icon (no closing tag needed). #}
                            {{ "Advanced settings in [1][2]Combinations[/1]"|trans({}, 'Admin.Catalog.Help')|replace({'[1]': '<a href="#tab-step3" onclick="$(\'a[href=\\\'#step3\\\']\').tab(\'show\');" class="btn sensitive px-0">', '[/1]': '</a>', '[2]': '<i class="material-icons">open_in_new</i>'})|raw }}
                          </span>
                        </div>
                      </div>
                    </div>
                  {% endif %}

                  <div class="form-group mb-4">
                    <h2>
                      {{ "Reference"|trans({}, 'Admin.Catalog.Feature') }}
                      <span class="help-box" data-toggle="popover"
                        data-content="{{ "Your reference code for this product. Allowed special characters: .-_#\."|trans({}, 'Admin.Catalog.Help') }}" ></span>
                    </h2>
                    {{ form_errors(formReference) }}
                    <div class="row">
                      <div class="col-xl-12 col-lg-12" id="product_reference_field">
                          {{ form_widget(formReference) }}
                      </div>
                    </div>
                  </div>

                  {% if 'PS_STOCK_MANAGEMENT'|configuration %}
                    <div class="form-group mb-4" id="product_qty_0_shortcut_div">
                      <h2>
                        {{ "Quantity"|trans({}, 'Admin.Catalog.Feature') }}
                        <span class="help-box" data-toggle="popover"
                          data-content="{{ "How many products should be available for sale?"|trans({}, 'Admin.Catalog.Help') }}" ></span>
                      </h2>
                      {{ form_errors(formQuantityShortcut) }}
                      <div class="row">
                        <div class="col-xl-6 col-lg-12">
                          {{ form_widget(formQuantityShortcut) }}
                        </div>
                      </div>
                      <span class="small font-secondary">
                        {# First tag [1][/1] is for a HTML link. Second tag [2] is an icon (no closing tag needed). #}
                        {{ "Advanced settings in [1][2]Quantities[/1]"|trans({}, 'Admin.Catalog.Help')|replace({'[1]': '<a href="#tab-step3" onclick="$(\'a[href=\\\'#step3\\\']\').tab(\'show\');" class="btn sensitive px-0">', '[/1]': '</a>', '[2]': '<i class="material-icons">open_in_new</i>'})|raw }}
                      </span>
                    </div>
                  {% endif %}

                  <div class="form-group mb-4">
                    <h2>
                      {{ "Price"|trans({}, 'Admin.Global') }}
                      <span class="help-box" data-toggle="popover"
                        data-content="{{ "This is the retail price at which you intend to sell this product to your customers. The tax included price will change according to the tax rule you select."|trans({}, 'Admin.Catalog.Help') }}" ></span>
                    </h2>
                    <div class="row">
                      <div class="col-md-6">
                        <label class="form-control-label">{{ "Tax excluded"|trans({}, 'Admin.Catalog.Feature') }}</label>
                        {{ form_widget(formPriceShortcut) }}
                        {{ form_errors(formPriceShortcut) }}
                      </div>
                      <div class="col-md-6 col-offset-md-1">
                        <label class="form-control-label">{{ "Tax included"|trans({}, 'Admin.Catalog.Feature') }}</label>
                        {{ form_widget(formPriceShortcutTTC) }}
                        {{ form_errors(formPriceShortcutTTC) }}
                      </div>
                      <div class="col-md-12 mt-1">
                        <label class="form-control-label">{{ "Tax rule"|trans({}, 'Admin.Catalog.Feature') }}</label>
                        {{ render(
                            controller('PrestaShopBundle:Admin/Common:renderField', {
                              'formName': 'step2',
                              'formType': 'PrestaShopBundle\\Form\\Admin\\Product\\ProductPrice',
                              'fieldName': 'id_tax_rules_group',
                              'fieldData' : form.step2.id_tax_rules_group.vars.value
                              }
                            )
                          )
                        }}
                      </div>
                      <div class="col-md-12">
                        <span class="small font-secondary">
                          {# First tag [1][/1] is for a HTML link. Second tag [2] is an icon (no closing tag needed). #}
                          {{ "Advanced settings in [1][2]Pricing[/1]"|trans({}, 'Admin.Catalog.Help')|replace({'[1]': '<a href="#tab-step2" onclick="$(\'a[href=\\\'#step2\\\']\').tab(\'show\');" class="btn sensitive px-0">', '[/1]': '</a>', '[2]': '<i class="material-icons">open_in_new</i>'})|raw }}
                        </span>
                      </div>
                    </div>
                    <div class="row hide">
                      <div class="col-md-12">
                        <label>{{ "Tax rule"|trans({}, 'Admin.Catalog.Feature') }}</label>
                      </div>
                      <div class="clearfix"></div>
                      <div class="col-md-11" id="tax_rule_shortcut">
                      </div>
                      <a href="#" onclick="$(this).parent().hide()">&times;</a>
                    </div>
                  </div>

                  <div class="form-group mb-4" id="categories">
                    {{ include('@Product/ProductPage/Forms/form_categories.html.twig', { 'form': formCategories, 'productId': productId }) }}
                  </div>

                  {{ renderhook('displayAdminProductsMainStepRightColumnBottom', { 'id_product': productId }) }}

                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>