<div class="tvu-modal-step">
	<div class="tvd-modal-content">
		<h3 class="tvd-modal-title"><?php echo __( "Conversion Events Settings", 'thrive-ult' ) ?></h3>
		<p><?php echo __( "Step 1: Set your Trigger", 'thrive-ult' ) ?></p>

		<div id="tvu-conversion-options" class="tvd-row tvd-collapse">
			<div class="tvd-col tvd-m6">
				<div class="tvd-input-field tvu-no-margin-select">
					<select name="" id="tvu-select-campaign-trigger" class="tvu-campaign-trigger" data-field="trigger">
						<option disabled selected value="0"><?php echo __( 'Choose Trigger', 'thrive-ult' ) ?></option>
						<?php foreach ( TU_Campaign_Event::get_triggers() as $key => $details ) : ?>
							<option data-icon="<?php echo $key ?>" <#= model.get('trigger_options').trigger && model.get('trigger_options').trigger === '<?php echo $key ?>' ? 'selected' : '' #> value="<?php echo $key ?>" class="tvu-<?php echo $key ?>"><?php echo $details['title'] ?></option>
						<?php endforeach; ?>
					</select>
					<label for="tvu-select-campaign-trigger"><?php echo __( 'Trigger', 'thrive-ult' ) ?></label>
				</div>
			</div>
		</div>
		<div class="tvd-v-spacer"></div>
		<div id="tvu-conversion-triggers"></div>
	</div>
	<div class="tvd-modal-footer control-grid">
		<a href="javascript:void(0)"
		   class="tvd-btn-flat tvd-btn-flat-secondary tvd-btn-flat-dark tvd-waves-effect tvd-modal-close">
			<?php echo __( "Cancel", 'thrive-ult' ) ?>
		</a>
		<a href="javascript:void(0)"
		   class="tvd-btn tvd-btn-green tvd-waves-light tvd-right tvu-continue-events">
			<?php echo __( "Continue", 'thrive-ult' ) ?>
		</a>
	</div>
</div>

<div class="tvu-modal-step">
	<div class="tvd-modal-content">
		<h3 class="tvd-modal-title"><?php echo __( 'Conversion Events Settings', 'thrive-ult' ) ?></h3>
		<div class="tvd-v-spacer vs-2"></div>
		<div id="tvu-trigger-description" class="tvu-trigger-description tvd-row tvd-collapse"></div>
		<div class="tvd-v-spacer"></div>
		<p class="tvd-no-margin"><?php echo __( "Step 2: Set the action for the trigger, to be performed", 'thrive-ult' ) ?></p>
		<div class="tvd-v-spacer"></div>
		<div id="tvu-conversion-options" class="tvd-row tvd-collapse">
			<div class="tvd-col tvd-m6">
				<div class="tvd-input-field tvu-no-margin-select">
					<select name="" id="tvu-select-campaign-event" class="tvu-campaign-event" data-field="action_event">
						<option disabled selected value="0"><?php echo __( 'Choose action', 'thrive-ult' ) ?></option>
						<?php foreach ( TU_Campaign_Event::get_types() as $key => $details ) : ?>
							<option <#= model.get('trigger_options').event && model.get('trigger_options').event === '<?php echo $key ?>' ? 'selected' : '' #> value="<?php echo $key ?>" class="tvu-<?php echo $key ?>"><?php echo $details['title'] ?></option>
						<?php endforeach; ?>
					</select>
					<label for="tvu-select-campaign-event"><?php echo __( 'Choose action', 'thrive-ult' ) ?></label>
				</div>
			</div>
		</div>
		<div id="tvu-conversion-events"></div>
	</div>
	<div class="tvd-modal-footer control-grid">
		<div>
			<a href="javascript:void(0)"
			   class="tvd-btn-flat tvd-btn-flat-secondary tvd-btn-flat-dark tvd-waves-effect tvu-modal-prev-step">
				<?php echo __( "Back", 'thrive-ult' ) ?>
			</a>
		</div>
		<div>
			<a href="javascript:void(0)"
			   class="tvd-btn tvd-btn-green tvd-waves-light tvd-right tvu-save-new-conversion-event tvd-modal-submit">
				<?php echo __( "Save", 'thrive-ult' ) ?>
			</a>
		</div>
	</div>
</div>

<div class="tvu-modal-step">
	<div class="tvd-modal-content">
		<h3 class="tvd-modal-title"><?php echo __( 'Add new Evergreen Campaign', 'thrive-ult' ) ?></h3>

		<p><?php echo __( 'Please fill in the fields for the new campaign', 'thrive-ult' ) ?></p>
		<div class="tvd-input-field">
			<input id="tvu-new-campaign-name" type="text" name="new-campaign-name" data-field="post_title" data-bind="post_title">
			<label for="tvu-new-campaign-name"><?php echo __( "Campaign name", 'thrive-ult' ) ?></label>
		</div>
		<p><?php echo __( 'Tell us how long you would like the evergreen campaign to last for, for each user', 'thrive-ult' ); ?></p>
		<div class="control-grid">
			<div class="tvd-col tvd-m11">
				<div class="tvd-input-field">
					<input id="tvu-new-campaign-days" type="text" value="" data-field="duration">
					<label for="tvu-new-campaign-days"><?php echo __( "Duration", 'thrive-ult' ) ?></label>
				</div>
			</div>
			<div class="tvd-col tvd-m1">
				<p>days</p>
			</div>
		</div>
		<div class="control-grid">
			<div class="w-40">
				<p class="tvd-no-margin"><?php echo __( 'Repeat this campaign?', 'thrive-ult' ) ?></p>
			</div>
			<div class="w-30">
				<div class="tvd-switch">
					<label>
						<?php echo __( 'NO', 'thrive-ult' ) ?>
						<input class="tvu-new-campaign-repeat-switch" type="checkbox">
						<span id="tvu-new-campaign-repeat-campaign-switch" class="tvd-lever"></span>
						<?php echo __( 'YES', 'thrive-ult' ) ?>
					</label>
				</div>
			</div>
		</div>
		<div class="tvu-gray-box tvu-repeat-wrapper tvd-margin-bottom" style="display:none;">
			<p class="tvd-inline-block tvd-vertical-align tvd-no-margin">
				<?php echo __( "Show this campaign again after", 'thrive-ult' ) ?>
			</p>
			<div class="tvd-input-field tvd-inline-block tvd-input-field-small">
				<input id="tvu-new-campaign-expire" class="tvd-no-margin" maxlength="5" type="text" value="" data-field="end">
			</div>
			<p class="tvd-inline-block tvd-vertical-align tvd-no-margin">
				<?php echo __( 'days.', 'thrive-ult' ) ?>
			</p>
		</div>
	</div>
	<div class="tvd-modal-footer control-grid">
		<div>
			<a href="javascript:void(0)"
			   class="tvd-btn-flat tvd-btn-flat-secondary tvd-btn-flat-dark tvd-waves-effect tvu-modal-prev-step">
				<?php echo __( "Back", 'thrive-ult' ) ?>
			</a>
		</div>
		<div>
			<a href="javascript:void(0)"
			   class="tvd-btn tvd-btn-green tvd-waves-light tvd-right tvu-save-new-evergreen-campaign tvd-modal-submit">
				<?php echo __( "Add Campaign", 'thrive-ult' ) ?>
			</a>
		</div>
	</div>
</div>
