{% extends 'base.html' %}
{% from 'bootstrap5/form.html' import render_form %}
{% from 'bootstrap5/pagination.html' import render_pagination %}
{% from 'macros.html' import render_inline_form %}

{% block title %}{{ post.title }}{% endblock %}

{% block content %}
<div class="page-header">
  <h1>{{ post.title }}
    <span class="float-end">
      {% if current_user.is_authenticated %}
      <a class="btn btn-outline-info btn-sm"
          href="{{ url_for('admin.edit_post', post_id=post.id) }}">
        Edit
      </a>
      {{ render_inline_form(
        action=url_for('admin.delete_post', post_id=post.id, next=url_for('blog.index')),
        button_style='outline-danger',
        button_text='Delete',
      ) }}
      {% endif %}
    </span>
  </h1>
</div>
<div class="row">
  <div class="col-sm-8">
    <div class="post-body">{{ post.body|safe }}</div>
    <small>
      Created at <u class="dayjs">{{ post.created_at }}</u>,
      {% if post.updated_at %}last updated at <u class="dayjs">{{ post.updated_at }}</u>,{% endif %}
      belongs to the
      <a href="{{ url_for('.show_category', category_id=post.category.id) }}">
        {{ post.category.name }}
      </a> category.
    </small>
    <hr>
    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
        data-bs-target=".postLinkModal">
      Share
    </button>
    <div class="modal fade postLinkModal" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Permalink</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"
                aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <input type="text" class="form-control"
                value="{{ url_for('.show_post', post_id=post.id, _external=True) }}" readonly>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="comments" id="comments">
      <h3>{{ pagination.total }} Comments
        <small style="font-size: small;">
          <a href="{{ url_for('.show_post', post_id=post.id, page=pagination.pages or 1) }}#comments">
            latest
          </a>
        </small>
        {% if current_user.is_authenticated %}
        <div class="float-end">
          {{ render_inline_form(
            action=url_for('admin.set_comment', post_id=post.id, next=request.full_path),
            button_style='outline-warning' if post.can_comment else 'outline-success',
            button_text='Disable Comment' if post.can_comment else 'Enable Comment',
            confirm=None,
          ) }}
        </div>
        {% endif %}
      </h3>
      {% if comments %}
      <ul class="list-group">
        {% for comment in comments %}
        <li class="list-group-item list-group-item-action flex-column">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1 mt-2">
              <a class="text-decoration-none"
                  href="{% if comment.site %}{{ comment.site }}{% else %}#{% endif %}" target="_blank">
                {% if comment.from_admin %}{{ admin.name }}{% else %}{{ comment.author }}{% endif %}
              </a>
              {% if comment.from_admin %}<span class="badge rounded-pill text-bg-secondary">Author</span>{% endif %}
            </h5>
            <small class="dayjs-tooltip" data-bs-toggle="tooltip" data-bs-placement="top"
                data-bs-delay="500" data-timestamp="{{ comment.created_at }}">
              <span class="dayjs-from-now">{{ comment.created_at }}</span>
            </small>
          </div>
          {% if comment.replied %}
          <p class="alert alert-primary reply-body">
            {{ comment.replied.author }}:<br>
            {{ comment.replied.body }}
          </p>
          {% endif %}
          <p class="mb-1">{{ comment.body }}</p>
          <div class="float-end">
            <a class="btn btn-light btn-sm"
                href="{{ url_for('.reply_comment', comment_id=comment.id) }}">Reply</a>
            {% if current_user.is_authenticated %}
            <a class="btn btn-outline-info btn-sm" href="mailto:{{ comment.email }}">Email</a>
            {{ render_inline_form(
              action=url_for('admin.delete_comment', comment_id=comment.id, next=request.full_path),
              button_style='outline-danger',
              button_text='Delete',
            ) }}
            {% endif %}
          </div>
        </li>
        {% endfor %}
      </ul>
      {% else %}
      <div class="tip">
        <h5>No comments.</h5>
      </div>
      {% endif %}
    </div>
    {% if comments %}
    {{ render_pagination(pagination, fragment='#comments') }}
    {% endif %}
    {% if request.args.get('reply') %}
    <div class="alert alert-primary">
      Reply to <strong>{{ request.args.get('author') }}</strong>:
      <a class="float-end" href="{{ url_for('.show_post', post_id=post.id) }}">Cancel</a>
    </div>
    {% endif %}
    {% if post.can_comment %}
    <div id="comment-form">
      {{ render_form(form, action=request.full_path) }}
    </div>
    {% else %}
    <div class="tip">
      <h5>Comment disabled.</h5>
    </div>
    {% endif %}
  </div>
  <div class="col-sm-4 sidebar">
    {% include 'blog/_sidebar.html' %}
  </div>
</div>
{% endblock %}