@import com.gu.contentatom.renderer.utils.GuardianDateFormatter
@import com.gu.contentatom.renderer.utils.Implicits._

@(atom: com.gu.contentatom.thrift.Atom,
        data: com.gu.contentatom.thrift.atom.timeline.TimelineAtom
)(implicit conf: com.gu.contentatom.renderer.ArticleConfiguration)

@fragments.atoms.html.snippet(
  atom.id,
  className = "timeline",
  label = data.typeLabel.getOrElse("Timeline"),
  headline = atom.title.getOrElse("")
){
  @for(description <- data.description) {
    <div class="atom--snippet__description">@Html(description)</div>
  }
  @for(item <- data.events) {
    <div class="atom--snippet__item">
      <time class="atom--snippet__event-date" datetime="@{GuardianDateFormatter.toMachineValue(item.date)}">
        @item.renderFormattedDate(item.date, item.dateFormat)
      </time>
      @item.toDate.map { maybeDate =>
        –<time class="atom--snippet__event-date" datetime="@{GuardianDateFormatter.toMachineValue(maybeDate)}">
          @item.renderFormattedDate(maybeDate, item.dateFormat)
        </time>
      }
      <div class="atom--snippet__heading"><b>@item.title</b></div>
      @item.body.map { body => @Html(body) }
    </div>
  }
}