<label class="tve-select-arrow">
	<?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 class="tcb-checkbox">
		<input type="checkbox" class="tve-google-font-recommeneded change tve-checkbox" data-fn="googleRecommended">
		<span><?php echo __( 'Show recommended fonts only', 'thrive-cb' ); ?></span>
	</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">
			<select class="tve-select-google-font-select change tcb-dark" data-fn="googleSelectRecommended"></select>
		</div>
	</div>
	<div class="row middle-xs margin-top-10 has-weight">
		<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-4 tcb-text-right">
					<?php echo __( 'Bold', 'thrive-cb' ); ?></div>
				<div class="col-xs-8">
					<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 has-italic">
		<div class="col-xs-12">
			<label class="tcb-checkbox">
				<input type="checkbox" class="change tve-checkbox google-italic" data-fn="toggleItalic">
				<span><?php echo sprintf( __( 'Also include the %sItalic%s version', 'thrive-cb' ), '<em>', '</em>' ); ?></span>
			</label>
			<div class="clear"></div>
			<div class="font-if-italic">
				<span class="blue-text"><svg class="tcb-icon tcb-icon-info"><?php tcb_icon( 'info' ) ?>"></use></svg></span>
				<span class="info-text"><?php echo __( 'Including the Italic styles may result in slower loading', 'thrive-cb' ) ?></span>
			</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 class="tve-select-arrow">
		<?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>




