{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}
		{customLoop from $query as $item}
			{if time() <= strtotime($item->meta('offer-data')->validTo)}
				{var $itemsCount++}
			{/if}
		{/customLoop}
	{/if}
	{* determine if there are valid job offers *}

	{if $itemsCount != 0}
		{var $layout = $el->option->layout}
		{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></div>
						</a>

						<div class="item-text">
							{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|date:'c'}">{$meta->validFrom|dateI18n}</time>
									<span class="item-sep">-</span>
									<time class="item-to" datetime="{$meta->validTo|date:'c'}">{$meta->validTo|dateI18n}</time>
								</div>
							{/if}
							{/if}
							<div class="item-excerpt">{!$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></div>
						</a>

						<div class="item-text">
							{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|date:'c'}">{$meta->validFrom|dateI18n}</time>
									<span class="item-sep">-</span>
									<time class="item-to" datetime="{$meta->validTo|date:'c'}">{$meta->validTo|dateI18n}</time>
								</div>
							{/if}
							{/if}
							<div class="item-excerpt">{!$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>

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