---
title:
  type: 'string'
created_at:
  type: 'string'
image:
  type: 'hash'
content:
  type: 'string'
tags:
  type: 'array'
  default: []
---

{% assign words = content | strip_html | number_of_words %}
<div class="d-flex flex-column align-items-start justify-content-center w-100">
  <h1 class="text-primary m-0">{{- title -}}</h1>
  <p class="fst-italic pt-3 m-0">{{ created_at | date: "%B %d, %Y" }}</p>
  <small class="fst-italic pb-3">
    Reading time: {{ words | divided_by: 180.0 | round | at_least: 1 }} minutes
  </small>  
  <div class="d-flex align-items-center justify-content-start pb-2 w-100">
    {% for tag in tags %}
      <span class="card-link bg-body-color rounded-3 px-2 py-1 text-white me-2">
        {{- tag -}}
      </span>
    {% endfor %} 
  </div>
  {% render 'sutty/picture.html', 
    image:,
    img_class: 'w-100 rounded-3'
  %}
</div>