{{define "content"}}
<nav aria-label="breadcrumb">
  <ul>
    <li><a href="/{{.Repo.Name}}">{{.Repo.Name}}</a></li>
    <li><a href="/{{.Repo.Name}}/bugs">Bugs</a></li>
    <li aria-current="page">{{.ID}}</li>
  </ul>
</nav>

<header>
  <h2>
    {{if eq .Status "open"}}
    <svg class="bug-status-icon bug-status-icon-open" aria-label="Open bug" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke-width="2">
      <circle cx="8" cy="8" r="6" />
    </svg>
    {{else if eq .Status "closed"}}
    <svg class="bug-status-icon bug-status-icon-closed" aria-label="Closed bug" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke-width="2">
      <circle cx="8" cy="8" r="6" />
      <path d="M5 8 l2 2 l4 -4" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    {{end}}
    {{.Subject}}
  </h2>
  {{if .Labels}}
  <p>
    Labels: {{range $i, $label := .Labels}}{{if $i}} {{end}}<span class="bug-label" style="--label-color: {{$label.Color}}">{{$label.Name}}</span>{{end}}
  </p>
  {{end}}
</header>

<section aria-labelledby="timeline-heading">
  <h3 id="timeline-heading" class="visually-hidden">Timeline</h3>
  
  {{range .Timeline}}
  {{if eq .Type "create"}}
  <article id="{{.ID}}">
    <header>
      <p>{{if .AuthorAvatar}}<img src="{{.AuthorAvatar}}" alt="" class="avatar avatar-timeline" loading="lazy" referrerpolicy="no-referrer">{{end}}<strong>{{.Author}}</strong> opened <time datetime="{{.Timestamp | rfc3339}}" data-tooltip="{{.Timestamp | formatDate}}">{{.Timestamp | relativeTime}}</time>{{if $.Edited}} <em>(edited)</em>{{end}}</p>
    </header>
    {{if .Message}}
    {{.Message}}
    {{else}}
    <em class="muted">No description provided.</em>
    {{end}}
  </article>
  
  {{else if eq .Type "comment"}}
  <article id="{{.ID}}">
    <header>
      <p>{{if .AuthorAvatar}}<img src="{{.AuthorAvatar}}" alt="" class="avatar avatar-timeline" loading="lazy" referrerpolicy="no-referrer">{{end}}<strong>{{.Author}}</strong> commented <time datetime="{{.Timestamp | rfc3339}}" data-tooltip="{{.Timestamp | formatDate}}">{{.Timestamp | relativeTime}}</time>{{if .Edited}} <em>(edited)</em>{{end}}</p>
    </header>
    {{if .Message}}
    {{.Message}}
    {{else}}
    <em class="muted">No comment provided.</em>
    {{end}}
  </article>
  
  {{else if eq .Type "title"}}
  <article id="{{.ID}}">
    <p>{{if .AuthorAvatar}}<img src="{{.AuthorAvatar}}" alt="" class="avatar avatar-timeline" loading="lazy" referrerpolicy="no-referrer">{{end}}<strong>{{.Author}}</strong> changed the title from <del>{{.PreviousTitle}}</del> to <ins>{{.Title}}</ins> <time datetime="{{.Timestamp | rfc3339}}" data-tooltip="{{.Timestamp | formatDate}}">{{.Timestamp | relativeTime}}</time></p>
  </article>
  
  {{else if eq .Type "status"}}
  <article id="{{.ID}}">
    <p>{{if .AuthorAvatar}}<img src="{{.AuthorAvatar}}" alt="" class="avatar avatar-timeline" loading="lazy" referrerpolicy="no-referrer">{{end}}<strong>{{.Author}}</strong> {{.Status}} the bug <time datetime="{{.Timestamp | rfc3339}}" data-tooltip="{{.Timestamp | formatDate}}">{{.Timestamp | relativeTime}}</time></p>
  </article>
  
  {{else if eq .Type "labels"}}
  <article id="{{.ID}}">
    <p>
      {{if .AuthorAvatar}}<img src="{{.AuthorAvatar}}" alt="" class="avatar avatar-timeline" loading="lazy" referrerpolicy="no-referrer">{{end}}<strong>{{.Author}}</strong>
      {{if .AddedLabels}}
      added label{{if gt (len .AddedLabels) 1}}s{{end}}
      {{range $i, $label := .AddedLabels}}{{if $i}}, {{end}}<span class="bug-label" style="--label-color: {{$label.Color}}">{{$label.Name}}</span>{{end}}
      {{end}}
      {{if and .AddedLabels .RemovedLabels}} and {{end}}
      {{if .RemovedLabels}}
      removed label{{if gt (len .RemovedLabels) 1}}s{{end}}
      {{range $i, $label := .RemovedLabels}}{{if $i}}, {{end}}<span class="bug-label" style="--label-color: {{$label.Color}}">{{$label.Name}}</span>{{end}}
      {{end}}
      <time datetime="{{.Timestamp | rfc3339}}" data-tooltip="{{.Timestamp | formatDate}}">{{.Timestamp | relativeTime}}</time>
    </p>
  </article>
  {{end}}
  {{end}}
</section>
{{end}}