<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<div class="transferito-information">

    <input type="hidden" id="welcomeScreenSecurity" value="<?php echo esc_html(wp_create_nonce('transferito_welcome_screen')); ?>">


    <div class="transferito-information__close-button transferito__modal--close"></div>

    <div class="transferito-information__container transferito-information__container--large">

        <div class="transferito-information__title transferito-text__h1 transferito-text--no-bold transferito-text--size-xl transferito-text__center">
            First time using Transferito?
        </div>
        <div class="transferito-information__title transferito-text__h3--regular transferito-text__center transferito-font__color--black-grey">
            Let's get you started with your first migration
        </div>

        <div class="transferito-information__sub-title transferito-information__sub-title--margins transferito-text__p1--bold transferito-text__center">
            Click on one of the boxes below to watch a quick video on how to get started
        </div>

        <div class="transferito-migration-method">

        <div class="transferito-migration-method__selection-boxes">
            <div id="pullLiveToLocal" data-associated-tutorial-video-id="qFK8oU5t-6M" class="transferito-migration-method__selection-method">
                <div class="transferito-migration-method__recommended transferito__hide-element">SELECTED</div>

                <div class="transferito-migration-method__container">
                    <div class="transferito-migration-method__image">
                        <div class="transferito-migration-method__icon transferito-migration-method__icon--pull"></div>
                    </div>
                    <div class="transferito-migration-method__description">
                        <div class="transferito-migration-method__title transferito-text__p1--bold">Pull</div>
                        <div class="transferito-text__small">Automatically backup and install this WordPress site into your local development environment</div>
                    </div>
                </div>

                <div class="transferito-migration-method__pill-holder">
                    <div class="transferito-migration-method__pill transferito-migration-method__pill--dark-purple">TRANSFERITO PLUGIN</div>
                    <div class="transferito-migration-method__pill transferito-migration-method__pill--light-purple">TRANSFERITO DESKTOP</div>
                </div>
            </div>

            <div id="deployLive" data-associated-tutorial-video-id="20IVrE_cJw4" class="transferito-migration-method__selection-method">
                <div class="transferito-migration-method__recommended transferito__hide-element">SELECTED</div>

                <div class="transferito-migration-method__container">
                    <div class="transferito-migration-method__image">
                        <div class="transferito-migration-method__icon transferito-migration-method__icon--deploy"></div>
                    </div>
                    <div class="transferito-migration-method__description">
                        <div class="transferito-migration-method__title transferito-text__p1--bold">Deploy</div>
                        <div class="transferito-text__small">Automatically backup and install this WordPress site into your local development environment</div>
                    </div>
                </div>

                <div class="transferito-migration-method__pill-holder">
                    <div class="transferito-migration-method__pill transferito-migration-method__pill--blue">TRANSFERITO PLUGIN</div>
                </div>
            </div>
        </div>

        <div id="welcomeScreenVideo" class="transferito-information__video--v2"></div>

        <div class="transferito-migration-method__action-buttons">
            <div class="transferito-header__action-button">
                <a href="https://knowledge.transferito.com/getting-started/migration-quickstart-introduction/" class="transferito-button transferito-button__primary--blue transferito-button--small transferito-log-event" data-event-name="viewWelcomeQuickStartGuide" target="_blank">READ OUR DETAILED QUICK START GUIDE</a>
            </div>
            <button class="transferito-button transferito-button__primary transferito-button--small transferito__modal--close">I'M READY TO START MY MIGRATION</button>
        </div>

        <div class="transferito-information__content--with-divider transferito-information__content--top-margin">
            <label class="transferito-input__checkbox--label transferito-text__small--semi-bold transferito-font__color--black-grey">
                <input type="checkbox"
                       class="transferito-input__checkbox transferito-form-element"
                       id="hideWelcomeScreenPopup">
                Please don't show me this again. I know what I'm doing
            </label>
        </div>

    </div>
</div>
