{assign var=parentCategory value=Category::getParent($cPost->category)}

<div id="milestone_timeline" class="milestone_timeline mdl-milestone-timeline-container">
    <div class="milestone_timeline_inner mdl-milestone-timeline">
    {assign var=boxLeft value=54}
    {assign var=boxWidth value=2*$dimensions.progress_bar_width+55}
    
    
    {foreach from=$milestones item=milestone name=milestonesLoop}
    
    {assign var=showLabelIcon value=0}
    
    {if $show_author_message !== null || $show_user_message !== null}
    	{assign var=showLabelIcon value=1}
    {/if}
    
    {if $milestone->isCurrentShallow()}
    	{assign var=currentId value=$milestone->id}
    {/if}
    
    {if $smarty.foreach.milestonesLoop.first}
    <div class="milestoneOuterStart" style="width:{$boxWidth-$dimensions.progress_bar_width}px;">
        <div
          id="milestoneCircle-{$milestone->id}"
          class="
            milestoneCircle
            mdl-milestone-timeline__circle
            {if $milestone->isReachedShallow() || $milestone->isCurrentShallow()}milestoneInfoToggle -passed{/if}
          "
          data-id="{$milestone->data.milestone_id}"
        >
            <div id="milestoneCircleFill_{$milestone->data.milestone_id}" class="milestoneCircleFill mdl-milestone-timeline__icon" style="width:100%;">
              <span class="mdl-icon"><svg><use href="#rocket"></use></svg></span>
            </div>
        </div>
        {if $milestone->description}
        	<input type="hidden" class="milestone-circle-tooltip" data-id="{$milestone->id}" value='{str_replace("\n", "", $milestone->description)}' />
        {/if}
        <div class="clear"></div>
        <span>{$milestone->data.milestone_name}</span>
    </div>
    {else if $smarty.foreach.milestonesLoop.last}
    <div class="milestoneOuterLast {if !$milestone->isReachedShallow() && !$milestone->isCurrentShallow()}milestoneIncomplete{/if}" style="left:{$boxLeft}px;width:{$boxWidth-$dimensions.progress_bar_width}px;">
        <div class="progressBarOuter" style="width:{$dimensions.progress_bar_width}px;">
            <div id="progressBarLabel{$milestone->data.milestone_id}" class="progressBarLabel mdl-milestone-timeline__progress-label {if $milestone->getConditionType() eq 'review'}progressBarLabelReview{/if}" style="{if $milestone->getConditionType() eq 'review' || $milestone->getConditionType() eq 'elaborate' || $cPost->moderationStatus eq 5}position:relative;margin:auto;left:0;{/if} {if !$milestone->isCurrentShallow()}visibility:hidden;{/if} {if !$showLabelIcon}background-image:none;padding-right:5px;cursor:default;{/if}">
            	{if $cPost->moderationStatus eq 5}
            		{if $timeLimit && !$timeLeft.rejected}
            			{"Expired"|gettext}
            		{else}
            			{"Idea not approved"|gettext}
            		{/if}
            	{else}
            		{$milestone->getLabelInbetween()}
            	{/if}
            	
	            {if $milestone->getConditionType eq 'score' || $milestone->getConditionType() eq 'elaborate' || $milestone->getConditionType() eq 'review'}
	            <div class="progressBarLabel-arrow mdl-milestone-timeline__progress-label-arrow" style="{if !$milestone->isCurrentShallow()}visibility:hidden;{/if}{if $milestone->getConditionType() eq 'elaborate' || $cPost->moderationStatus eq 5 || $milestone->getConditionType() eq 'review'}left:50%;transform:translateX(-50%);{if $cPost->moderationStatus neq 5}margin-left:-10px;{/if}{/if}"></div>
	            {/if}
            </div>
            {if $milestone->getConditionType() eq 'review' && $milestone->isCurrentShallow() || ($cPost->moderationStatus eq 5 && $milestone->isCurrentShallow())}
            <div class="milestoneApprovalDivider" style="{if $cPost->moderationStatus eq 5}height:31px;top:2px;{/if}"></div>
            {/if}
            
            {if $milestone->getConditionType() eq 'score' && !$cPost->hasBlindVoting()}
                {if $cPost->getVotingScheme() eq 'up'}
                <div class="progressBarLabel-votes" {if !$milestone->isCurrentShallow()}style="visibility:hidden;"{/if}>
                    <strong>{$currentScore}/{$milestone->getTarget()}</strong><br />{"Votes"|gettext}
                </div>
                {elseif $currentScore gt 0}
                <div class="progressBarLabel-votes" {if !$milestone->isCurrentShallow()}style="visibility:hidden;"{/if}>
                    <strong>{$currentScore}/{$milestone->getTarget()}</strong><br />{"Average"|gettext}
                </div>  
                {/if}
            {/if}
            
            <div id="progressBarInner-{$milestone->id}" class="progressBarInner mdl-milestone-timeline__progress {if $cPost->moderationStatus eq 5}-future{elseif $milestone->isCurrentShallow()}-in-progress{/if}">
                <div id="milestoneProgressCompleted_{$milestone->data.milestone_id}" class="milestoneProgressCompleted" style="width:{$milestone->getCompletedWidth($milestones)}%;">
                    {if $milestone->isCurrentShallow()}
	                    {if $cPost->moderationStatus neq 5}
	                    <div class="milestone-progress-arrow" style="{if $milestone->getCompletedWidth($milestones) <= 3}right:auto;{/if}width:4px;">
	                    	<div class="b-milestone-progress-arrow--top"></div>
	                    	<div class="b-milestone-progress-arrow--bottom"></div>
	                    </div>
	                    {/if}
                    {/if}
                </div>
            </div>
        </div>

        <div
          id="milestoneCircle-{$milestone->id}"
          class="
            milestoneCircle
            mdl-milestone-timeline__circle
            {if $milestone->isReachedShallow() || $milestone->isCurrentShallow()}milestoneInfoToggle -passed{/if}
            {if $milestone->isCurrentShallow() && $cPost->moderationStatus neq 5}-in-progress{else if $cPost->moderationStatus eq 5 && !$milestone->isReachedShallow()}-future{/if}
          "
          data-id="{$milestone->data.milestone_id}"
        >
            <div id="milestoneCircleFill_{$milestone->data.milestone_id}" class="milestoneCircleFill mdl-milestone-timeline__icon" style="width:{if $milestone->isReachedShallow() || $milestone->isCurrentShallow()}100{else}auto{/if}%;">                
              {if $milestone->getConditionType() eq 'review'}
                {assign var='iconName' value='confirm'}
              {else if $milestone->getConditionType() eq 'score'}
                {assign var='iconName' value='thumbs-up'}
              {else if $milestone->getConditionType() eq 'elaborate'}
                {assign var='iconName' value='edit'}
              {/if}
              <span class="mdl-icon"><svg><use href="#{$iconName}"></use></svg></span>
            </div>
        </div>
        {if $milestone->description}
        	<input type="hidden" class="milestone-circle-tooltip" data-id="{$milestone->id}" value='{str_replace("\n", "", $milestone->description)}' />
        {/if}
        <div class="clear"></div>
        <span>{$milestone->data.milestone_name}</span>
    </div>
    {else}
    <div class="milestoneOuter {if !$milestone->isReachedShallow() && !$milestone->isCurrentShallow()}milestoneIncomplete{/if}" style="left:{$boxLeft}px;width:{$boxWidth}px;{if $milestone->isCurrentShallow()}z-index:9;{/if}">
        <div class="progressBarOuter" style="width:{$dimensions.progress_bar_width}px;">
            <div
              style="{if $milestone->getConditionType() eq 'review' || $milestone->getConditionType() eq 'elaborate' || $cPost->moderationStatus eq 5}position:relative;margin:auto;left:0;{/if} {if !$milestone->isCurrentShallow()}visibility:hidden;{/if} {if !$showLabelIcon}background-image:none;padding-right:5px;cursor:default;{/if}"
              id="progressBarLabel{$milestone->data.milestone_id}"
              class="progressBarLabel {if $milestone->getConditionType() eq 'review'}progressBarLabelReview{/if} mdl-milestone-timeline__progress-label"
            >
            	{if $cPost->moderationStatus eq 5}
            		{if $timeLimit && !$timeLeft.rejected}
            			{"Expired"|gettext}
            		{else}
            			{"Idea not approved"|gettext}
            		{/if}
            	{else}
            		{$milestone->getLabelInbetween($cPost->id)}
            	{/if}
              {if $milestone->getConditionType() eq 'score' || $milestone->getConditionType() eq 'elaborate' || $milestone->getConditionType() eq 'review'}
                  <div class="progressBarLabel-arrow mdl-milestone-timeline__progress-label-arrow" style="{if !$milestone->isCurrentShallow()}visibility:hidden;{/if}{if $milestone->getConditionType() eq 'elaborate' || $cPost->moderationStatus eq 5 || $milestone->getConditionType() eq 'review'}left:50%;transform:translateX(-50%);{if $cPost->moderationStatus neq 5}{/if}{/if}"></div>
              {/if}
                
            </div>
            {if ($milestone->getConditionType() eq 'review' && $milestone->isCurrentShallow()) || ($cPost->moderationStatus eq 5 && $milestone->isCurrentShallow())}
            <div class="milestoneApprovalDivider" style="{if $cPost->moderationStatus eq 5}height:31px;top:2px;{/if}"></div>
            {/if}
            
            {if $milestone->getConditionType() eq 'score' && !$cPost->hasBlindVoting()}
                {if $cPost->getVotingScheme() eq 'up'}
                <div class="progressBarLabel-votes" {if !$milestone->isCurrentShallow()}style="visibility:hidden;"{/if}>
                    <strong>{$currentScore}/{$milestone->getTarget()}</strong><br />{"Votes"|gettext}
                </div>
                {elseif $currentScore gt 0}
                <div class="progressBarLabel-votes" {if !$milestone->isCurrentShallow()}style="visibility:hidden;"{/if}>
                    <strong>{$currentScore}/{$milestone->getTarget()}</strong><br />{"Average"|gettext}
                </div>  
                {/if}
            {/if}
            
            <div id="progressBarInner_{$milestone->id}" class="progressBarInner mdl-milestone-timeline__progress {if $cPost->moderationStatus eq 5}-future{elseif $milestone->isCurrentShallow()}-in-progress{/if}">
                <div id="milestoneProgressCompleted_{$milestone->data.milestone_id}" class="milestoneProgressCompleted mdl-milestone-timeline__progress-completed {if $milestone->getCompletedWidth($milestones) > 0}-passed{/if}" style="width:{if $milestone->getCompletedWidth($milestones)}{$milestone->getCompletedWidth($milestones)}%{else if $milestone->isCurrentShallow()}5px{else}auto{/if};">
                    {if $milestone->isCurrentShallow()}
	                    {if $cPost->moderationStatus neq 5}
	                    <div class="milestone-progress-arrow" style="{if $milestone->getCompletedWidth($milestones) <= 3}right:0;{/if}width:2px;">
	                    	<div class="b-milestone-progress-arrow--top"></div>
	                    	<div class="b-milestone-progress-arrow--bottom"></div>
	                    </div>
	                    {/if}
                    {/if}
                </div>
            </div>
        </div>
        
        <div
          id="milestoneCircle-{$milestone->id}"
          class="
            milestoneCircle
            mdl-milestone-timeline__circle
            {if $milestone->isReachedShallow() || $milestone->isCurrentShallow()}milestoneInfoToggle -passed{/if}
            {if $milestone->isCurrentShallow() && $cPost->moderationStatus neq 5}-in-progress{else if $cPost->moderationStatus eq 5 && !$milestone->isReachedShallow()}-future{/if}
          "
          data-id="{$milestone->data.milestone_id}"
        >
            <div id="milestoneCircleFill_{$milestone->data.milestone_id}" class="milestoneCircleFill mdl-milestone-timeline__icon" style="width:{if $milestone->isReachedShallow() || $milestone->isCurrentShallow()}100{else}auto{/if}%;">
              {if $milestone->getConditionType() eq 'review'}
                {assign var='iconName' value='confirm'}
              {else if $milestone->getConditionType() eq 'score'}
                {assign var='iconName' value='thumbs-up'}
              {else if $milestone->getConditionType() eq 'elaborate'}
                {assign var='iconName' value='edit'}
              {/if}
              <span class="mdl-icon"><svg><use href="#{$iconName}"></use></svg></span>
            </div>
        </div>
		{if $milestone->description}
			<input type="hidden" class="milestone-circle-tooltip" data-id="{$milestone->id}" value='{str_replace("\n", "", $milestone->description)}' />
		{/if}
        <div class="clear"></div>
        <span>{$milestone->data.milestone_name}</span>
    </div>
    {assign var=boxLeft value=$boxLeft+$dimensions.progress_bar_width+54}
    {/if}
    {/foreach}
    
    </div>
