{if !isset($xSize)}
    {assign var=xSize value=100}
    {assign var=ySize value=100}
{/if}
{if !isset($points)}
    {assign var=points value=$badge->data.badge_score}
{/if}
{if !isset($count)}
    {assign var=count value=$userBadgeCounts[$badge->data.badge_id]}
{/if}
{if !isset($totalPoints)}
    {assign var=totalPoints value=$points * $count}
{/if}

{if $count gt 0 || $showForPreview eq true}
    <div class="badgePreviewFrame{$cssSuffix} badgePreviewContainer mdl-badge__preview-container {if $count gt 1}tallBadge{/if}">
        <div {if $idsOn}id="badgeFileArea"{/if} class="badgeImage mdl-badge__image">
            {if intval($badge->data.badge_image) ne 0}
                {include file="$templateSource/html/showImageCloudinary.html" alt="Badge image" showFile=$badge->joined.obj_badge_image loadType='c_fill' }
            {else if $badge->data.badge_image_type}
                <img src="{$badge->getImageUrl($xSize, $ySize)}" />
            {/if}
        </div>

        <div class="name mdl-badge__name" {if $idsOn}id="previewBadgeName"{/if}>
            {if $adminMode}
                {if $badge->data.badge_name ne ''}{$badge->data.badge_name}{else}{'Badge name'|gettext}{/if}
            {else}
                {if $badge->data.badge_name ne ''}{Translation::t($badge, 'badge_name')}{else}{'Badge name'|gettext}{/if}
            {/if}
        </div>
        <div class="description mdl-badge__description {if (int)$totalPoints eq 0}noScore{/if}" {if $idsOn}id="previewBadgeDescription"{/if}>
            {if $adminMode}
                {if $badge->data.badge_description ne ''}{$badge->data.badge_description}{else}{'Badge description'|gettext}{/if}
            {else}
                {if Translation::t($badge, 'badge_description') ne ''}{Translation::t($badge, 'badge_description')}{else}{'Badge description'|gettext}{/if}
            {/if}
        </div>
        {if $count gt 1}
            <div class="total-points">
                {if $points gt 1}
                    {"%s awarded (%s points each)"|gettext|sprintf:$count:$points}
                {else}
                    {"%s awarded (1 point each)"|gettext|sprintf:$count}
                {/if}
            </div>
        {/if}
        <div class="awarded mdl-badge__awarded">
            {if $count gt 1}
                {"First awarded "|gettext}
            {else}
                {"Awarded "|gettext}
            {/if}
             <span class="awardedValue">{$badge->joined['userbadge']->data['userbadge_date']|date_format}</span> 
        </div>

        <div class="badgeScoreContainer mdl-badge__score" {if $idsOn}id="previewBadgeScoreContainer"{/if} {if $totalPoints eq 0}style="display:none;"{/if}>
            <div class="scoreValue mdl-badge__score-value" {if $idsOn}id="previewBadgeScoreValue"{/if}>{$totalPoints}</div>
            <div class="scoreCaption mdl-badge__score-caption">
                <span {if $idsOn}id="scoreCaptionPlural"{/if} {if $totalPoints eq 1}style="display:none;"{/if}>{'Points'|gettext}</span>
                <span {if $idsOn}id="scoreCaptionSingular"{/if} {if $totalPoints ne 1}style="display:none;"{/if}>{'Point'|gettext}</span>
            </div>
        </div>

        <input type="hidden" name="badge_image" id="badgeFileLink" class="uploadFileButton" value="{$badge->data.badge_image}" />

        <div class="clear"><!--IE--></div>
    </div>
{/if}