{style}{literal}
    .ow_avatar_console .ow_avatar_label {
        bottom: 5px;
        right: 5px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    }
    #avatar_console_image {
        background-repeat: no-repeat;
        background-position: center center;
        position:relative;
        width: 100%;
    }
{/literal}{/style}

{if $owner || $moderation}
    {script}
        {literal}
        (function(){
            $("#avatar-console").hover(
              function(){
                $("#avatar-change").fadeIn("fast");
                $("#avatar-approve").fadeIn("fast");
              },
              function(){
                $("#avatar-change").fadeOut("fast");
                $("#avatar-approve").fadeOut("fast");
              }
          );            
       }());
       {/literal}
    {/script}
{/if}


<div class="ow_avatar_console ow_center" id="avatar-console">
    <div id="avatar_console_image" style="height: {$avatarSize}px; background-image: url({$avatar});">
        
        <div class="ow_avatar_pending_approval" style="{if !$hasAvatar || $isModerator || !$owner || !$isModerator && !empty($avatarDto) && $avatarDto->status == 'active' }display:none;{else}{/if}position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(0,0,0,0.6); color: #fff; padding: 8px;">{text key='base+avatar_pending_approval'}</div>

        {if $owner}
            <div class="ow_avatar_button ow_avatar_change" id="avatar-change" style="display: none">
                <a class="ow_lbutton" href="javascript://">{text key='base+avatar_change'}</a>
            </div>
        {/if}
        
        {if $moderation}
            <div class="ow_avatar_button ow_avatar_change" id="avatar-approve" style="display: none">
                <a class="ow_lbutton" href="javascript://">{text key='base+approve'}</a>
            </div>
        {/if}
        
        {if isset($role.label)}<span class="ow_avatar_label {if $isUserOnline}avatar_console_label{/if}"{if isset($role.custom)} style="background-color: {$role.custom}"{/if}>{$role.label}</span>{/if}
    </div>
    <div class="user_online_wrap">{if $isUserOnline}{online_now userId=$userId}{/if}</div>
</div>