{% include "header.html" %}

<!-- Page Header-->
<header class="masthead" style="background-image: url('{{post.img_url}}')">
  <div class="container position-relative px-4 px-lg-5">
    <div class="row gx-4 gx-lg-5 justify-content-center">
      <div class="col-md-10 col-lg-8 col-xl-7">
        <div class="post-heading">
          <h1>{{ post.title }}</h1>
          <h2 class="subheading">{{ post.subtitle }}</h2>
          <span class="meta"
            >Posted by
            <a href="#">{{ post.author }}</a>
            on {{ post.date }}
          </span>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- Post Content -->
<article>
  <div class="container px-4 px-lg-5">
    <div class="row gx-4 gx-lg-5 justify-content-center">
      <div class="col-md-10 col-lg-8 col-xl-7">
        {{ post.body|safe }}

        <div class="d-flex justify-content-end mb-4">
          <!-- TODO: Editing posts-->
          <a
            class="btn btn-primary float-right"
            href="TODO: Add code to edit_post here"
            >Edit Post</a
          >
        </div>
      </div>
    </div>
  </div>
</article>

{% include "footer.html" %}
