{include $el->common('header')}

<div id="{$htmlId}" class="elm-item-organizer {$htmlClass}">

	{customQuery as $query,
		type    => job-offer,
		tax     => offers,
		cat     => $el->option(category),
		limit   => $el->option(count),
		orderby => $el->option(orderby),
		order 	=> $el->option(order)
	}

	{* determine if there are valid job offers *}
	{var $itemsCount = 0}
	{if $query->havePosts}
		{foreach $query->posts as $index => $post}
			{var $post_meta = get_post_meta($post->ID, "_ait-job-offer_offer-data", true)}
			{if time() <= strtotime($post_meta['validTo'])}
				{var $itemsCount++}
			{else}
				{? array_splice($query->posts, $index, 1)}
			{/if}
		{/foreach}
		{var $query->post_count = count($query->posts)}
		{var $query->found_posts = count($query->posts)}
	{/if}
	{* determine if there are valid job offers *}

	{var $dateFormat 		= 'j M Y'}
	{var $dateFormatFull 	= 'D, j M Y'}

	{if $itemsCount != 0}
		{var $layout = $el->option->layout}
		{var $textRows = $el->option->textRows}		
		{var $addInfo = $el->option->addInfo}
		{* Unified variables and data *}
		{if $layout == box}
			{var $enableCarousel  = $el->option->boxEnableCarousel}
			{var $boxAlign 		  = $el->option->boxAlign}
			{var $numOfRows       = $el->option->boxRows}
			{var $numOfColumns    = $el->option->boxColumns}
			{var $imgWidth = 640}
		{else}
			{var $enableCarousel  = $el->option->listEnableCarousel}
			{var $numOfRows       = $el->option->listRows}
			{var $numOfColumns    = $el->option->listColumns}
			{var $imgWidth = 220}
		{/if}

		{if $enableCarousel}
			<div class="loading"><span class="ait-preloader">{!__ 'Loading&hellip;'}</span></div>
		{/if}

		{if $layout == box}
			<div n:class='elm-item-organizer-container, "column-{$numOfColumns}", "layout-{$layout}", $enableCarousel ? carousel-container : carousel-disabled,' data-cols="{$numOfColumns}" data-first="1" data-last="{= ceil($query->postCount / $numOfRows)}">
			{customLoop from $query as $item}
				{var $meta = $item->meta('offer-data')}
				{if time() <= strtotime($meta->validTo)}
					{if $enableCarousel and $iterator->isFirst($numOfRows)}
						<div n:class="item-box, $enableCarousel ? carousel-item">
					{/if}
					<div n:class='item, "item{$iterator->counter}", $enableCarousel ? carousel-item, $iterator->isFirst($numOfColumns) ? item-first, $iterator->isLast($numOfColumns) ? item-last, $item->hasImage ? image-present, $boxAlign ? $boxAlign,' data-id="{$iterator->counter}">
						<a href="{$item->permalink}">

							{if $item->hasImage}
							<div class="item-thumbnail">
								<img src="{imageUrl $item->imageUrl, width => 100, height => 100, crop => 1}" alt="{!$item->title}">
							</div>
							{/if}

							<div class="item-title">
								<h3>{!$item->title}</h3>
								{if $addInfo}
								{if $meta->validTo != ''}
									<div class="item-duration">
										<span class="item-dur-title"><strong>{__ 'Validity:'}</strong></span>
										<time class="item-from" datetime="{$meta->validFrom|dateI18n:'c'}">{$meta->validFrom|dateI18n: $dateFormat}</time>
										<span class="item-sep">-</span>
										<time class="item-to" datetime="{$meta->validTo|dateI18n:'c'}">{$meta->validTo|dateI18n: $dateFormat}</time>
									</div>
								{/if}
								{/if}
							</div>
						</a>

						<div class="item-text">
							<div class="item-excerpt txtrows-{$textRows}">{!$item->excerpt(200)}</div>
						</div>

						{if $addInfo}
						<div class="item-info">
							<div class="job-contact">
								<span class="job-contact-title"><strong>{__ 'Contact:'}</strong></span>
								{if $meta->contactName}<span class="job-contact-name">{$meta->contactName}</span>{/if}<!--
								-->{if $meta->contactMail}<span class="job-contact-mail"><a href="mailto:{$meta->contactMail}">{$meta->contactMail}</a></span>{/if}<!--
								-->{if $meta->contactPhone}<span class="job-contact-phone">{$meta->contactPhone}</span>{/if}
							</div>
						</div>
						{/if}
					</div>

					{if $enableCarousel and $iterator->isLast($numOfRows)}
						</div>
					{/if}
				{/if}
			{/customLoop}
			</div>
		{else}
			<div n:class='elm-item-organizer-container, "column-{$numOfColumns}", "layout-{$layout}", $enableCarousel ? carousel-container : carousel-disabled,' data-cols="{$numOfColumns}" data-first="1" data-last="{= ceil($query->postCount / $numOfRows)}">
			{customLoop from $query as $item}
				{var $meta = $item->meta('offer-data')}
				{if time() <= strtotime($meta->validTo)}
					{if $enableCarousel and $iterator->isFirst($numOfRows)}
						<div n:class="item-box, $enableCarousel ? carousel-item">
					{/if}

					<div n:class='item, "item{$iterator->counter}", $enableCarousel ? carousel-item, $iterator->isFirst($numOfColumns) ? item-first, $item->hasImage ? image-present, $iterator->isLast($numOfColumns) ? item-last, '	data-id="{$iterator->counter}">
						<a href="{$item->permalink}">

							{if $item->hasImage}
								<div class="item-thumbnail">
										<img src="{imageUrl $item->imageUrl, width => 100, height => 100, crop => 1}" alt="{!$item->title}">
								</div>
							{/if}

							<div class="item-title">
								<h3>{!$item->title}</h3>
								{if $addInfo}
								{if $meta->validTo != ''}
									<div class="item-duration">
										<span class="item-dur-title"><strong>{__ 'Validity:'}</strong></span>
										<time class="item-from" datetime="{$meta->validFrom|dateI18n:'c'}">{$meta->validFrom|dateI18n: $dateFormat}</time>
										<span class="item-sep">-</span>
										<time class="item-to" datetime="{$meta->validTo|dateI18n:'c'}">{$meta->validTo|dateI18n: $dateFormat}</time>
									</div>
								{/if}
								{/if}
							</div>
						</a>

						<div class="item-text">
							<div class="item-excerpt txtrows-{$textRows}">{!$item->excerpt(200)}</div>
						</div>

						{if $addInfo}
						<div class="item-info">
							<div class="job-contact">
								<span class="job-contact-title"><strong>{__ 'Contact:'}</strong></span>
								{if $meta->contactName}<span class="job-contact-name">{$meta->contactName}</span>{/if}<!--
								-->{if $meta->contactMail}<span class="job-contact-mail"><a href="mailto:{$meta->contactMail}">{$meta->contactMail}</a></span>{/if}<!--
								-->{if $meta->contactPhone}<span class="job-contact-phone">{$meta->contactPhone}</span>{/if}
							</div>
						</div>
						{/if}
					</div>

					{if $enableCarousel and $iterator->isLast($numOfRows)}
						</div>
					{/if}
				{/if}
			{/customLoop}
			</div>
		{/if}
	{else}
		<div class="elm-item-organizer-container">
			<div class="alert alert-info">
				{_x 'Job Offers', 'name of element'}&nbsp;&nbsp;|&nbsp;&nbsp;{__ 'Info: There are no items created, add some please.'}
			</div>
		</div>
	{/if}

</div>

{if $enableCarousel}
	<div class="carousel-standard-arrows">
		<div class="carousel-arrow-left standard-arrow standard-arrow-left" style="cursor: pointer;">&lt;</div>
		<div class="carousel-arrow-right standard-arrow standard-arrow-right" style="cursor: pointer;">&gt;</div>
	</div>
	<div class="carousel-bottom-arrows">
		<div class="carousel-nav-text">{__ 'Navigation'}</div>
		<div class="carousel-arrow-left bottom-arrow bottom-arrow-left" style="cursor: pointer;">&lt;</div>
		<div class="carousel-arrow-right bottom-arrow bottom-arrow-right" style="cursor: pointer;">&gt;</div>
	</div>
{/if}

{includePart "ait-theme/elements/job-offers/javascript", enableCarousel => $enableCarousel}