{*
  RMBG PRO - Product page hook template
*}

<div class="panel rmbgpro-panel">
  <h3>
    <i class="icon-picture"></i>
    RMBG PRO
  </h3>

  {if !$rmbgpro_enabled}
    <div class="alert alert-warning">
      {l s='RMBG PRO is disabled because the API key is missing.' mod='rmbgpro'}
      <a href="{$rmbgpro_configure_url|escape:'htmlall':'UTF-8'}" class="btn btn-default btn-sm" style="margin-left:10px;">
        {l s='Configure' mod='rmbgpro'}
      </a>
    </div>
  {/if}

  {if empty($rmbgpro_images)}
    <div class="alert alert-info">
      {l s='No product images found.' mod='rmbgpro'}
    </div>
  {else}
    <div class="form-group">
      <label class="control-label" for="rmbgpro-image-select">
        {l s='Select image(s)' mod='rmbgpro'}
      </label>
      <select id="rmbgpro-image-select" class="form-control" multiple="multiple" size="6">
        {foreach from=$rmbgpro_images item=img}
          <option value="{$img.id_image|intval}">
            #{ $img.id_image|intval }
          </option>
        {/foreach}
      </select>
      <p class="help-block">
        {l s='Hold Ctrl (Windows) / Cmd (Mac) to select multiple images.' mod='rmbgpro'}
      </p>
    </div>

    <div class="rmbgpro-actions">
      <button type="button" class="btn btn-primary" id="rmbgpro-remove-bg" {if !$rmbgpro_enabled}disabled="disabled"{/if}>
        {l s='Remove Background' mod='rmbgpro'}
      </button>

      <span class="rmbgpro-spinner" id="rmbgpro-spinner" style="display:none;"></span>
    </div>

    <div class="rmbgpro-messages" id="rmbgpro-messages" style="margin-top:10px;"></div>
  {/if}
</div>
