<ul id="timeline"
    class="timeline pat-equaliser"
    metal:define-macro="timeline"
    tal:define="
      task_number python:0;
      portal_url here/portal_url;
      duedate_view nocall:here/duedate-view | nothing;
      duedates_enabled duedate_view | python:False;
      date2month_name nocall:here/@@proto/date2month_name;
      proto nocall:here/@@proto;
    "
    i18n:domain="ploneintranet"
  >
  <tal:milestone repeat="milestone view/milestones">
    <li tal:define="overdue python:duedates_enabled and duedate_view.is_overdue(milestone) or False;
                    state python:overdue and 'overdue' or milestone['finished']"
        class="section actioned state-${state}"
        title="${milestone/title}"
        >
      <tal:state_index define="global task_number python:task_number + repeat['milestone'].index">
        <h3 class="section-label">${milestone/title}</h3>
        <ul>
          <li id="item-${python:task_number + 1}"
              class="step-background"
              tal:condition="python:(repeat['milestone'].start or repeat['milestone'].end) and not milestone['tasks']"
            >
            <p class="step-label icon" />
          </li>
          <tal:tasks repeat="task milestone/tasks">
            <tal:task_number
                define="global task_number python:task_number + 1;
                        overdue python:duedates_enabled and task['overdue'];
                        state python:'closed' if task['checked'] else 'open';">
              <li id="item-${task_number}"
                  class="step-background state-${python:'overdue' if overdue else state}">
                <p class="step-label icon icon-help-circled">
                  <span class="link">
                    <a class="label-text"
                       title="${task/title}"
                       href="${task/url}#workspace-tickets"
                      >${task/title}</a>

                    <tal:history tal:condition="exists:task/obj/@@app-audit-mm-button">
                      <a tal:replace="structure task/obj/@@app-audit-mm-button" />
                    </tal:history>
                  </span>
                </p>
                <p class="step-assignee"
                   tal:define="
                    due_date task/due;
                    assignee task/obj/assignee;
                   "
                   tal:condition="assignee">
                  <a tal:replace="structure python:proto.get_avatar_tag(assignee)" />
                  <time class="date"
                        tal:condition="due_date"
                        datetime="${due_date}"
                      >${python:due_date.strftime('%d')} ${python:date2month_name(due_date, short=True)}</time>
                </p>
              </li>
            </tal:task_number>
          </tal:tasks>
        </ul>
        <p class="action icon ${milestone/icon}"
           tal:condition="not:repeat/milestone/end"
          >
          <a class="link">${milestone/transition_title}</a>
        </p>
        <p class="due-date" tal:condition="duedates_enabled">
          <span tal:replace="python:duedate_view.milestone_due_date(milestone['state']).strftime('%d %b %Y')">23 mar 2017</span>
          <strong class="warning"
                  i18n:translate=""
                  tal:condition="overdue"
          >Overdue</strong>
        </p>
      </tal:state_index>
    </li>
  </tal:milestone>
</ul>
