<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Template files receive local context variables from their controller.
namespace SPAATG;
use SPAATG\Notices\NoticeController as Notice;
use SPAATG\ShortPixelLogger\ShortPixelLogger as Log;
use SPAATG\Helper\UiHelper as UiHelper;

if ( ! defined( 'ABSPATH' ) ) {
 exit; // Exit if accessed directly.
}

// Notices for fringe cases
if (! $view->key->is_verifiedkey && $view->key->hide_api_key && ! $view->key->is_constant_key)
{

	$error_message = __('wp-config.php is hiding the API key, but no API key was found. Remove the constant, or define the SPAATG_API_KEY constant as well', 'shortpixel-ai-alt-text-generator');
	Notice::addError($error_message);
}
elseif ($view->key->is_constant_key && ! $view->key->is_verifiedkey)
{
  $dkey = ($view->key->hide_api_key) ? '' : '(' . SPAATG_API_KEY.  ')';
	/* translators: %s: API key display value. */
		$error_message = sprintf(
			/* translators: %s: API key display value. */
			__( 'Constant API Key is not verified. Please check if this is a valid API key %s', 'shortpixel-ai-alt-text-generator' ),
			esc_html( $dkey )
		);
  Notice::addError($error_message);
}

$adminEmail = get_bloginfo('admin_email');


// When key is not editable, basically all fields should be off.
?>
<section id="tab-nokey" class="<?php echo esc_attr( ( $this->display_part == 'nokey' ) ? 'active setting-tab' : 'setting-tab' ); ?>" data-part="nokey" >

  <h1><?php esc_html_e( 'Welcome Onboard!', 'shortpixel-ai-alt-text-generator' ); ?></h1>
  <div class='onboarding-logo'>
        <?php echo wp_kses( UIHelper::getIcon( 'res/images/illustration/onboarding.svg' ), [ 'img' => [ 'src' => true, 'height' => true, 'width' => true, 'alt' => true ] ] ); ?>
  </div>

    <progressbar>

    </progressbar>

    <!--  <h2><a class='tab-link' href='javascript:void(0);' data-id="tab-settings">
      <?php esc_html_e('Join ShortPixel','shortpixel-ai-alt-text-generator');?></a>
    </h2> -->


		<div class='onboarding-join-wrapper'>

	 <!-- // @todo Remove Inline CSS on whole page-->


