{breadcrumbs}<a href="{$GLOBALS.site_url}/system/miscellaneous/plugins/">[[Plugins]]</a> / [[Facebook Application Settings]]{/breadcrumbs}
<div class="page-title page-title--wide">
	<h1 class="title">[[Facebook Application Settings]]</h1>
	<div class="page-title__buttons">
		<div class="facebook-app-button">
			<a onclick="window.open(this.href); return false;" href="https://fbapp.smartjobboard.com/canvas/?app_data={$GLOBALS.custom_domain_url|escape:'url'},{$GLOBALS.admin_site_url|escape:'url'}/system/miscellaneous/fb_app_settings/" class="btn btn--primary">[[Install Application on Facebook page]]</a>
		</div>
	</div>
</div>

<style type="text/css">
	{literal}
		#facebook-app td {
			padding: 5px;
		}
		.facebook-app-upload {
			line-height: 30px;
			margin: 10px 0 0 0;
			max-width: 900px;
		}
		.facebook-app-upload {
			border: 10px solid white;
			box-shadow: 0 0 6px #dcdcdc;
			border-radius: 4px;
		}
		.facebook-app-upload img {
			max-width: 75%;
		}
		.facebook-app-button {
			max-width: 800px;
		}

		.facebook-app-upload__img {
			max-width: 100%;
		}
	{/literal}
</style>

{if $message}
	<p class="message">[[{$message}]]</p>
{/if}

{foreach from=$errors item=error}
	<p class="error">
		{if $error == 'NOT_SUPPORTED_IMAGE_FORMAT'}
			[[Image format is not supported]]
		{elseif $error == 'UPLOAD_ERR_INI_SIZE'}
			[[File size shouldn't be larger than 5 MB.]]
		{else}
			[[{$error}]]
		{/if}
	</p>
{/foreach}

[[Facebook pages with installed application:]]
<ul>
	{foreach from=$facebookAppPages item='facebookAppPage'}
		<li class="facebookAppPageItem">{$facebookAppPage}</li>
	{foreachelse}
		<li>[[Facebook application is not installed yet]]</li>
	{/foreach}
</ul>
<script type="text/javascript">
{if $action == 'install-page'}
	window.opener.location.reload();
	window.close();
{/if}
{literal}
	$(document).ready(function(){
			$('.facebookAppPageItem').each(function(){
				var item = this;
				$.ajax('//graph.facebook.com/' + $(item).html())
						.done(function(data) {
							$(item).html('<a href="' + data.link + '">' + data.name + "</a>");
						});
			});
	});
</script>
{/literal}

<form method="post" enctype="multipart/form-data" action="" class="form-horizontal">
	<input type="hidden" name="action" value="save" />
	<div class="panel-group">
		<div class="panel panel-default panel--wide">
			<div class="panel-heading" style="margin-bottom: 0; padding-bottom: 0;">
				<h4 class="panel-title">
					[[Logo]]
				</h4>
			</div>
			<div class="panel-collapse">
				<div class="panel-body">
					<div class="form-group with-tooltip">
						<div class="input-group input-group__file input-group__facebook">
							<input type="text" value="logo.png" alt="" />
							<input type="file" name="logo" />
							<span class="input-group-btn">
								<a href="#" class="btn btn-default btn-change"><i class="fa fa-exchange" aria-hidden="true"></i>[[Change]]</a>
							</span>
						</div>
						<img class="facebook-app-upload__img" src="{$GLOBALS.user_site_url}/templates/{$theme}/main/images/logo.png?t={$smarty.now}" />
						{assign value="355x70 px" var="recommendedDimensions"}
						<span class="banner-tooltip" data-toggle="tooltip" data-placement="auto left" title="[[recommended dimensions: $recommendedDimensions]]"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="panel-group">
		<div class="panel panel-default panel--wide">
			<div class="panel-heading" style="margin-bottom: 0; padding-bottom: 0;">
				<h4 class="panel-title">
					[[Header]]
				</h4>
			</div>
			<div class="panel-collapse">
				<div class="panel-body">
					<div class="form-group with-tooltip">
						<div class="input-group input-group__file input-group__facebook">
							<input type="text" value="header.png" alt="" />
							<input type="file" name="header" />
							<span class="input-group-btn">
								<a href="#" class="btn btn-default btn-change"><i class="fa fa-exchange" aria-hidden="true"></i>[[Change]]</a>
							</span>
						</div>
						<img class="facebook-app-upload__img" src="{$GLOBALS.user_site_url}/templates/{$theme}/main/images/header.png?t={$smarty.now}" />
						{assign value="810x185 px" var="recommendedDimensions"}
						<span class="banner-tooltip" data-toggle="tooltip" data-placement="auto left" title="[[recommended dimensions: $recommendedDimensions]]"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="facebook-app-button">
		<input type="submit" name="submit" value="[[Save]]" class="btn btn--primary" />
	</div>
</form>

<style>
	.panel .form-group {
		margin-left: 0;
	}
</style>
