{% if list is empty %}
  {{ 'You are not authorized to do this' | trans }}
{% else %}
  <div id="ListShare">
    <div>
      <h2 style="font-size:14px; margin-bottom:10px;"><b>{{ 'About Roles :' | trans }}</b></h2>
      <p>
        - {{ 'Admin can edit shares, modify content' | trans }}
      </p>
      <p>
        - {{ 'Editor can modify content' | trans }}
      </p>
      <p>
        - {{ 'Access user have readonly access' | trans }}
      </p>
    </div>
    <div style="margin-top:10px;">
      <form name="list_share_user">
        <label for="use">{{ 'Find a user' | trans }} : </label>
        <input type="text" class="search" name="user" value="" style="width:180px" />
      </form>
    </div>
    <div>
      <form name="owners">
      {% for owner in list.getOwners() %}
        <table class="owner">
          <tr>
            <td>
              <img src="/assets/common/images/icons/user.png"/>
            </td>
            <td style="width:150px;padding:5px;">
              {{ owner.getUser().getDisplayName() }}
              <input type="hidden" name="usr_id" value="{{ owner.getUser().getId() }}" />
            </td>
            <td style="padding-right:10px;min-width:100px;">
              {% if app.getAuthenticatedUser().getId() == owner.getUser().getId() %}
                {% if owner.getRole() == constant('Alchemy\\Phrasea\\Model\\Entities\\UsrListOwner::ROLE_ADMIN') %}
                  {{ 'You are Admin' | trans }}
                {% endif %}
              {% else %}
              <label>{{ 'Role' | trans }}</label>
              <select name="role">
                <option {% if owner.getRole() == constant('Alchemy\\Phrasea\\Model\\Entities\\UsrListOwner::ROLE_USER') %}selected {% endif %} value="{{ constant('Alchemy\\Phrasea\\Model\\Entities\\UsrListOwner::ROLE_USER') }}">
                  {{ 'Access' | trans }}
                </option>
                <option {% if owner.getRole() == constant('Alchemy\\Phrasea\\Model\\Entities\\UsrListOwner::ROLE_EDITOR') %}selected {% endif %} value="{{ constant('Alchemy\\Phrasea\\Model\\Entities\\UsrListOwner::ROLE_EDITOR') }}">
                  {{ 'Editor' | trans }}
                </option>
                <option {% if owner.getRole() == constant('Alchemy\\Phrasea\\Model\\Entities\\UsrListOwner::ROLE_ADMIN') %}selected {% endif %} value="{{ constant('Alchemy\\Phrasea\\Model\\Entities\\UsrListOwner::ROLE_ADMIN') }}">
                  {{ 'Admin' | trans }}
                </option>
              </select>
              {% endif %}
            </td>
            <td style="width:15px">
               {% if app.getAuthenticatedUser().getId() == owner.getUser().getId() %}
                  <a href="#" class="deleter">
                    <img src="/assets/prod/images/Push/close_badge.png" title="{{ 'Remove' | trans }}"/>
                  </a>
                {% endif %}
            </td>
          </tr>
        </table>
      {% endfor %}
      </form>
    </div>
  </div>

  {% include "prod/templates/push.html.twig" %}

  <script type="text/javascript">
    $(document).ready(function(){
      var $container = $('#ListShare'),
      $completer_form = $('form[name="list_share_user"]', $container),
      $owners_form = $('form[name="owners"]', $container),
      $autocompleter = $('input[name="user"]', $completer_form),
      $dialog = p4.Dialog.get(2);

      $completer_form.bind('submit', function(){
        return false;
      });

      $('select[name="role"]', $owners_form).bind('change', function(){
        var usr_id = $(this).closest('.owner').find('input[name="usr_id"]').val(),
        role = $(this).val();

        shareWith(usr_id, role);

        return false;
      });

      $('.deleter', $container).bind('click', function(){
        var owner = $(this).closest('.owner');
        var usr_id = owner.find('input[name="usr_id"]').val();

        unShareWith(usr_id, function(data){
          owner.remove();
        });

        return false;
      });


      function shareWith(usr_id, role)
      {
        var role = typeof role === 'undefined' ? 1 : role;

        $.ajax({
          type: 'POST',
          url: '/prod/lists/list/{{ list.getId() }}/share/' + usr_id + '/',
          dataType: 'json',
          data : {role : role},
          beforeSend:function(){
          },
          success: function(data){
            if(data.success)
            {
              humane.info(data.message);
            }
            else
            {
              humane.error(data.message);
            }
            $dialog.refresh();

            return;
          },
          error: function(){
            return;
          },
          timeout: function(){
            return;
          }
        });
      }

      function unShareWith(usr_id, callback)
      {
        $.ajax({
          type: 'POST',
          url: '/prod/lists/list/{{ list.getId() }}/unshare/' + usr_id + '/',
          dataType: 'json',
          data : {},
          beforeSend:function(){
          },
          success: function(data){
            if(data.success)
            {
              humane.info(data.message);
              callback(data);
            }
            else
            {
              humane.error(data.message);
            }
            $dialog.refresh();

            return;
          },
          error: function(){
            return;
          },
          timeout: function(){
            return;
          }
        });
      }

      $autocompleter.autocomplete({
            minLength: 2,
            source: function( request, response ) {
              $.ajax({
                url: '/prod/push/search-user/',
                dataType: "json",
                data: {
                  query: request.term
                },
                success: function( data ) {
                  response( data );
                }
              });
            },
            select: function( event, ui ) {
              if(ui.item.type === 'USER')
              {
                shareWith(ui.item.usr_id);
              }

              return false;
            }
          })
          .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                if(item.type === 'USER') {
                    html = _.template($("#list_user_tpl").html(), {
                        item: item
                    });

                    return  $(html).data( "ui-autocomplete-item", item ).appendTo(ul);
                }
          };
    });
  </script>
{% endif %}