{{#tasksList}}
  <div id="project-task-{{taskId}}"
    class="task-container{{#readOnly}} read-only{{/readOnly}}{{#done}} checked{{/done}}"
    data-category="{{category}}">
    <h3 class="task-header">
        {{#isAdvancedReview}}
        <span class="icon-container container-checkbox gtm-marketing-checklist-showmore-cta">
          <svg class="icon icon-box icon-sm" role="img">
            <use xlink:href="#box"></use>
          </svg>
          <svg class="icon icon-box-check icon-sm" role="img">
            <use xlink:href="#box-check"></use>
          </svg>
          <svg class="icon icon-loader icon-sm" role="img">
            <use xlink:href="#loader"></use>
          </svg>
        </span>
        {{/isAdvancedReview}}

        {{^isAdvancedReview}}
        <a href="#" class="no-link"
          data-toggle="popover"
          data-placement="bottom"
          data-container="#marketing-checklist"
          data-trigger="focus"
          data-ga="checker">
          <span class="icon-container container-checkbox gtm-marketing-checklist-showmore-cta">
            <svg class="icon icon-box icon-sm" role="img">
              <use xlink:href="#box"></use>
            </svg>
            <svg class="icon icon-box-check icon-sm" role="img">
              <use xlink:href="#box-check"></use>
            </svg>
            <svg class="icon icon-loader icon-sm" role="img">
              <use xlink:href="#loader"></use>
            </svg>
          </span>
        </a>
        {{/isAdvancedReview}}

        <span class="marketing-checklist-item-title icon-text">
          {{title}}
          <span class="label label-warning hidden"></span>
        </span>

        {{^readOnly}}
          <span class="icon-container container-plus-minus gtm-marketing-checklist-item">
            <svg class="icon icon-chevron-down" role="img">
              <use xlink:href="#chevron-down"></use>
            </svg>
            <svg class="icon icon-chevron-up" role="img">
              <use xlink:href="#chevron-up"></use>
            </svg>
          </span>
        {{/readOnly}}
    </h3>

    <div class="task-content">
      <div>

        <div class="task-data">
          <span class="icon-container importance rating-{{importance}}">
            <svg class="icon icon-impact icon-xs" role="img">
              <use xlink:href="#impact"></use>
            </svg>
            <svg class="icon icon-impact icon-xs" role="img">
              <use xlink:href="#impact"></use>
            </svg>
            <svg class="icon icon-impact icon-xs" role="img">
              <use xlink:href="#impact"></use>
            </svg>
          </span>
          <span class="icon-text">
            {{importanceText}}
          </span>
          <span class="icon-container solvability rating-{{solvability}}">
            <svg class="icon icon-gear icon-xs" role="img">
              <use xlink:href="#gear"></use>
            </svg>
            <svg class="icon icon-gear icon-xs" role="img">
              <use xlink:href="#gear"></use>
            </svg>
            <svg class="icon icon-gear icon-xs" role="img">
              <use xlink:href="#gear"></use>
            </svg>
          </span>
          <span class="icon-text">
            {{solvabilityText}}
          </span>
          <span class="icon-text">
            {{executorText}}
          </span>
        </div>

        <div class="task-sumary">
          <h4>{{whyText}}</h4>
          {{{summary}}}
        </div>

        <div class="task-text">
          <h4>{{getItDoneText}}</h4>
          {{{text}}}
        </div>

        <div class="task-links gtm-marketing-checklist-more-info-link">
          <h4>{{externalResText}}</h4>
          <ul>
            {{{links}}}
          </ul>
        </div>
      </div>
    </div>
  </div>
{{/tasksList}}