{#**
 * 2007-2019 PrestaShop and Contributors
 *
 * 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 https://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2019 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *#}
{% extends '@PrestaShop/Admin/layout.html.twig' %}
{% trans_default_domain "Admin.Design.Feature" %}

{% block content %}
  <div class="row">
    {% if not canMove %}
      <p class="alert alert-warning">
        {{ 'If you want to order/move the following data, please select a shop from the shop list.' | trans({}, 'Admin.Design.Notification') }}
      </p>
    {% endif %}

    <div class="card col-9">
      <div class="card-body">
        <div class="card">
          <form class="mt-2" id="position-filters">
            <div class="container">
              <div class="row">
                <div class="row col-md-12 col-lg-6">
                  <label class="form-control-label col-4 text-left mt-1">{{ 'Show' | trans({}, 'Admin.Actions') }}</label>
                  <div class="col-8">
                    <select id="show-modules" class="filter">
                      <option value="all">{{ 'All modules' | trans }}&nbsp;</option>
                      {% for module in modules %}
                        <option value="{{ module.id }}"{% if selectedModule == module.id %} selected="selected"{% endif %}>{{ module.displayName }}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>

                <div class="row col-md-12 col-lg-6">
                  <label class="form-control-label col-5 text-center mt-1">{{ 'Search for a hook' | trans }}</label>
                  <div class="input-group col-7">
                    <div class="input-group-prepend">
                      <div class="input-group-text">
                        <i class="material-icons">search</i>
                      </div>
                    </div>
                    <input type="text" class="form-control" id="hook-search" name="hook-search" placeholder="">
                  </div>
                </div>
              </div>
            </div>

            <div class="container mt-3">
              <div class="row">
                <div class="col-lg-12">
                  <p class="checkbox">
                    <label class="form-control-label" for="hook-position">
                      <input type="checkbox" id="hook-position"/>
                      {{ 'Display non-positionable hooks' | trans }}
                    </label>
                  </p>
                </div>
              </div>
            </div>
          </form>
        </div>

        <form id="module-positions-form" method="post" action="{{ path('admin_modules_positions_unhook') }}" data-update-url="{{ path('api_improve_design_positions_update') }}">
          {% for hook in hooks %}
            <section class="hook-panel{% if not hook['position'] %} hook-position{% endif %}"{% if not hook['position'] %} style="display:none;"{% endif %}>
              <a name="{{ hook['name'] }}"></a>
              <header class="hook-panel-header">
                <span class="hook-name">{{ hook['name'] }}</span>
                <label class="badge badge-primary badge-pill float-right">
                  {% if hook['modules_count'] and canMove %}
                    <input type="checkbox" class="hook-checker" id="Ghook{{ hook['id_hook'] }}" data-hook-id="{{ hook['id_hook'] }}" />
                  {% endif %}

                  {{ hook['modules_count'] }}
                  {{ ((hook['modules_count'] > 1) ? 'Modules' : 'Module') | trans({}, 'Admin.Global') }}
                </label>

                {% if hook['description'] is defined %}
                  <div class="hook_description">{{ hook['description'] }}</div>
                {% endif %}
              </header>

              {% if hook['modules_count'] %}
                <section class="module-list">
                  <ul class="list-unstyled{% if hook['modules_count'] > 1 %} sortable{% endif %}">
                    {% for module in hook['modules'] if modules[module['id_module']] is defined %}
                      {% set moduleInstance = modules[module['id_module']] %}
                      <li id="{{ hook['id_hook'] ~ '_' ~ moduleInstance.id }}"
                        class="module-position-{{ moduleInstance.id }} module-item{% if canMove and hook['modules_count'] >= 2 %} draggable{% endif %}">

                        <div class="module-column-select">
                          <input type="checkbox" data-hook-id="{{ hook['id_hook'] }}" class="modules-position-checkbox hook{{ hook['id_hook'] }}" name="unhooks[]" value="{{ hook['id_hook'] ~ '_' ~ moduleInstance.id }}"/>
                        </div>

                        {% if not selectedModule and hook['modules_count'] > 1 %}
                          <div class="btn-toolbar text-center module-column-position{% if canMove and hook['modules_count'] >= 2 %} dragHandle{% endif %}" id="td_{{ hook['id_hook'] ~ '_' ~ moduleInstance.id }}">
                            <div class="btn-group">
                              <span class="index-position">{{ loop.index }}</span>
                            </div>

                            {% if canMove %}
                              <div class="btn-group-vertical module-buttons-update">
                                <button class="btn btn-outline-primary btn-sm"
                                  data-hook-id="{{ hook['id_hook'] }}"
                                  data-module-id="{{ moduleInstance.id }}"
                                  data-way="0">
                                  <i class="material-icons">expand_less</i>
                                </button>

                                <button class="btn btn-outline-primary btn-sm"
                                  data-hook-id="{{ hook['id_hook'] }}"
                                  data-module-id="{{ moduleInstance.id }}"
                                  data-way="1">
                                  <i class="material-icons">expand_more</i>
                                </button>
                              </div>
                            {% endif %}
                          </div>
                        {% endif %}

                        <div class="module-column-icon">
                          <img src="{{ asset('../modules/' ~ moduleInstance.name ~ '/logo.png') }}" alt="{{ moduleInstance.displayName| escape }}" />
                        </div>

                        <div class="module-column-infos">
                          <span class="module-name">
                            {{ moduleInstance.displayName| escape }}
                            {% if moduleInstance.version %}
                              <small class="text-muted">&nbsp;-&nbsp;{{ 'v%s' | format(moduleInstance.version) }}</small>
                            {% endif %}
                          </span>
                          <div class="module-description">{{ moduleInstance.description | escape }}</div>
                        </div>

                        <div class="module-column-actions">
                          <div class="btn-group">
                            {% set linkParams = {
                              'id_module': moduleInstance.id,
                              'id_hook': hook['id_hook'],
                              'editGraft': 1
                            } %}
                            {% if selectedModule %}
                              {% set linkParams = linkParams|merge({'show_modules': selectedModule}) %}
                            {% endif %}

                            <a class="btn btn-outline-primary btn-sm" href="{{ getAdminLink('AdminModulesPositions', true, linkParams) }}">
                              <i class="material-icons">edit</i>
                              {{ 'Edit' | trans({}, 'Admin.Actions') }}
                            </a>

                            <button class="btn btn-outline-primary btn-sm dropdown-toggle-split" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" data-reference="parent">
                              <i class="material-icons">expand_more</i>
                            </button>

                            <div class="dropdown-menu">
                              <a class="dropdown-item" href="{{ path('admin_modules_positions_unhook', {moduleId: moduleInstance.id, hookId: hook['id_hook']}) }}">
                                <i class="material-icons">indeterminate_check_box</i>
                                {{ 'Unhook' | trans({}, 'Admin.Design.Feature') }}
                              </a>
                            </div>
                          </div>
                        </div>
                      </li>
                    {% endfor %}
                  </ul>
                </section>
              {% endif %}
            </section>
          {% endfor %}

          <div id="unhook-button-position-bottom">
            <button type="submit" class="btn btn-default" name="unhookform">
              <i class="material-icons">indeterminate_check_box</i>
              {{ 'Unhook the selection' | trans({}, 'Admin.Design.Feature') }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <div class="col-3">
      <div class="card" id="modules-position-selection-panel">
        <h3 class="card-header"><i class="material-icons">checked</i> {{ 'Selection' | trans({}, 'Admin.Global') }}</h3>
        <div class="card-body">
          <p>
            <span id="modules-position-single-selection">{{ '1 module selected' | trans }}</span>
            <span id="modules-position-multiple-selection">
              <span id="modules-position-selection-count"></span> {{ 'modules selected' | trans({}, 'Admin.Design.Feature') }}
            </span>
          </p>
          <div class="text-center">
            <button class="btn btn-primary"><i class="icon-remove"></i> {{ 'Unhook the selection' | trans }}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  <script src="{{ asset('themes/new-theme/public/improve_design_positions.bundle.js') }}"></script>
{% endblock %}