<?php
/**
 * Thrive Themes - https://thrivethemes.com
 *
 * @package thrive-visual-editor
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Silence is golden
}
?>
<div class="row layout-title-holder">
	<div class="col-xs-9">
		<span class="title">
			<?php echo __( 'Margins & Padding', 'thrive-cb' ); ?>
		</span>
		<span class="sub-title">
			<?php echo __( '(Click + Drag)', 'thrive-cb' ); ?>
		</span>
	</div>
	<div class="col-xs-3">
		<select class="tve-select um change" data-fn="umChange" style="display:none;">
			<option value="px">px</option>
			<option value="%">%</option>
			<option value="em">em</option>
		</select>
	</div>
</div>

<div class="trapezoid-holder">
	<div class="large-trapezoid handle reverse left" data-dir="left" data-style="margin"></div>
	<input class="tve-input left change input keyup" data-fn-keyup="keyup" data-side="left" data-fn="change" data-fn-input="change" value="0" data-style="margin" tabindex="903">

	<div class="small-trapezoid handle left" data-dir="left" data-style="padding"></div>
	<input class="tve-input left change input keyup" data-fn-keyup="keyup" data-side="left" data-fn="change" data-fn-input="change" value="0" data-style="padding" tabindex="907">

	<div class="large-trapezoid handle reverse top" data-dir="top" data-style="margin"></div>
	<input class="tve-input top change input keyup" data-fn-keyup="keyup" data-side="top" data-fn="change" data-fn-input="change" value="0" data-style="margin" tabindex="900">

	<div class="small-trapezoid handle top" data-dir="top" data-style="padding"></div>
	<input class="tve-input top change input keyup" data-fn-keyup="keyup" data-side="top" data-fn="change" data-fn-input="change" value="0" data-style="padding" tabindex="904">

	<div class="large-trapezoid handle right" data-dir="right" data-style="margin"></div>
	<input class="tve-input right change input keyup" data-fn-keyup="keyup" data-side="right" data-fn="change" data-fn-input="change" value="0" data-style="margin" tabindex="901">

	<div class="small-trapezoid handle reverse right" data-dir="right" data-style="padding"></div>
	<input class="tve-input right change input keyup" data-fn-keyup="keyup" data-side="right" data-fn="change" data-fn-input="change" value="0" data-style="padding" tabindex="905">

	<div class="large-trapezoid handle bottom" data-dir="bottom" data-style="margin"></div>
	<input class="tve-input bottom change input keyup" data-fn-keyup="keyup" data-side="bottom" data-fn="change" data-fn-input="change" value="0" data-style="margin" tabindex="902">

	<div class="small-trapezoid handle reverse bottom" data-dir="bottom" data-style="padding"></div>
	<input class="tve-input bottom change input keyup" data-fn-keyup="keyup" data-side="bottom" data-fn="change" data-fn-input="change" value="0" data-style="padding" tabindex="906">

	<div class="click link" data-fn="linkInput">
		<?php tcb_icon( 'link' ) ?>
	</div>
</div>

<div class="row">
	<div class="col-xs-12">
		<span class="error" style="display: none;">
			<?php echo __( 'The value entered is not valid. Please try again.', 'thrive-cb' ); ?>
		</span>
	</div>
</div>