<settinglist class='new-customer now-active'>

	<h3><?php esc_html_e('New user?','shortpixel-ai-alt-text-generator');?></h3>
		<?php echo wp_kses( UiHelper::getIcon( 'res/images/icon/new-user.svg' ), [ 'img' => [ 'src' => true, 'height' => true, 'width' => true, 'alt' => true ] ] ); ?>
	<h2><?php esc_html_e('Create account','shortpixel-ai-alt-text-generator');?></h2>
	<p><?php esc_html_e('If you don\'t have an API Key, you can request one for free. Just press the "Request Key" button after checking that the e-mail is correct.','shortpixel-ai-alt-text-generator');?></p>

  <div id="shortpixel-form-request-key">

  <setting>
      <content>
      <name for="pluginemail"><?php esc_html_e('E-mail address:','shortpixel-ai-alt-text-generator');?></name>
	              <input name="pluginemail" type="text" id="pluginemail" value="<?php echo esc_attr( sanitize_email( $adminEmail ) );?>" class="regular-text" <?php disabled( $view->key->is_editable, false ); ?> />

              <span class="spinner" id="pluginemail_spinner" style="float:none;"></span>
              <info>
                <p class="settings-info spaatg-settings-error shortpixel-settings-error" style='display:none;' id='pluginemail-error'>
                    <b><?php esc_html_e('Please provide a valid e-mail address.', 'shortpixel-ai-alt-text-generator');?></b>
                </p>
                <p class="settings-info" id='pluginemail-info'>
                    <?php if($adminEmail) {
                        /* translators: 1, 3: HTML bold tags, 2: admin email address. */
	                        echo wp_kses(
	                            sprintf(
	                                /* translators: 1, 3: HTML bold tags, 2: admin email address. */
	                                __( '%1$s %2$s %3$s is the e-mail address in your WordPress Settings. You can use it, or change it to any valid e-mail address that you own.', 'shortpixel-ai-alt-text-generator' ),
	                                '<b>',
	                                esc_html( sanitize_email( $adminEmail ) ),
	                                '</b>'
	                            ),
	                            [ 'b' => [] ]
	                        );
                    } else {
                        esc_html_e('Please input your e-mail address and press the Request Key button.','shortpixel-ai-alt-text-generator');
                    }
                    ?>
                </p>
                <p>
                    <label for='tos'>
                      <span style="position:relative;">

                        <input name="tos" type="checkbox" id="tos">
                        <img class="tos-robo" alt="<?php esc_html_e('ShortPixel logo', 'shortpixel-ai-alt-text-generator'); ?>"
                             src="<?php echo esc_url(wpSPAATG()->plugin_url('res/img/slider.png' ));?>" style="position: absolute;left: -95px;bottom: -26px;display:none;">
                        <img class="tos-hand" alt="<?php esc_html_e('Hand pointing', 'shortpixel-ai-alt-text-generator'); ?>"
                             src="<?php echo esc_url(wpSPAATG()->plugin_url('res/img/point.png' ));?>" style="position: absolute;left: -39px;bottom: -9px;display:none;">

                    </span>
                    <?php /* translators: 1, 2: Terms of Service link tags, 3, 4: Privacy Policy link tags, 5, 6: GDPR link tags. */
	                    echo wp_kses(
	                        sprintf(
	                            /* translators: 1, 2: Terms of Service link tags, 3, 4: Privacy Policy link tags, 5, 6: GDPR link tags. */
	                            __( 'I have read and I agree to the %1$s Terms of Service %2$s and the %3$s Privacy Policy %4$s (%5$s GDPR compliant %6$s).', 'shortpixel-ai-alt-text-generator' ),
	                            '<a href="https://shortpixel.com/tos" target="_blank" rel="noopener noreferrer">',
	                            '</a>',
	                            '<a href="https://shortpixel.com/privacy" target="_blank" rel="noopener noreferrer">',
	                            '</a>',
	                            '<a href="https://shortpixel.com/privacy#gdpr" target="_blank" rel="noopener noreferrer">',
	                            '</a>'
	                        ),
	                        [ 'a' => [ 'href' => true, 'target' => true, 'rel' => true ] ]
	                    );
                    ?></label> </p>
              </info>
      </content>
  </setting>

  </div>

</settinglist>

<settinglist class='existing-customer'>
	<h3>
			<?php esc_html_e('Already have an account?','shortpixel-ai-alt-text-generator');?>
	</h3>

		<?php echo wp_kses( UiHelper::getIcon( 'res/images/icon/login.svg' ), [ 'img' => [ 'src' => true, 'height' => true, 'width' => true, 'alt' => true ] ] ); ?>
	<h2><?php esc_html_e('Login','shortpixel-ai-alt-text-generator');?></h2>

	<p>
	    <?php esc_html_e('Welcome back! If you already have an API Key please input it below and press Validate.','shortpixel-ai-alt-text-generator');?>
	</p>

  <setting>
      <content>
      <name>
          <?php esc_html_e('API Key:','shortpixel-ai-alt-text-generator');?>
      </name>
	        <input name="login_apiKey" type="text" id="new-key" value="<?php echo esc_attr( $view->key->apiKey );?>"
	           class="regular-text" <?php disabled( $view->key->is_editable, false ); ?>>
        <?php if (! empty($view->key->validation_error_message) && ! $view->key->is_verifiedkey) { ?>
        <p class="shortpixel-key-error">
          <?php echo wp_kses_post($view->key->validation_error_message); ?>
        </p>
        <?php } ?>

              <input type="hidden" name="validate" id="valid" value="validate"/>
              <span class="spinner" id="pluginemail_spinner" style="float:none;"></span>
      </content>

  </setting>

</settinglist>




</div> <!-- // Join Wrapper -->



  <div class='submit-errors'>

  </div>
<settinglist class='onboard-submit'>

  <button type="button" name="add-key"><?php esc_html_e('Continue', 'shortpixel-ai-alt-text-generator'); ?><span class='dots'>.</span></button>

</settinglist>



</section>