</div>

{if $show_author_message !== null}
<div class="milestone-viewer-box mdl-milestone-timeline__info">
    <div class="milestone-viewer-box-close">
      <span class="mdl-icon -s"><svg><use href="#cancel"></use></svg></span>
    </div>
    
    <div id="milestone-viewer-box-0" class="milestone-viewer-box-info mdl-alert">
        <p>{$show_author_message}</p>
    </div>
    
    {if $currentMilestone->getConditionType() eq 'elaborate'}
    <div class="b-milestone__idea-edit-button {if $cPost->moderationStatus neq 5}edit_idea_trigger{/if}" style="background-color:#{if $cPost->moderationStatus eq 5}ddd{else}{$buttonCol}{/if};">
    	{"Edit your idea"|gettext}
    </div>
    {/if}
    
    {if $cPost->moderationStatus eq 5}
    <div class="mdl-alert">
    	{"This idea did not complete all the milestones within the time limit and has now been closed."|gettext}
    </div>
    {/if}
    
    {foreach from=$milestones item=milestone name=milestonesLoop}
        <div id="milestone-viewer-box-{$milestone->data.milestone_id}" class="milestone-viewer-box-info mdl-alert">
        	<span class="milestone-stage-name">
		    	{if $cPost->hasReachedFinalMilestone()}
		    		{'Approved'|gettext}
		    	{else}
		    		{$currentMilestone->getLabelInbetween()}
		    	{/if}
        	</span>
        	<br />
            <div>{$milestone->milestone_authormessage}</div>
        </div>
    {/foreach}
    
