{style}
{literal}

.avatar_select_list{
    text-align:left;
    padding:0 8px;
}

.avatar_select_list .ow_user_list_picture{
    height:45px;
}

.avatar_select_list .ow_user_list_item{
    cursor:pointer;
}

.avatar_select_list .ow_item_set3{
    width:32%;
}

{/literal}
{/style}

{script}
{literal}
$('.ow_user_list_item').toggle(function()
{
    var contactId = CONTACTIMPORTER_ContactList[this.id], contactUniq=contactId + '_check';
    $(this).addClass('ow_mild_green');
    $('#CONTACTIMPORTER_InviteForm').append('<input value="' + contactId + '" type="hidden" name="users[]" id="'+ contactUniq +'" />');
},
function()
{
    var contactId = CONTACTIMPORTER_ContactList[this.id], contactUniq=contactId + '_check';
    $('#' + contactUniq).remove();
    $(this).removeClass('ow_mild_green');
});

{/literal}
{/script}
<div class="ow_lp_avatars avatar_select_list ow_smallmargin">
    {if empty($users)}
    <div class="ow_nocontent">{text key='base+empty_user_avatar_list_select'}</div>
    {else}
    <div class="asl_users">
        {foreach from=$users item='user' name='user_list'}
        {if $smarty.foreach.user_list.first}
            <div class="clearfix {cycle name="rows" values="ow_alt2, ow_alt1"}">
        {/if}
        {decorator name="user_list_item"
                   avatar=$user.avatar
                   username=$user.name
                   displayName=$user.name
                   noUserLink=1
                   contId=$user.uniqId
                   set_class='ow_item_set3'}
        {if $smarty.foreach.user_list.iteration %3 == 0 && !$smarty.foreach.user_list.last}
            </div>
            <div class="clearfix {cycle name="rows" values="ow_alt1,ow_alt2"}">
        {/if}
        {if $smarty.foreach.user_list.last}
          </div>
        {/if}
        {/foreach}
    </div>

    {*<div class="ow_center" style="padding: 8px;">
    {if !empty($langs.countLabel)}<input type="hidden" class="count_label" value="{$langs.countLabel}" />{/if}
    <input type="hidden" class="button_label" value="{$langs.buttonLabel}" />
    {if !empty($langs.countLabel)}<div class="count_label">{$langs.startCountLabel}</div>{/if}
    <div class="submit_cont">{decorator name='button' label=$langs.startButtonLabel class='submit'}</div>
    </div>*}

    {/if}
</div>
<div class="ci-invite-form ow_superwide" style="margin: 0px auto;">
    <form id="CONTACTIMPORTER_InviteForm">
        <div class="ci-message ow_smallmargin">
            <textarea class="ci-message-input" name="message"></textarea>
        </div>
        <div style="text-align: center">
            {decorator name='button' label='Invite' type="submit"}
        </div>
    </form>
</div>
