{% extends "base.html" %}

{% block head_title %}{{ post.title }} – {{ app_name }}{% endblock %}
{% block description %}{{ post.excerpt }}{% endblock %}
{% block og_type %}article{% endblock %}
{% block og_image_meta %}{% if post.coverImage and post.coverImage.url %}
<meta property="og:image" content="{{ post.coverImage.url }}">
{% elif logo_url %}
<meta property="og:image" content="{{ logo_url }}">
{% endif %}{% endblock %}
{% block twitter_image_meta %}{% if post.coverImage and post.coverImage.url %}
<meta name="twitter:image" content="{{ post.coverImage.url }}">
{% elif logo_url %}
<meta name="twitter:image" content="{{ logo_url }}">
{% endif %}{% endblock %}

{% block content %}
<header class="masthead" style="background-image: url({{post.coverImage.url}})">
  <div class="overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <div class="post-heading position-relative">
          <h1>{% block title %}{{ post.title }}{% endblock %}</h1>
          <h2 class="subheading">{{ post.excerpt }}</h2>
        </div>
      </div>
    </div>
  </div>
</header>

<article>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto post-content">
        {{content | markdown}}
      </div>
    </div>
  </div>
</article>

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-10 mx-auto post-content">
      <h2>
        {{_("Leave your comment here:")}}
      </h2>
      <form class="form form-horizontal" method="post" action={{ url_for('blog.get_post', post_slug=post_slug) }} autocomplete="off">
      {{ form.hidden_tag() }}
      <p>
        {{ form.author_name(placeholder=form.author_name.label.text) }}
      </p>
      <p>
        {{ form.comment(placeholder=form.comment.label.text) }}
      </p>
      {{ form.submit }}
      </form>
    </div>

    <div class="col-lg-8 col-md-10 mx-auto post-content">
      {% if comment_sent %}
      <p>
        {{_("Your comment has been sent for moderation")}}
      </p>
      {% endif %}


      <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col">{{ _("Comments") }}</th>
          </tr>
        </thead>
        <tbody>
        {% for comment in post.comments %}
        <tr>
          <td>
            <p>
              {{comment.author}} {{_("said")}} {{comment.time_delta}}:
            </p>
            <p>
              {{comment.comment}}
            </p>
          </td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}