{% if type is sameas('fixed') %}
  <h1>
    [{{ 'FIXED'|trans }}] {{app.request.attributes.get('id')}}({{app.request.attributes.get('extension')}})
  </h1>
{% endif %}

{% if type is sameas('mobility') %}
  <h1>
    [{{ 'MOBILITY'|trans }}] {{app.request.attributes.get('extension')}}
  </h1>
{% endif %}

{% if type is sameas('template') %}
  <h1>
    [{{ 'TEMPLATE'|trans }}] {{ templateName }}
  </h1>
{% endif %}

{% set startIndex = 0 %}
<form class="fpbx-submit" method="post" action="">
  <div class="websoftkey-definition" data-child-number="{{ data.count }}">
    {% for position in data %}
      <div data-position="{{ position.wsfkPosition.label }}">
        {% if position.wsfkposition.label is sameas ('top') %}
          {% include('@TelnowedgeWebsoftkey/top.html.twig') %}
        {% endif %}

        {% if position.wsfkposition.label is sameas ('screen') %}
          {% include('@TelnowedgeWebsoftkey/screen.html.twig') %}
        {% endif %}

        {% if position.wsfkposition.label is sameas ('bottom') %}
          {% include('@TelnowedgeWebsoftkey/bottom.html.twig') %}
        {% endif %}

        {% if position.wsfkposition.label is sameas ('expansion') %}
          {% include('@TelnowedgeWebsoftkey/expansion.html.twig') %}
        {% endif %}
      </div>

      {% set startIndex = startIndex + position.wsfkRender.wsfkConstant.totalKeys %}
    {% endfor %}
  </div>
</form>

<div class="fpbx-container container-fluid">
  <div class="row">
    <div class="display no-border">
      <div class="section-title" data-for="clone">
        <h3>{{ 'Clone from'|trans }}:</h3>
      </div>
      <div class="section no-border" data-id="clone">
        <div class="row">
          <div class="col-md-4">
            <select id="clone" class="form form-control user-choice-select">
              <option>-</option>
              {% for key, categories in clones %}
                {% for item in categories %}
                  {% if key is sameas('fixed') %}
                    <option data-type="{{key}}" data-id="{{item.id}}">[{{'Fixed'|trans}}] {{ 'User'|trans }}: {{ item.user.extension }}({{ item.user.name }}) | {{ 'Device'|trans }}: {{ item.id }} | {{ 'Model'|trans }}: {{ item.phoneProvision.equipmentType.label }}</option>
                  {% endif %}
                  {% if key is sameas('mobility') %}
                    <option data-type="{{key}}" data-id="{{item.id}}">[{{ 'Mobility'|trans }}] {{ 'User'|trans }}: {{ item.userProvision.id }}({{ item.userProvision.user.name }}) | {{ 'Model'|trans }}: {{ item.equipmentType.label }}</option>
                  {% endif %}
                  {% if key is sameas('template') %}
                    <option data-type="{{key}}" data-id="{{item.id}}">[{{ 'Template'|trans }}] {{ item.name }} | {{ 'Model'|trans }}: {{ item.equipmentType.original.label }}</option>
                  {% endif %}
                {% endfor %}
              {% endfor %}
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% if htmlOnly == 0 %}
  {% include('@TelnowedgeWebsoftkey/js/swapable.js.twig') %}

  <script type="text/javascript">
   $(document).ready(() => {
     $('.user-choice-select').select2({
       tags: false,
       multiple: false,
     });

     $('#clone').on('change', (e) => {
       displayOverlay(true);
       type = $(e.currentTarget).find(':selected').attr('data-type');
       id = $(e.currentTarget).find(':selected').attr('data-id');

       const url = new URL(window.location);
       const query = new URLSearchParams(url.search);

       query.set('clone', true);
       query.set('ctype', type);
       query.set('cid', id);

       url.search = query.toString();

       window.location.replace(url.toString());
     });

     const swapable = new Swapable();
     swapable.init();

     $('a[data-next-page]')
       .on('click', (e) => {
         e.preventDefault();

         const page = $(e.currentTarget).closest('[data-page]').attr('data-page');
         $(`.websoftkey-definition ul.nav li:eq(${page})`).children('a').click();
       });
   });
  </script>
{% endif %}