<label>
	<?php echo __( 'Source', 'thrive-cb' ); ?>
	<select class="tve-font-select change tcb-dark" data-fn="sourceChange">
		<# _.each(this.fonts, function(v,k) { #>
			<option value="<#= k #>">
				<#= v.label #>
			</option>
			<#    }) #>
				<option value="inherit"><?php echo __( 'Inherit Theme Fonts', 'thrive-cb' ); ?></option>
	</select>
</label>

<div class="font-section" data-section="google">
	<label>
		<input type="checkbox" class="change" data-fn="googleRecommended">
		<?php echo __( 'Show recommended fonts only', 'thrive-cb' ); ?>
	</label>
	<hr>
	<div class="row middle-xs">
		<div class="col-xs-2">
			<?php echo __( 'Font', 'thrive-cb' ); ?>
		</div>
		<div class="col-xs-10">
			<input class="tve-google-font-select tcb-dark">
		</div>
	</div>
	<div class="row middle-xs margin-top-10">
		<div class="col-xs-6">
			<div class="row middle-xs">
				<div class="col-xs-5"><?php echo __( 'Regular', 'thrive-cb' ); ?></div>
				<div class="col-xs-7">
					<select class="tve-google-weigh-select change tcb-dark" data-fn="change" data-font="google"></select>
				</div>
			</div>
		</div>
		<div class="col-xs-6">
			<div class="row middle-xs">
				<div class="col-xs-5 tcb-text-right">
					<?php echo __( 'Bold', 'thrive-cb' ); ?></div>
				<div class="col-xs-7">
					<select class="tve-google-bold-select change tcb-dark" data-fn="change" data-font="google"></select>
				</div>
			</div>
		</div>
	</div>
	<div class="row middle-xs margin-top-10">
		<div class="col-xs-12">
			<div class="row middle-xs">
				<div class="col-xs-3">
					<?php echo __( 'Charset', 'thrive-cb' ); ?>
				</div>
				<div class="col-xs-9">
					<select class="tve-google-subsets-select change tcb-dark" data-fn="change" data-font="google"></select>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="font-section" data-section="safe">
	<label>
		<?php echo __( 'Font', 'thrive-cb' ); ?>
		<select class="tve-safe-font-select change tcb-dark" data-fn="fontChange" data-font="safe">
			<option><?php echo __( '', '' ); ?></option>
			<# _.each(this.fonts.safe.fonts, function(v,k) { #>
				<option value="<#= k #>">
					<#= v.family #>
				</option>
				<#    }) #>
		</select>
	</label>
</div>


<div class="font-section" data-section="inherit"></div>

<div class="font-section" data-section="custom">
	<label>
		<?php echo __( 'Font', 'thrive-cb' ); ?>
		<select class="tve-custom-font-select change tcb-dark" data-fn="fontChange" data-font="custom">
			<option><?php echo __( '', '' ); ?></option>
			<# _.each(this.fonts.custom.fonts, function(v,k) { #>
				<option value="<#= k #>">
					<#= v.family #>
				</option>
			<#    }) #>
		</select>
	</label>
</div>




