<div class="tvd-v-spacer"></div>
<div class="tvd-row">
	<div class="tvd-col tvd-s8">
		<div class="tvu-edit-title-align">
			<span><?php echo __( 'Campaign name:', 'thrive-ult' ) ?></span>
			<div class="tvu-edit-title-container">
				<h3 class="tvu-campaign-title">
					<#= item.get('post_title') #>
				</h3>
				<span class="tvd-icon-pencil tvd-pointer tvu-edit-campaign-title tvd-inline-block"></span>
			</div>
		</div>
	</div>
	<div class="tvd-col tvd-s3 tvd-offset-s1">
		<div class="tvd-right">
			<span class="tvd-inline-block tvu-campaign-status-label">
				<?php echo __( 'Campaign status:', 'thrive-ult' ) ?>
			</span>
			<span class="tvu-campaign-status-<#= item.get('status') #> tvd-pointer tvu-campaign-status tvd-inline-block tvu-campaign-status-list">
				<#= item.get('status') #>
			</span>
		</div>
	</div>
</div>

<div class="tvd-row" id="tvu-campaign-settings">
	<div class="tvd-col tvd-s12 tvd-m4 tvd-l4">
		<div class="tvd-card tvd-white tvu-small-card">
			<div class="tvd-card-content">
				<div class="tvd-row tvd-no-margin tvd-valign-wrapper">
					<div class="tvd-col tvd-s12 tvd-m3 tvd-hide-on-meds-and-down tvd-l2 tvd-center-align tvd-valign tvu-campaign-icon">
						<i class="tvu-icon-list tvu-gray-text tvu-large-icon"></i>
					</div>
					<div class="tvd-col tvd-s12 tvd-ms12 tvd-m9 tvd-l10 tvd-valign">
						<h3 class="tvu-campaign-type-title tvd-truncate"><?php echo __( 'Campaign Type', 'thrive-ult' ) ?></h3>
						<p class="tvu-campaign-type tvu-campaign-card-summary"><?php echo __( 'Not set', 'thrive-ult' ) ?></p>
					</div>
				</div>
			</div>
			<div class="tvd-card-action">
				<div class="tvd-row tvd-no-margin tvd-valign-wrapper">
					<div class="tvd-col tvd-s12 tvd-m1 tvd-hide-on-meds-and-down tvd-l2 tvd-center-align tvd-valign">
						<p>&nbsp;</p>
					</div>
					<div class="tvd-col tvd-s12 tvd-m11 tvd-ms12 tvd-l10 tvd-valign tvd-relative">
						<hr class="tvu-lightgray-line">
						<a class="tvd-btn-flat tvu-btn-flat tvu-btn-flat-blue tvu-edit-campaign" href="javascript:void(0)">
							<?php echo __( 'Edit', 'thrive-ult' ) ?>
							<# if ( item.get_settings_step() === 'type' ) { #>
							<div class="tvd-tooltip-visible tvd-fixed-bottom tvd-normalize">
								<span><?php echo __( 'Next step: select a campaign type', 'thrive-ult' ) ?></span>
							</div>
							<# } #>
						</a>
						<# if ( item.get_settings_step() === 'lockdown_type' ) { #>
						<div class="tvd-tooltip-visible tvd-fixed-bottom tvd-normalize tvu-edit-campaign" style="cursor: pointer;">
							<span><?php echo __( 'Next step: select a campaign trigger for open campaigns', 'thrive-ult' ) ?></span>
						</div>
						<# } #>
						<# if ( item.get_settings_step() === 'leads_missing' ) { #>
						<div class="tvd-tooltip-visible tvd-fixed-bottom tvd-normalize tvu-edit-campaign" style="cursor: pointer;">
							<span><?php echo __( 'Next step: Thrive Leads was deactivated, change trigger', 'thrive-ult' ) ?></span>
						</div>
						<# } #>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="tvd-col tvd-s12 tvd-m4 tvd-l4">
		<div class="tvd-card tvd-white tvu-small-card">
			<div class="tvd-card-content">
				<div class="tvd-row tvd-no-margin tvd-valign-wrapper">
					<div class="tvd-col tvd-s12 tvd-hide-on-meds-and-down tvd-m3 tvd-l2 tvd-center-align tvd-valign">
						<i class="tvu-icon-eye tvu-gray-text tvu-large-icon"></i>
					</div>
					<div class="tvd-col tvd-s12 tvd-m9 tvd-ms12 tvd-l10 tvd-valign">
						<h3><?php echo __( 'Display', 'thrive-ult' ) ?></h3>
						<p id="tvu-display-summary" class="tvu-campaign-card-summary">
							<#= item.get( 'display_settings_summary' ) || <?php echo wp_json_encode( __( 'Not set', 'thrive-ult' ) ) ?> #>
						</p>
					</div>
				</div>
			</div>
			<div class="tvd-card-action">
				<div class="tvd-row tvd-no-margin tvd-valign-wrapper">
					<div class="tvd-col tvd-m1 tvd-hide-on-meds-and-down tvd-l2 tvd-center-align tvd-valign">
						<p>&nbsp;</p>
					</div>
					<div class="tvd-col tvd-s12 tvd-m11 tvd-ms12 tvd-l10 tvd-valign tvd-relative">
						<hr class="tvu-lightgray-line">
						<a class="tvd-btn-flat tvu-btn-flat tvu-btn-flat-blue tvu-display-settings tvd-relative"
						   href="javascript:void(0)"> <?php echo __( 'Edit', 'thrive-ult' ) ?>
							<# if ( item.get_settings_step() === 'display' ) { #>
							<div class="tvd-tooltip-visible tvd-fixed-bottom tvd-normalize">
								<span><?php echo __( 'Next step: select a display mode', 'thrive-ult' ) ?></span></div>
							<# } #>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="tvd-lockdown-wrapper" class="tvd-col tvd-s12 tvd-m4 tvd-l4"></div>
</div>

<h3><?php echo __( 'Designs', 'thrive-ult' ) ?></h3>
<div class="control-grid flex-start" id="tvu-designs-list">
	<div class="tvu-add-design tvd-pointer">
		<div class="tvd-card tvd-medium-xxsmall tvd-card-new tvd-valign-wrapper tvd-relative">
			<div class="tvd-card-content tvd-valign tvd-center-align">
				<i class="tvd-icon-plus tvd-icon-rounded tvd-icon-medium"></i>
				<h4><?php echo __( 'New Design', 'thrive-ult' ) ?></h4>
			</div>
			<# if ( item.get_settings_step() === 'design' ) { #>
			<div class="tvd-tooltip-visible tvd-fixed-right"><span><?php echo __( 'Next step: create a countdown timer design', 'thrive-ult' ) ?></span></div>
			<# } #>
		</div>
	</div>
</div>
<# if ( item.can_set_events() ) { #>
<div class="control-grid top">
	<div id="tvu-timeline-wrapper"></div>
	<div id="tvu-conversion-wrapper"></div>
</div>
<# } #>
<div class="tvd-v-spacer vs-2"></div>
<div class="control-grid">
	<a href="#purge-cache" class="tvd-btn-flat tvd-btn-flat-primary tvd-btn-flat-dark tvd-waves-effect">
		&laquo; <?php echo __( 'Back to Dashboard', 'thrive-ult' ) ?>
	</a>
</div>
