function templateInfo(values) {

	return `<div class='col-l mr-10'>\
				<p class='font-bold font-md-x2 mt-25 mb-5 dark-blue-color'>${values.origin.name}</p>\
				<p class='font-bold name m-0 dark-blue-color bg-light-gray-color-x2 overflow-wrap-any'>${values['name']}</p>\
				<div class='mt-10'>\
					${ templateButton(values.origin.homepage,wpdbt_admin_vars.data.translations.website) + templateButton(values.origin.download_link,wpdbt_admin_vars.data.translations.download)  }
				</div>\
			</div>\
			<div class='col-r mt-10'>\
				<div class=''>\
					<span class="font-sm-x1 label dark-blue-color">${wpdbt_admin_vars.data.translations.marketplace}:</span>
					${ displayMarketplaceImage(values.origin.marketplace) }
					<span class="font-sm m-0 text-uppercase d-block text-align-right">${values.origin.marketplace.name ?? 'Desconocido' }</span>
					${ displayRating(values.origin, wpdbt_admin_vars) }
				</div>\
				<div class=''>\
					<div class='likes'>\
						<span class="font-sm-x1 label dark-blue-color">${wpdbt_admin_vars.data.translations.users_feedback}:</span>
						<span class="font-sm label">${wpdbt_admin_vars.data.translations.votes}:</span>
						<div class=''>\
							<div class='text-align-right'>\
								<p class='p-0 m-0'> <span class="font-sm">${wpdbt_admin_vars.data.translations.likes}</span>  ${values.origin.likes}</p>\
							</div>\
							<div class='text-align-right'>\
								<p class='p-0 m-0'><span class="font-sm">${wpdbt_admin_vars.data.translations.dislikes}</span> ${values.origin.dislikes} </p>\
							</div>\
						</div>\
					</div>\
					<div class='mt-10'>\
						<span class="font-sm label">${wpdbt_admin_vars.data.translations.reliability}:</span>
						<p class='font-sm text-align-right m-0 font-bold reliability ${values.origin.reliability_level} '>${values.origin.reliability}%</p>\
					</div>\
				</div>\
			</div>`;
}


function displayMarketplaceImage(marketplace){

	if(marketplace.image != '' && marketplace.image != null){
		return `<img class="d-block" width="125px" src="${marketplace.image}">`;
	}

	return '';

}

function templateFeedback(feedback,slug){
	let class_feedback = (feedback == true) ? 'bg-light-green' : 'd-none';
	return `<div id='container-feedback-${slug}' class='feedback ${class_feedback}'>\
			<p id="feedback_message-${slug}" class='font font-md mt-25 px-10 py-10 br-5 m-0'>${wpdbt_admin_vars.data.translations.thank_vote}</p>\
			<div>`;
}

function templateVotes(values){


	return `<div id='container-votes-${values.origin.slug}' class='votes bt-solid mt-10'>\
				<p class='font-md m-0 mt-10'>${values.origin.question}</p>\
				<div class='d-flex-between'>\
					<div class='d-flex-between'>\
						<div class='d-flex-between mr-10'>\
							<img onclick='feedOriginInitAjax(this)' onmouseover='hover(this);' onmouseout='unhover(this);' data-slug='${values.origin.slug}' data-type='like'\
							 class='cursor-pointer vote' width='20px'\
							 id='btn-like'\
							 src='${wpdbt_admin_vars.data.admin_url}img/icon-like.svg'>\
							<p class='ml-5'>${values.origin.likes}</p>\
						</div>\
						<div class='d-flex-between'>\
							<img onclick='feedOriginInitAjax(this)' onmouseover='hover(this);' onmouseout='unhover(this);' data-slug='${values.origin.slug}' data-type='dislike'\
								 class='cursor-pointer vote' width='20px'\
								 id='btn-dislike'\
								 src='${wpdbt_admin_vars.data.admin_url}img/icon-dislike.svg'>\
							<p class='ml-5'>${values.origin.dislikes}</p>\
						</div>\
					</div>\
				</div>\
			</div>`;
}

function templateButton(value,label){

	let btn_disabled = (value == '') ? 'disabled' : '';
	let btn_link =`<a class='${btn_disabled} button font-sm button-secondary b-none btn-light font-bold color-white py-5 px-10 text-uppercase mr-20'\
	target='_blank' href='${value}' >${label}</a>`;

	return btn_link;

}

function templateFeedOrigin(prefix,type,slug,name,reliability){

	return `<form action='' id='form-feed-origin-${slug}'>\
				<input type='hidden' name='action' value='origin-feedback'>\
				<input id='type' type='hidden' name='type' value='${type}'>\
				<input id='slug' type='hidden' name='slug' value='${slug}'>\
				<input id='name' type='hidden' name='name' value='${name}'>\
				${setInputPrefix(prefix)}
				<input id='reliability' type='hidden' name='reliability' value='${reliability}'>\
				<input id='section' type='hidden' name='section' value='${wpdbt_admin_vars.data.current_page}'>\
				<input id='vote' type='hidden' name='vote' value=''>\
			</form>`;
}

function setInputPrefix(prefix){

	if(prefix != ''){
		return `<input id='prefix' type='hidden' name='prefix' value='${prefix}'>`;
	}

	return '';

}

function displayRating(origin, wpdbt_admin_vars){

	if(origin.rating !== '-' && typeof origin.rating !== 'undefined' ){
		return `<span class="font-sm label">${wpdbt_admin_vars.data.translations.rating}:</span>
				<div class='rating mb-10'>\
					<img width='20px' src='${wpdbt_admin_vars.data.admin_url}img/icon-star.svg'>\
					<span class='font-md'>\
					<strong class='font-md-x2'>${origin.rating}</strong>\
					/100</span>\
				</div>`;
	}

	return '';
}