{% from "bootstrap5/form.html" import render_form %}
{% 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
            <!-- Changed from post.author -->
            <a href="#">{{ post.author.name }}</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 }}
        <!--Only show Edit Post button if user id is 1 (admin user) -->
        {% if current_user.id == 1 %}
        <div class="d-flex justify-content-end mb-4">
          <a
            class="btn btn-primary float-right"
            href="{{url_for('edit_post', post_id=post.id)}}"
            >Edit Post</a
          >
        </div>
        {% endif %}

        <!-- Comments Area -->
        <!-- Load the CKEditor -->
        {{ ckeditor.load() }}
        <!-- Configure it with the name of the form field from CommentForm -->
        {{ ckeditor.config(name='comment_text') }}
        <!-- Create the wtf quick form from CommentForm -->
        {{ render_form(form, novalidate=True, button_map={"submit": "primary"}) }}
        <div class="comment">
          <ul class="commentList">
            <!-- Show all comments -->
            {% for comment in post.comments: %}
            <li>
              <div class="commenterImage">
                <img
                  src="{{ comment.comment_author.email | gravatar }}"
                />
              </div>
              <div class="commentText">
                {{comment.text|safe}}
                <span class="sub-text">{{comment.comment_author.name}}</span>
              </div>
            </li>
            {% endfor %}
          </ul>

        </div>
      </div>
    </div>
  </div>
</article>

{% include "footer.html" %}
