{% extends "aircox/basepage_detail.html" %}
{% load static i18n humanize honeypot aircox %}
{% comment %}
Base template used to display a Page

Context:
- page: page
- parent: parent page
{% endcomment %}

{% block header_crumbs %}
{{ block.super }}
{% if page.category %}
{% if parent %} / {% endif %} {{ page.category.title }}
{% endif %}
{% endblock %}

{% block top-nav-tools %}
{% has_perm page "change" as can_edit %}
{% if can_edit %}
<a class="navbar-item" href="{{ page|admin_url:'change' }}"
    target="new">
    <span class="icon is-small">
        <i class="fa fa-pen"></i>
    </span>&nbsp;
    <span>{% translate "Edit" %}</span>
</a>
{% endif %}
{% endblock %}

{% block main %}
{{ block.super }}

{% block comments %}
{% if comments or comment_form %}
<section class="mt-6">
    <h4 class="title is-4">{% translate "Comments" %}</h4>

    {% for comment in comments %}
    <div class="media box">
        <div class="media-content">
            <p>
                <strong class="mr-2">{{ comment.nickname }}</strong>
                <time datetime="{{ comment.date }}" title="{{ comment.date }}">
                    <small>{{ comment.date|naturaltime }}</small>
                </time>
                <br>
                {{ comment.content }}
            </p>
        </div>
    </div>
    {% endfor %}

    {% if comment_form %}
    <form method="POST">
        <h5 class="title is-5">{% translate "Post a comment" %}</h5>
        {% csrf_token %}
        {% render_honeypot_field "website" %}

        {% for field in comment_form %}
        <div class="field is-horizontal">
            <div class="field-label is-normal">
                <label class="label">
                    {{ field.label_tag }}
                </label>
            </div>
            <div class="field-body">
                <div class="field">
                    <p class="control is-expanded">{{ field }}</p>
                    {% if field.errors %}
                    <p class="help is-danger">{{ field.errors }}</p>
                    {% endif %}
                    {% if field.help_text %}
                    <p class="help">{{ field.help_text|safe }}</p>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
        <div class="has-text-right">
            <button type="reset" class="button is-danger">{% translate "Reset" %}</button>
            <button type="submit" class="button is-success">{% translate "Post comment" %}</button>
        </div>
    </form>
    {% endif %}
</section>
{% endif %}

{% endblock %}
{% endblock %}
