<?php
?>
<style type="text/css">

.mode-details { margin-top: 20px; }
.mode-details th { text-align: center; font-size: 14px; background: rgba(0,0,0,0.035); padding: 10px !important; }
.mode-details .feature { padding: 10px;  font-weight: 600; }
.mode-details tr:nth-of-type(2n) { background-color: rgba(0,0,0,0.025); }
.mode-details .value { font-weight: bold; text-align: center; }
.essb-feature-mode.closed { display: none; }
</style>

<div style="margin-top:20px;">
	<a href="#" class="essb-btn essb-button-openmodes">Open Mode Comparison</a>
</div>
<div class="essb-feature-mode closed">

<table width="100%" cellpadding="5" cellspacing="2" width="100%" class="mode-details">
	<col width="25%"/>
	<col width="15%"/>
	<col width="15%"/>
	<col width="15%"/>
	<col width="15%"/>
	<col width="15%"/>
	<thead>
		<tr>
			<th></th>
			<th>Light Share Buttons</th>
			<th>Medium Share Buttons</th>
			<th>Advanced Sharing & Subscribe</th>
			<th>Sharing, Subscribe and Following</th>
			<th>Everything</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="feature">Templates</td>
			<td class="value">ALL</td>
			<td class="value">ALL</td>
			<td class="value">ALL</td>
			<td class="value">ALL</td>
			<td class="value">ALL</td>
		</tr>
		<tr>
			<td class="feature">Display Positions (Core)</td>
			<td class="value">7</td>
			<td class="value">11</td>
			<td class="value">16</td>
			<td class="value">16</td>
			<td class="value">ALL</td>
		</tr>
		<tr>
			<td class="feature">Social Networks</td>
			<td class="value">ALL</td>
			<td class="value">ALL</td>
			<td class="value">ALL</td>
			<td class="value">ALL</td>
			<td class="value">ALL</td>
		</tr>		
		<tr>
			<td class="feature">Button & Counter Styles</td>
			<td class="value">ALL</td>
			<td class="value">ALL</td>
			<td class="value">ALL</td>
			<td class="value">ALL</td>
			<td class="value">ALL</td>
		</tr>
		<tr>
			<td class="feature">Personalize Position Settings</td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>		
		<tr>
			<td class="feature">Advanced Mobile Options</td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>
		<tr>
			<td class="feature">Shareble Quotes</td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>
		<tr>
			<td class="feature">Short URLs</td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>
		<tr>
			<td class="feature">Social Share Optimization Tags</td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>		
		<tr>
			<td class="feature">After Share Actions</td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>
		<tr>
			<td class="feature">Plugin Analytics</td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>	
		<tr>
			<td class="feature">Affiliate & Point Plugin Integration</td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>	
		<tr>
			<td class="feature">Custom Share Setup</td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>					
		<tr>
			<td class="feature">User Message Before Share Buttons</td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>					
		<tr>
			<td class="feature">Social Metrics</td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>	
		<tr>
			<td class="feature">Conversions Lite</td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>	
		<tr>
			<td class="feature">Translate to Different Languages</td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>				

		<tr>
			<td class="feature">Social Followers Counter</td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>				
		<tr>
			<td class="feature">Social Profile Links</td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>		
		<tr>
			<td class="feature">Facebook Messenger Live Chat</td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>		<tr>
			<td class="feature">Skype Live Chat</td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>
		<tr>
			<td class="feature">Subscribe Forms</td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>		
		
		<tr>
			<td class="feature">Native Social Buttons</td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-close"></i></td>
			<td class="value"><i class="ti-check"></i></td>			
		</tr>		
		
	</tbody>
</table>
</div>

<script type="text/javascript">
jQuery(document).ready(function($){
	$('.essb-button-openmodes').click(function(e){
		e.preventDefault();

		$('.essb-feature-mode').toggleClass('closed');
	});
});

</script>