<%
function buildNumberString( array )
{
	var returnString = '';

	for ( var i = 0; i < array.length; i++ )
	{
		returnString += '<span class="number">' + array[i] + '</span>';
	}

	return returnString;
}

var itemText = "You have not included a menuItem parameter to this partial; The item object.";
var itemImage = 'https://via.placeholder.com/243x150';
var itemImageMed = 'https://via.placeholder.com/150x93';
var itemImageSmall = 'https://via.placeholder.com/100x62';
var itemTinyDesc = "Flavorful and Yummy";
var itemDesc = 'sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget';

if ( typeof menuItem !== "undefined" ) {
	itemText = menuItem.name;

	if ( typeof menuItem.image !== "undefined" )
	{
		itemImage = uri + '/static/img/menuItemImages/' + menuItem.image;
	}

	if ( typeof menuItem.tinyDesc !== "undefined" )
	{
		itemTinyDesc = tinyDesc;
	}

	if ( typeof menuItem.description !== "undefined" )
	{
		itemDesc = menuItem.description;
	}

	if ( typeof menuItem.price !== "undefined" )
	{
		var priceArray = menuItem.price.toString().split('.');
		if ( ! priceArray[0] )
		{
			priceArray[0] = '0';
		}
		if ( ! priceArray[1] )
		{
			priceArray[1] = '00';
		}

		var priceArrayCents = priceArray[1].split('');
		var priceArrayDollars = priceArray[0].split('');

		var dollarPriceHTML = buildNumberString(priceArrayDollars);
		var centsPriceHTML = buildNumberString(priceArrayCents);

		menuItem.price = '<span class="price-dollars">' + dollarPriceHTML + '</span><span class="price-cents">' + centsPriceHTML + '</span>';
	}
}

if ( !itemText.length )
{
	return;
}
%><div class="menu-item">
	<div class="menu-item-image-wrapper">
		<img src="<%= itemImage ;%>" srcset="<%=itemImageSmall%> 100w, <%=itemImageMed%> 150w, <%= itemImage; %> 243w" sizes="(max-width: 480px) 150px, (min-width: 1200px) 243px, (min-width: 768px) 150px, 100px" />
	</div><div class="menu-item-content-wrapper">
		<div class="menu-item-title">
			<%= itemText; %>
		</div>
		<div class="menu-item-tiny-description">
			<%= itemTinyDesc; %>
		</div>
		<div class="menu-item-description">
			<p><em><%= itemDesc; %></em></p>
		</div>
	</div><div class="menu-item-price-wrapper price-wrapper">
		$<%- menuItem.price %>
	</div>
</div>