{******************************************* 

RSThemes - Graphics - Product Addons
1. Widget Top
    1.1. Top Title
    1.2. Top Actions
2. Widget Content
    2.1. Product Addons Graphic
        2.1.1. Condensed Graphic

********************************************}
{assign var="iconsPath" value="./../../../../../../../templates/{$themeName}/assets/svg-icon"}
{assign var="ilustrationPath" value="./../../../../../../../templates/{$themeName}/assets/svg-illustrations"}
{assign var="imagesPath" value="{$whmcsURL}/templates/{$themeName}/assets/img"}

<section>
    {foreach from=$productAddons item=addon}
        <div class="widget panel of-visible m-b-0x" data-graphics-manager-search-target>
            {* 1. Widget Top *}
            <div class="widget__top top top--collapsible">
                {$graphicCondensed = false}
                {$graphicCondensedType = false}
                {$iconShow = false}
                {$iconShowType = false}

                {$addonGraphic = (isset($graphics['addon'][$addon.id])) ? $graphics['addon'][$addon.id]->getJson() : false}
                {if $addonGraphic}
                    {if isset($addonGraphic->condensed->graphic) && $addonGraphic->condensed->graphic}
                        {$graphicCondensed = $addonGraphic->condensed->graphic}
                        {$iconShow = $graphicCondensed}
                    {/if}
                    {if isset($addonGraphic->condensed->type) && $addonGraphic->condensed->type}
                        {$graphicCondensedType = $addonGraphic->condensed->type}
                        {$iconShowType = $graphicCondensedType}
                    {/if}
                {/if}

                {* 1.1. Top Title *}
                <div class="top__title collapsed" data-toggle="lu-collapse" data-target="#addon-content-{$addon.id}" data-graphics-manager-search-value="{$addon.name}">
                    <span class="m-r-2x i-c-4x {if !$iconShow}is-hidden{/if}" data-top-icon="addon-{$addon.id}">
                        {if $iconShowType == "icon"}
                            {if file_exists("{$whmcsDir|regex_replace:"/:\\d+/" : ""}/templates/{$themeName}/assets/svg-icon/{$iconShow}")}
                                {include file="{$iconsPath}/{$iconShow}"}
                            {/if}
                        {elseif $iconShowType == "illustration"}
                            {if file_exists("{$whmcsDir|regex_replace:"/:\\d+/" : ""}/templates/{$themeName}/assets/svg-illustrations/{$iconShow}")}
                                {include file="{$ilustrationPath}/{$iconShow}"}
                            {/if}
                        {elseif $iconShowType == "media"}
                            <img src="{$imagesPath}/page-manager/{$iconShow}" alt="{$iconShow}">
                        {elseif $iconShowType == "font-icon"}
                            <i class="{$iconShow}"></i>
                        {/if}
                    </span>
                    {$addon.name} {if $addon->hidden}<span class="label label--default label--outline m-l-2x">{$lang.graphics.general.hidden}</span>{/if}
                </div>

                {* 1.2. Top Actions *}
                <div class="top__toolbar">
                    <input type="hidden" name="graphics[addon][{$addon.id}][status]" value="1">
                    <div class="d-flex m-l-1x">
                        <span class="btn btn--icon btn--circle btn--xs i-c-3x collapsed" data-toggle="lu-collapse" data-target="#addon-content-{$addon.id}">
                            <i class="btn__icon ls ls-down"></i>
                        </span>
                    </div>
                    <input type="hidden" name="graphics[addon][{$addon.id}][type]" value="{$addon.type}">
                </div>
            </div>

            {* 2. Widget Content *}
            <div class="widget__body collapse" id="addon-content-{$addon.id}">
                <div class="widget__content">
                    {* 2.1. Addon Graphic *}
                    <div class="widget__section section flex-1 m-t-0x">
                        <div class="section__content ">
                            <div class="well m-t-0x">
                                {* 2.1.1. Condensed Graphic *}
                                {$sectionField = [
                                    "label" => $lang.graphics.addons.widget.addon_graphic,
                                    "tooltip" => $tooltips.graphics.addons.addon_graphic.content,
                                    "tooltip_url" => $tooltips.graphics.addons.addon_graphic.url,
                                    "name" => "addon-`$addon.id`-condensed",
                                    "graphic" => $graphicCondensed,
                                    "graphicType" => $graphicCondensedType,
                                    "type" => "condensed",
                                    "fieldName" => "graphics[addon][`$addon.id`]",
                                    "categoryType" => 'addon',
                                    "categoryName" => $addon.name
                                ]}
                                {include "./fields/graphic.tpl" sectionField=$sectionField}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {/foreach}
</section>
