<div class="modal-sidebar">
	<div class="ttd-modal-sidebar-icon" data-icon="singular">
		<?php Thrive_Views::svg_icon( 'add-skin' ); ?>
		<p><?php echo __( 'Themes define the general look of your website.', THEME_DOMAIN ); ?></p>
	</div>
	<div class="ttd-down-skin-container">
		<div class="ttd-down-skin-img"></div>
		<div class="ttd-down-skin-name"></div>
	</div>
</div>

<div class="modal-options">
    <div class="first-step step">
        <h3 class="modal-title">
            <?php echo __( 'Create a New Theme', THEME_DOMAIN ); ?>
        </h3>
        <p>
            <span><?php echo __( 'Step 1', THEME_DOMAIN ); ?></span> -
            <?php echo __( 'What type of theme do you want to add ?', THEME_DOMAIN ); ?>
        </p>
        <ul>
            <li class="click" data-fn="step" data-step="cloud-items">
                <?php Thrive_Views::svg_icon( 'modal-icon-cloud' ); ?>
                <?php echo __( 'Load from the Thrive Cloud', THEME_DOMAIN ); ?>
            </li>

            <li class="click" data-fn="import" data-step="import">
                <?php Thrive_Views::svg_icon( 'modal-icon-import' ); ?>
                <?php echo __( 'Import From File', THEME_DOMAIN ); ?>
            </li>
        </ul>
    </div>
    <div class="blank-step step">
        <h3>
            <?php echo __( 'Your Theme Name', THEME_DOMAIN ); ?>
        </h3>

        <p>
            <span><?php echo __( 'Step 2', THEME_DOMAIN ); ?></span> -
            <?php echo __( 'Choose a name for your new theme', THEME_DOMAIN ); ?>
        </p>

        <div class="modal-user-actions">
            <label class="default-text" for="skin-name"><?php echo __( 'New Theme Name', THEME_DOMAIN ); ?></label>
            <input type="text" id="skin-name" placeholder="<?php echo __( 'My New Theme', THEME_DOMAIN ); ?>" class="keyup" data-fn="keyup">
            <div class="ttd-error-message" style="display: none;">
                <?php echo __( 'Please specify the name of your new theme.', THEME_DOMAIN ) ?>
            </div>
        </div>

        <div class="modal-buttons">
            <button class="click link-button" data-fn="step" data-step="first"><?php echo __( 'Back', THEME_DOMAIN ); ?></button>
            <button class="click normal-button" data-fn="skin_save"><?php echo __( 'Finish', THEME_DOMAIN ); ?></button>
        </div>
    </div>
    <div class="import-step step">
        <h3>
            <?php echo __( 'Upload a Theme', THEME_DOMAIN ); ?>
        </h3>
        <p>
            <span><?php echo __( 'Step 2', THEME_DOMAIN ); ?></span> -
            <?php echo __( 'Choose the theme file you want to upload', THEME_DOMAIN ); ?>
        </p>
        <div class="modal-buttons">
            <button class="click link-button" data-fn="step" data-step="first"><?php echo __( 'Back', THEME_DOMAIN ); ?></button>
            <button class="click normal-button" data-fn="upload_file"><?php echo __( 'Upload File', THEME_DOMAIN ); ?></button>
        </div>
    </div>
    <div class="cloud-items-step step">
        <div class="cloud-items-container"></div>
        <div class="modal-buttons">
            <button class="click link-button" data-fn="step" data-step="first">&lsaquo; <?php echo __( 'Back', THEME_DOMAIN ); ?></button>
        </div>
    </div>
</div>