</div>
{else if $show_user_message !== null}
<div class="milestone-viewer-box mdl-milestone-timeline__info">
    <div class="milestone-viewer-box-close">
      <span class="mdl-icon -s"><svg><use href="#cancel"></use></svg></span>
    </div>

    <div class=" mdl-alert">
      <span class="milestone-stage-name">
        {if $cPost->hasReachedFinalMilestone()}
          {'Approved'|gettext}
        {else}
          {$currentMilestone->getLabelInbetween()}
        {/if}
      </span>
      <br />
      <div>
          {$show_user_message}
      </div>
    </div>
</div>
{else if $show_author_message === null && $show_author_message === null && $cPost->moderationStatus eq 5}
{assign var=timeData value=Milestonetime::getTimeLeft($cPost, $parentCategory->milestonesTimeLimit)}
<div class="milestone-viewer-box mdl-milestone-timeline__info">
    <div class="mdl-alert">
    		{if $parentCategory->milestonesTimeLimit}
    			{if $timeData.ongoing}
    				{"This idea has not been approved"|gettext}
    			{else}
    				{"This idea did not complete all the milestones within the time limit and has now been closed."|gettext}
    			{/if}
    		{else}
    			{"This idea has not been approved"|gettext}
    		{/if}  
    </div>
</div>
{/if}

<input type="hidden" id="show_label_icon" value="{(int)$showLabelIcon}" />