{assign var='challengeCounter' value=0 scope='global'}
<input id="queryStartFrom" value=54 type="hidden" />
{foreach from=$challenges item=challenge name=challenges}

  {assign var=challengeCounter value=$challengeCounter+1}
	{assign var=access value=$challenge->getAccess()}
	
  {if $access}
    {$isArchived=false}
    {if $challenge->data['category_archived'] == Category::STATUS_ARCHIVED}
      {$isArchived=true}
    {/if}
    {$isClosed=false}
    {if $challenge->getAccess()->getData('showClosed')}
      {$isClosed=true}
    {/if}
    {$isUnpublished=$challenge->isUnpublished()}
    {$isUserCreated=$challenge->data['category_usercreated'] == 1}
    {if $listSource == 'user_activity'}
      <article class="mdl-panel" data-id="{$challenge->id}">
        <aside class="mdl-panel__image">
          {if !$isUnpublished}<a href="/category/{$challenge->id}" title="{Translation::t($challenge, 'category_name')}">{/if}
            {if $challenge->data.category_file!=0}
              <img src="{$challenge->joined.obj_category_file->getCloudinaryURL(208,178)}" alt="Image thumbnail for challenge entitled {Translation::t($challenge, 'category_name')|strip_tags}">
            {else}
              <span class="hidden">{Translation::t($challenge, 'category_name')|strip_tags}</span>
            {/if}
          {if !$isUnpublished}</a>{/if}
        </aside>
        <section class="mdl-panel__body">
          <header class="mdl-panel__body-header">
            {if !$isUnpublished}<a href="/category/{$challenge->id}" title="{Translation::t($challenge, 'category_name')}">{/if}
              <h3 data-id="{$challenge->id}" class="type-style-subHeader-L">{Translation::t($challenge, 'category_name')}</h3>
            {if !$isUnpublished}</a>{/if}
          </header>
          <div class="mdl-panel__body-content">
            {if !$isUnpublished}<a href="/category/{$challenge->id}" title="{Translation::t($challenge, 'category_name')}">{/if}
              <p>{Translation::t($challenge, 'category_description')|strip_tags}</p>
              <span class="mdl-panel__body-content-overlay"></span>
            {if !$isUnpublished}</a>{/if}
          </div>
          <footer class="mdl-panel__footer">
            <div class="mdl-panel__stats">
                <div class="mdl-panel__stat">
                  <span class="mdl-icon -s"><svg><use href="#idea"></use></svg></span>
                  <span>{$challenge->stats.ideasPlusChildren|kize}</span>
                </div>
                <div class="mdl-panel__stat">
                  <span class="mdl-icon -s"><svg><use href="#thumbs-up"></use></svg></span>
                  <span>{$challenge->stats.votesPlusChildren|kize}</span>
                </div>
                <div class="mdl-panel__stat">
                  <span class="mdl-icon -s"><svg><use href="#comment"></use></svg></span>
                  <span>{$challenge->stats.commentsPlusChildren|kize}</span>
                </div>
                <div class="mdl-panel__stat">
                  <span class="mdl-icon -s"><svg><use href="#team"></use></svg></span>
                  <span>{$challenge->stats.usersPlusChildren|kize}</span>
                </div>
            </div>
            <div>
              {if $viewUser->id eq $user->id || in_array($user->user_usertype->id, [1,2])}
                <button type="button" class="mdl-button create-challenge-trigger" data-id="{$challenge->id}" data-ak="{$user->getActionKey()}" data-title="{"Edit Challenge: %s"|gettext|sprintf:Translation::t($challenge, 'category_name')}">{"Edit"|gettext}</button>
              {/if}
              {if $viewUser->data.user_id neq $user->data.user_id && !$isUnpublished}
                <a href="/category/{$challenge->id}" class="mdl-button -primary" title="{Translation::t($challenge, 'category_name')}">
                  {'Join in'|gettext}
                </a>
              {/if}
            </div>
          </footer>
        </section>
        <aside class="mdl-panel__banner {if $isUnpublished}-active{/if}">{'Unpublished'|gettext}</aside>
      </article>
    {else}
        <div
          data-title="{Translation::t($challenge, 'category_name')}"
          data-order="{$challenge->category_order}"
          data-id="{$challenge->id}"
          data-ideas="{$challenge->stats.ideasPlusChildren|kize}"
          id="b-challenge-{$challenge->data['category_id']}"
          class="
            b-challenge
            i-challenge
            {if $listSource neq 'user_activity'}mix{/if}
            challengeStatus-{$challenge->data['category_archived']}
            {foreach $challenge->getGlobalCategories() as $category}
              filter-{$category->joined['obj_challengecategory_category']->data['globalcategory_id']}
            {/foreach}
            {foreach $challengeTags[$challenge->data['category_id']] as $cTag}
              tag-{$cTag->data['tag_id']}
            {/foreach}
            {if $isArchived}filter-archived{/if}
            {if $isClosed}filter-ended{/if}
            {if $isUserCreated}filter-user-created{/if}
            {if !$isArchived && !$isClosed && !$isUserCreated}filter-active{/if}
            mdl-panel
          "
        >
        <div class="b-challenge__thumbnail mdl-panel__image">
            <a class="b-challenge__thumbnail-link" href="#">
                {if $challenge->data.category_file!=0} <img src="{$challenge->joined.obj_category_file->getCloudinaryURL(318,195)}" alt="Image thumbnail for challenge entitled {Translation::t($challenge, 'category_name')|strip_tags}" />{else}<span class="hidden">{Translation::t($challenge, 'category_name')|strip_tags}</span>{/if}
            </a>
            {assign var=countdownValue value=$challenge->getCurrentPhaseCountdown()}
            {if $countdownValue gt 0}
              <div class="b-challenge__phase-timer mdl-panel__timer-container">
                <span class="mdl-icon -s"><svg><use href="#overdue"></use></svg></span>
                <span>{"Phase ending in"|gettext}</span>

                <div class="b-countdown i-countdown mdl-panel__timer-countdown" style="display:none;" data-countdown="{$countdownValue}">
                  <div class="b-countdown__metric i-countdown__daysContainer mdl-panel__timer-metric">
                    <span class="b-countdown__metric-value i-countdown__days mdl-panel__timer-days">20</span>
                    <span class="b-countdown__metric-descriptor i-countdown__daysLabelPlural mdl-panel__timer-days-label">{"days"|gettext} / </span>
                    <span class="b-countdown__metric-descriptor i-countdown__daysLabelSingular mdl-panel__timer-days-label">{"day"|gettext} / </span>
                  </div>
                  <div class="b-countdown__metric mdl-panel__timer-metric" date-countdown="{$challenge->getCurrentPhaseCountdown()}">
                    <span class="b-countdown__metric-value i-countdown__hours mdl-panel__timer-hours">10</span>
                    <span class="b-countdown__metric-value-separator i-countdown__blinker mdl-panel__timer-separator">:</span>
                    <span class="b-countdown__metric-value i-countdown__minutes mdl-panel__timer-minutes">20</span>
                    <span class="b-countdown__metric-value-separator i-countdown__blinker mdl-panel__timer-separator">:</span>
                    <span class="b-countdown__metric-value i-countdown__seconds mdl-panel__timer-seconds">48</span>
                  </div>
                </div>
              </div>
            {/if}
            {if $isArchived && $isClosed}
                <div class="b-challenge-label b-challenge-label-archived both">{"Archived"|gettext}</div>
                <div class="b-challenge-label b-challenge-label-ended both">{"Closed"|gettext}</div>
            {elseif $isArchived}
                <div class="b-challenge-label b-challenge-label-archived">{"Archived"|gettext}</div>
            {elseif $isClosed}
                <div class="b-challenge-label b-challenge-label-ended">{"Closed"|gettext}</div>
            {/if}
            {if $isUserCreated}
              <div class="mdl-panel__label-container">
                <div class="mdl-panel__label -user-created">
                  <span class="mdl-icon -s"><svg><use href="#user"></use></svg></span>
                  {assign var="createdName" value=($challenge->data.category_createdby === $user->id) ? gettext('Me') : $createdByUsers[$challenge->data.category_createdby]->getDisplayName()}
                  {"Created by: %s"|gettext|sprintf:$createdName}
                </div>
              </div>
            {/if}
        </div>
        <div class="b-challenge__info mdl-panel__body">
            <div class="b-challenge__category type-style-captionM">                
              {foreach $challenge->getGlobalCategories() as $category}
                {$category->joined['obj_challengecategory_category']->data['globalcategory_name']}
              {foreachelse}
                &nbsp;
              {/foreach}
            </div>
            <div class="b-challenge__title-wrap{if Translation::t($challenge, 'category_name')|count_characters > 50} b-challenge__title-wrap-longtitle{/if}">
                <a class="b-challenge__title-link" href="/category/{$challenge->id}">
                    <h3 data-id="{$challenge->id}" class="b-challenge__title i-challenge__title type-style-subHeader-L">{Translation::t($challenge, 'category_name')}</h3>
                </a>
            </div>
            <div class="b-challenge__excerpt i-challenge__excerpt" id="challenge_excerpt-{$challenge->id}">
                <p>{Translation::t($challenge, 'category_description')|strip_tags}</p>
                <div class="b-challenge__excerpt-overlay"></div>
            </div>

            <div class="b-challenge__metrics mdl-panel__stats">
                <div class="b-challenge__metric mdl-panel__stat">
                    <span class="b-challenge__metric-icon b-challenge__metric-icon--ideas mdl-icon -s"><svg><use href="#idea"></use></svg></span>
                    <span class="b-challenge__metric-value">{$challenge->stats.ideasPlusChildren|kize}</span>
                </div>
                <div class="b-challenge__metric mdl-panel__stat">
                    <span class="b-challenge__metric-icon b-challenge__metric-icon--likes mdl-icon -s"><svg><use href="#thumbs-up"></use></svg></span>
                    <span class="b-challenge__metric-value">{$challenge->stats.votesPlusChildren|kize}</span>
                </div>
                <div class="b-challenge__metric mdl-panel__stat">
                    <span class="b-challenge__metric-icon b-challenge__metric-icon--comments mdl-icon -s"><svg><use href="#comment"></use></svg></span>
                    <span class="b-challenge__metric-value">{$challenge->stats.commentsPlusChildren|kize}</span>
                </div>
                <div class="b-challenge__metric mdl-panel__stat">
                    <span class="b-challenge__metric-icon b-challenge__metric-icon--participants mdl-icon -s"><svg><use href="#team"></use></svg></span>
                    <span class="b-challenge__metric-value">{$challenge->stats.usersPlusChildren|kize}</span>
                </div>
            </div>
        </div>

        {if $challenge->data['category_archived'] == 2}
            <a class="b-challenge__link-button  mdl-button -primary" href="/category/{$challenge->id}">{"View"|gettext}</a>
        {elseif $challenge->getAccess()->getData('showClosed')}
            <a class="b-challenge__link-button  mdl-button -primary" href="/category/{$challenge->id}">{"View"|gettext}</a>
        {else}
          {if $isUserCreated && ($challenge->data.category_createdby === $user->id || in_array($user->user_usertype->id, [1,2]))}
            <div class="mdl-panel__button-container">
              <a class="mdl-button -primary" href="/category/{$challenge->id}">{"Join In"|gettext}</a>
              <button type="button" class="mdl-button create-challenge-trigger" data-id="{$challenge->id}" data-ak="{$user->getActionKey()}" data-title="{"Edit Challenge: %s"|gettext|sprintf:Translation::t($challenge, 'category_name')}">{"Edit"|gettext}</button>
            </div>
          {else}
            <a class="b-challenge__link-button mdl-button -primary" href="/category/{$challenge->id}">{"Join In"|gettext}</a>
          {/if}
        {/if}
        
        <aside class="mdl-panel__banner {if $isUnpublished}-active{/if}">{'Unpublished'|gettext}</aside>
        
    </div>
    {/if}
  {/if}
{/foreach}

<script>
	jQuery(function() {
		setTimeout(function() {
			jQuery('.b-challenge__title').each(function() {
				var h = jQuery(this).height();
				var lh = parseInt(jQuery(this).css('line-height'));
				
				var challengeId = jQuery(this).data('id');
				
				if(h / lh == 3) {
					jQuery('#challenge_excerpt-' + challengeId).addClass('b-challenge__excerpt-longtitle');
				} else if(h / lh > 3) {
					jQuery('#challenge_excerpt-' + challengeId).addClass('b-challenge__excerpt-longesttitle');
				}
			})
		}, 500);
	})
</script>

<script>
    challengeBrowserAttachClicks();
</script>