<%namespace name="components" file="/components.html"/>
<%namespace name="state" file="/poll/state.html"/>

<%def name="row(tile, milestone)">
    <li class="content_box">
      <div>
        %if milestone.time:
        <span class="milestone_row_date">
          ${h.date_tag(milestone.time, format=u'medium')|n}
        </span>
        %endif
        <h3>
          <a class="link" href="${h.entity_url(milestone)}">
            ${milestone.title}
          </a>
        </h3>
        <div class="milestone_row_content meta">
          ${h.truncate(milestone.text, 280, whole_word=True)}
          <a href="${h.entity_url(milestone)}" class="more_link">
            ${_(u'See more')}
          </a>
        </div>
      </div>
    </li>
</%def>

<%def name="header(tile, milestone)">
    <h3 id="milestone_title">
        <span class="date">
            %if milestone.time:
            ${h.date_tag(milestone.time, format=u'medium')|n}
            %else:
            ${_(u'(unknown)')}
            %endif
        </span>
        <br />
        ${milestone.title}
    </h3>
</%def>

<%def name="select(tile, options, name)">
  <select name="${name}">
    %for (id, name, selected) in options:
      %if selected:
        <option value="${id}" selected="selected">${name}</option>
      %else:
        <option value="${id}">${name}</option>
      %endif
    %endfor
  </select>
</%def>

<%def name="timeline(tile, milestones)">
  <script>
    var Timeline_ajax_url='${h.base_url('/timeline/timeline_ajax/simile-ajax-api.js', None)}';
    var Timeline_urlPrefix='${h.base_url('/timeline/timeline_js/', None)}';
    var Timeline_parameters='bundle=true';
  </script>
  <script src="/timeline/timeline_js/timeline-api.js"></script>
  <script>
    var tl;
    $(function() {
      $(window).load(function() {
        SimileAjax.History.enabled = false;
        var eventSource = new Timeline.DefaultEventSource();
        Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) {
          document.location.href=evt.getLink();
        }
        var bandInfos = [
          Timeline.createBandInfo({
            eventSource:    eventSource,
            width:          "80%",
            intervalUnit:   Timeline.DateTime.DAY,
            intervalPixels: 50
          }),
          Timeline.createBandInfo({
            eventSource:    eventSource,
            width:          "20%",
            intervalUnit:   Timeline.DateTime.MONTH,
            intervalPixels: 200
          })
          ];
        bandInfos[1].syncWith = 0;
        bandInfos[1].highlight = true;
        tl = Timeline.create(document.getElementById("timeline"), bandInfos);
        eventSource.loadJSON({
          'dateTimeFormat': 'iso8601',
          'events': [
            %for milestone in milestones:
              %if milestone.time is not None:
              {
                'start': "${milestone.time.isoformat()}Z",
                'icon': "/img/icons/milestone_12.png",
                'title': "${milestone.title}",
                'link': "${h.entity_url(milestone)}"
              },
              %endif
            %endfor
          ]
          }, '.');
      });
    });
  </script>

  <div role="presentation" id="timeline_wrapper" style="margin-bottom: 20px;">
      <div id="timeline" style="height: 280px;"></div>
  </div>
</%def>
