{assign var=access value=Category::getParent($categoryId)->getAccess()}

<section class="b-admin-milestones-container">
	{assign var=progressBarWidth value=number_format($dimensions.progress_bar_width, 3, '.', '')}
	{assign var=boxLeft value=54}
	{assign var=boxWidth value=2*$progressBarWidth+55}
	{foreach from=$milestones item=milestone name=milestonesLoop}
	
		{if !$smarty.foreach.milestonesLoop.first}
		<div class="b-admin-milestone-item b-admin-milestone-line mdl-milestone-timeline__progress" style="width:{$progressBarWidth}px;">
			<span id="milestone_label_inbetween_{$milestone->id}" class="milestone_label_inbetween type-style-captionM" data-dbid="{$milestone->id}">
				{$milestone->getLabelInBetween()}
			</span>
			<input style="display:none;" placeholder="{$milestone->getDefaultLabelInBetween()}" id="milestone_label_input_{$milestone->id}" type="text" class="b-admin-milestone-label-input" name="milestone_label_inbetween" data-dbid="{$milestone->id}" data-type="{$milestone->getConditionType()}" value="{$milestone->getLabelInBetween()}" />
			
			{if $milestone->getConditionType() eq 'review'}
				<div class="b-milestone-approval-divider"></div>
			{/if}
		</div>
		{/if}		
		
    <div
      data-order="{$smarty.foreach.milestonesLoop.iteration}"
      class="
        b-admin-milestone-item
        b-milestone-circle
        edit_milestone
        {if !$milestone->id}milestone_circle_grey b-milestone-blank -future{/if}
        mdl-milestone-timeline__circle
      "
      data-dbid="{$milestone->id}"
    >
			<div class="b-milestone-circle__background mdl-milestone-timeline__icon">
        {if $milestone->getConditionType() eq 'start'}
          {assign var='iconName' value='rocket'}
        {else if $milestone->getConditionType() eq 'score'}
          {assign var='iconName' value='thumbs-up'}
        {else if $milestone->getConditionType() eq 'elaborate'}
          {assign var='iconName' value='edit'}
        {else if $milestone->getConditionType() eq 'review'}
          {assign var='iconName' value='confirm'}
        {/if}
        <span class="mdl-icon"><svg><use href="#{$iconName}"></use></svg></span>
      </div>
			<span>
				<a id="edit_milestone_{$milestone->id}" class="edit_milestone" data-dbid="{$milestone->id}" href="#">{$milestone->name}</a>
			</span>
		</div>
	{/foreach}
	
	<div class="b-admin-milestone-item b-admin-milestone-line mdl-milestone-timeline__progress" style="width:{$progressBarWidth}px;"></div>
	
	<div class="b-admin-milestone-item b-milestone-circle b-milestone-circle--grey mdl-milestone-timeline__circle -future" id="add_milestone">
		<div class="mdl-milestone-timeline__icon">
      <span class="mdl-icon"><svg><use href="#add"></use></svg></span>
    </div>
		<span class="b-admin-milestone-add-label" id="add_milestone_label">{"add"|gettext}</span>
	</div>
</section>

<script>
	IncubatorApp.init({
		category_id: {$categoryId},
		progress_bar_width: {$progressBarWidth},
		milestone_width:0,
		toRight: {(int)$toRight},
		milestones: {$milestones_json},
		voting_type: "{$access->getData('votingScheme')}"
	});
</script>

<script>
    
    var $draft = jQuery('.b-milestone-blank');
    
    if($draft.length) {
        jQuery('#milestone_name').on("keyup", function() {
            jQuery('#edit_milestone_0').text(jQuery('#milestone_name').val());
        });
        
        jQuery('#milestone_condition_').on("change", function() {
            var type = jQuery(this).val();
            
            $draft.find('.b-milestone-circle__background').removeClass().addClass('b-milestone-circle__background mdl-milestone-timeline__icon');

            if(type == 'score') {
                $draft
                    .find('.b-milestone-circle__background')
                    .html('<span class="mdl-icon"><svg><use href="#thumbs-up"></use></svg></span>');
            } else if(type == 'review') {
                $draft
                    .find('.b-milestone-circle__background')
                    .html('<span class="mdl-icon"><svg><use href="#confirm"></use></svg></span>');
            } else if(type == 'elaborate') {
                $draft
                    .find('.b-milestone-circle__background')
                    .html('<span class="mdl-icon"><svg><use href="#edit"></use></svg></span>');
            }
        });
    }
    
</script>