{**
 * Copyright 2024-2025 Simply.IN Sp. z o.o.
 *
 * NOTICE OF LICENSE
 *
 * Licensed under the EUPL-1.2 or later.
 * You may not use this work except in compliance with the Licence.
 *
 * Copy of the Licence is available at:
 * https://joinup.ec.europa.eu/software/page/eupl
 * It is bundled with this package in the file LICENSE.txt
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the Licence is distributed on an as is basis,
 * without warranties or conditions of any kind, either express or implied.
 * Check the Licence for the specific language governing permissions
 * and limitations under the License.
 *
 * @author    Simply.IN Sp. z o.o.
 * @copyright 2024-2025 Simply.IN Sp. z o.o.
 * @license   https://joinup.ec.europa.eu/software/page/eupl
 *}
<div id="simplyin-phone-checkbox">
  <div class="simplyin-checkbox-row">
    <label class="simplyin-checkbox">
      <input type="checkbox" id="simply-save-checkbox"{if $checked} checked{/if} name="simply-save-checkbox" value="{$phone|escape:'htmlall':'UTF-8'}" class="ps-shown-by-js"/>
      <span class="simplyin-checkbox-text">
        <strong>{l s='Remember my Simply.IN details.' mod='simplyin'}</strong>
        <span class="simplyin-badge-new">{l s='New' mod='simplyin'}</span>
      </span>
    </label>
    <div class="simplyin-logo">
      <img width="24" height="24" src="{$module_path|escape:'html':'UTF-8'}/views/img/logo_smalln.svg" alt="Simply.IN" />
    </div>
  </div>
  <ul class="simplyin-benefits-list">
    <li>{l s='All your purchases and returns from multiple stores in one place' mod='simplyin'}</li>
    <li>{l s='Fast checkout with saved details without passwords' mod='simplyin'}</li>
  </ul>
  
  <div class="simplyin-phone-input"{if !$checked} style="display: none;"{/if}>



    <div class="phone-input-container">
      <div class="phone-country-select">
        <select id="simplyin-phone-country" name="simplyin-phone-country" aria-label="Select country">
            {foreach from=$countries item='country_item'}
              <option{if $country_item.code == $selected_country_code|default:'PL'} selected{/if} value="{$country_item.code|escape:'html':'UTF-8'}" data-flag="{$country_item.code|escape:'html':'UTF-8'}" data-prefix="{$country_item.dial_code|escape:'html':'UTF-8'}">
                {$country_item.name|escape:'html':'UTF-8'}
              </option>
            {/foreach}
        </select>
        <div class="simplyin-flag-display">
          <img src="{$module_path|escape:'html':'UTF-8'}views/img/flags/{$selected_country_code|default:'PL'|escape:'htmlall':'UTF-8'}.svg" alt="" width="24" height="16" />
        </div>
        <span class="prefix">{$selected_prefix|escape:'htmlall':'UTF-8'}</span>
      </div>

      <div class="phone-input">
        <input type="tel" id="simplyin-phone-input" name="simplyin-phone" placeholder="Numer telefonu" autocomplete="off" value="{$phone|escape:'htmlall':'UTF-8'}" />
      </div>
    </div>
    <div class="phone-input-warning">
      {l s='The phone number is invalid.' mod='simplyin'}
    </div>


    <div class="simplyin-description">
      <p>
        {l s='Next time in Simply.IN stores, you’ll confirm your details using your phone (SMS/app)' mod='simplyin'}
      </p>
    </div>
    <div class="simplyin-terms">
      {l s='By finalizing the purchase, you accept the' mod='simplyin'}
      <a href="{$privacy_link|escape:'htmlall':'UTF-8'}" target="_blank">{l s='Privacy Policy' mod='simplyin'}</a>
      {l s='and the' mod='simplyin'}
      <a href="{$terms_link|escape:'htmlall':'UTF-8'}" target="_blank">{l s='Terms and Conditions' mod='simplyin'}</a>
      Simply.IN
      <div class="simplyin-terms-additional-text">  
        <img class="simplyin-terms-additional-text__icon" width="10" height="10" src="{$module_path|escape:'html':'UTF-8'}/views/img/security-icon.svg" alt="Bank security" />PCI – Bank level security
      </div>
    </div>
  </div>
  

</div>