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

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

	{var $enableCarousel = false}
	{var $stickyPosts = array()}
	{var $items = array()}
	{var $myExcerpts = array()}
	{var $categories = $el->option(category)}

	{var $args = array(
		'post_type'    => 'post',
		'post_type'    => 'post',
		'category__in' => !(is_array($categories) and sizeof($categories) == 1 and $categories[0] == 0) ? $categories,
		'orderby'      => $el->option(orderby),
		'order'        => $el->option(order),
		'posts_per_page' => $el->option(count),
	)}
	{customQuery as $query, $args}

	{if $query->havePosts}
		{customLoop from $query as $item}
			{if $item->isSticky}
				{? $stickyPosts[$item->id] = $item}
			{else}
				{? $items[$item->id] = $item}
			{/if}
			{? $myExcerpts[$item->id] = $item->excerpt(200)}
		{/customLoop}
	{/if}

	{* if queried sticky posts push them to the top of the list and return correct number of posts*}
	{var $items = array_merge($stickyPosts, $items)}
	{var $items = array_slice($items, 0, $el->option(count), true)}

	{if count($items) != 0}
		{var $layout = $el->option->layout}
		{var $postAuthor = $el->option->postAuthor}
		{var $postDate = $el->option->postDate}
		{var $postCategories = $el->option->postCategories}
		{var $postVisits = $el->option->postVisits}
		{var $postExcerpt = $el->option->postExcerpt}
		{* var $addInfo = $el->option->addInfo *}
		{var $textRows = $el->option->textRows}
		{* 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 $imageHeight     = $el->option->boxImageHeight}
			{var $imgWidth = 768}
		{else}
			{var $enableCarousel  = $el->option->listEnableCarousel}
			{var $numOfRows       = $el->option->listRows}
			{var $numOfColumns    = $el->option->listColumns}
			{var $imageHeight     = $el->option->listImageHeight}
			{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)}" data-arrow-left="{__ 'previous'}" data-arrow-right="{__ 'next'}">
			{foreach $items as $item}
			{* customLoop from $query as $item *}



				{if $enableCarousel and $iterator->isFirst($numOfRows)}
					<div n:class="item-box, $enableCarousel ? carousel-item">
				{/if}
				<div n:class='item, "item{$iterator->counter}", $item->isSticky ? sticky, $enableCarousel ? carousel-item, $iterator->isFirst($numOfColumns) ? item-first, $iterator->isLast($numOfColumns) ? item-last, $item->hasImage ? image-present, $boxAlign ? $boxAlign' data-id="{$iterator->counter}">

					<div class="item-thumbnail">

						{if $item->hasImage}
						{var $imageMeta = wp_get_attachment_metadata(get_post_thumbnail_id($item->id))}
						{var $uploadDir = wp_upload_dir()}
						{var $imageHeight = $imgWidth / aitGetImageRatio($uploadDir['basedir'].'/'.$imageMeta['file'])}
							<div class="item-thumbnail-wrap">
								<a href="{$item->permalink}">

									<div class="thumbnail" style="background-image: url('{!aitResizeImage($item->imageUrl, array('width' => $imgWidth, 'height' => $imageHeight, 'crop' => false))}')"></div>
								</a>
							</div>

						{/if}

						{if $postAuthor}
							<div class="item-author-wrap">
								<a href="{get_author_posts_url( $item->author->id )}">
									<div class="item-author-name">{$item->author->displayName}</div>
									<div class="item-author-avatar">{$item->author->avatar('50')|noescape}</div>
								</a>
							</div>
						{/if}


						{if $postCategories or $postVisits}
							<div class="item-info">

							{if $item->isInAnyCategory}
							{var $postElement = 'yes'}
							{if $postCategories}{includePart parts/entry-categories}{/if}
							{/if}

							{if $postVisits}
							{includePart parts/entry-visits, postID => $item->id}
							{/if}

							</div>
						{/if}

						<div class="item-details{if !$postExcerpt} no-excerpt{/if}">

							{if $postDate}
								{includePart parts/entry-date-format, dateIcon => $item->rawDate, dateLinks => 'no', dateShort => 'no'}
							{/if}

							<div class="item-title"><h3><a href="{$item->permalink}">{!$item->title}</a></h3></div>

						</div>

					</div>

					{if $postExcerpt}
					<div class="item-text">
						<div class="item-excerpt"><p class="txtrows-{$textRows}">{!$myExcerpts[$item->id]|striptags}</p></div>
					</div>
					{/if}

				</div>

				{if $enableCarousel and $iterator->isLast($numOfRows)}
					</div>
				{/if}
			{* /customLoop *}
			{/foreach}
			</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)}" data-arrow-left="{__ 'previous'}" data-arrow-right="{__ 'next'}">
			{foreach $items as $item}
			{* customLoop from $query as $item *}
				{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'	data-id="{$iterator->counter}">

					<a href="{$item->permalink}">

						<div class="item-container">

							{if $item->hasImage}
								{var $ratio = explode(":", $imageHeight)}
								{var $imgHeight = ($imgWidth / $ratio[0]) * $ratio[1]}

								<div class="item-thumbnail">
									<div class="item-thumbnail-wrapper">
										<div class="item-thumbnail-wrap" style="background-image: url('{!aitResizeImage($item->imageUrl, array('width' => $imgWidth, 'height' => $imgHeight, 'crop' => true))}');"></div>
									</div>
								</div>

							{/if}

							<div class="item-content">
								<div class="item-title"><h3>{!$item->title}</h3></div>
								<div class="item-text">
									<div class="item-excerpt"><p class="txtrows-{$textRows}">{!$myExcerpts[$item->id]|striptags}</p></div>
								</div>
							</div>

						</div>

					</a>

					{if $postAuthor or $postDate or $postVisits or $postCategories}
						<div class="item-details">

							{if $postAuthor}
								<div class="item-row">
									<div class="item-label">{__ 'Author'}</div>
									<div class="item-row-value"><a href="{get_author_posts_url( $item->author->id )}">{!$item->author->displayName}</a></div>
								</div>
							{/if}

							{if $postDate}
								<div class="item-row">
									<div class="item-label">{__ 'Date'}</div>
									<div class="item-row-value">{$item->dateI18n('j. M Y')}</div>
								</div>
							{/if}

							{if $postVisits}
								<div class="item-row">
									<div class="item-label">{__ 'Visits'}</div>
									<div class="item-row-value">{includePart parts/entry-visits, postID => $item->id}</div>
								</div>
							{/if}

							{if $postCategories and $item->isInAnyCategory}
								<div class="item-row categories">
									<div class="item-label">{__ 'Categories'}</div>
									<div class="item-row-value">
										{var $postElement = 'yes'}
										{includePart parts/entry-categories}
									</div>
								</div>
							{/if}

						</div>
					{/if}

				</div>

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

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