{{define "title"}}
  {{ .Title }}
{{end}}

{{define "header"}}
  <a href="/{{ .Category.Slug }}/" class="btn btn-dark">
    <i class="fas fa-chevron-left"></i>
    {{ .Category.Name }}
  <a>
  <h1>
    {{ .Title }}
  </h1>
{{end}}

{{define "content"}}
  {{ .HTML }}
{{end}}

{{define "footer"}}
  <a href="https://github.com/{{.Category.Repo}}/blob/{{.Category.Branch}}/{{.Category.Dir}}/{{.File}}" class="btn btn-dark" target="_blank">
    <i class="fab fa-github"></i>
    Read on Github
  <a>

  <a href="https://github.com/{{.Category.Repo}}/edit/{{.Category.Branch}}/{{.Category.Dir}}/{{.File}}" class="btn btn-dark" target="_blank">
    <i class="far fa-edit"></i>
    Edit
  <a>

  <a href="https://github.com/{{.Category.Repo}}/issues/new" class="btn btn-dark" target="_blank">
    <i class="far fa-comment"></i>
    Comment
  <a>

  <a href="https://raw.githubusercontent.com/{{.Category.Repo}}/{{.Category.Branch}}/{{.Category.Dir}}/{{.File}}" class="btn btn-dark"
  target="_blank">
    <i class="far fa-file-code"></i>
    View source
  <a>

  <div>
    <a href="/{{ .Category.Slug }}/" class="btn btn-dark">
      <i class="fas fa-chevron-left"></i>
      {{ .Category.Name }}
    <a>
  </div>
{{end}}


{{block "underground" .}}
  {{ if .Authors }}
    <div class="bg-white text-muted floor">
      <span class="alert alert-light" style="margin-right: 20px">
        <i class="fas fa-plus"></i>
        created:
        {{ .CreatedAt.Format "2006-01-02 (Mon)" }}
      </span>
      <span class="alert alert-light">
        <i class="far fa-edit"></i>
        updated:
        {{ .UpdatedAt.Format "2006-01-02 (Mon)" }}
      </span>
      <span class="alert alert-light">
        <i class="far fa-eye"></i>
        views:
        {{ .Views }}
      </span>
    </div>

    <div class="container-fluid bg-white text-body footer">
      <h2>Contributors</h2>
      {{ range .Authors }}
        <a href="https://github.com/{{ .Login }}" target="_blank" class="avatar">
          <img src="{{ .Avatar }}" alt="{{ .Login }}">
        </a>
      {{end}}
    </div>
  {{end}}

  {{ if .Alerts }}
    <div class="container-fluid bg-dark text-white footer">
      <h2>How can I contribute?</h2>
      <p>
        There is an output of
        <a href="https://github.com/errata-ai/vale" target="_blank">vale linter</a>.
        Please, help me to fix these issues to make the article better.
        You can change anything, not only issues from the table.
      </p>

      <div style="margin-bottom: 20px">
        <a href="https://github.com/{{.Category.Repo}}/edit/{{.Category.Branch}}/{{.Category.Dir}}/{{.File}}" class="btn btn-success" target="_blank">
          <i class="far fa-heart"></i>
          Help
        <a>
      </div>

      <table class="table table-sm" style="text-align: left">
        <tr>
          <th>line</th>
          <th>level</th>
          <th>message</th>
          <th>check</th>
        </tr>
        {{ range .Alerts }}
          <tr>
            <td>{{ .Line }}:{{ .Span }}</td>
            <td class="level-{{ .Severity }}">{{ .Severity }}</td>
            <td>{{ .Message }}</td>
            <td>{{ .Check }}</td>
          </tr>
        {{end}}
      </table>
    </div>
  {{end}}

{{end}}