Axiacore/knowledge-base

{% extends 'layout/base.html' %}
{% load i18n %}

{% block title %}{{ object.name }}{% endblock %}

{% block content %}
<section class="article-detail">
    <div class="breadcrumbs">
        <div class="container">
            <a href="{% url 'home' %}">{% trans "Home" %}</a> > <a href="{{ object.category.get_absolute_url }}">{{ object.category.name }}</a> > {{ object.name }}
        </div>
    </div>
    <div class="info-container">
        <div class="container">
            <h1>{{ object.name }}</h1>
            <div class="last-update">{% trans "Last updated" %} {{ object.updated_at }}</div>
            {% if object.is_private %}
            <blockquote>{% trans "This is private article. Only authenticated users can see it." %}</blockquote>
            {% endif %}
            <article>
                {{ object.content_markdown|safe }}
            </article>
            {% if not already_voted %}
            <div class="vote-buttons">
                <h6>{% trans "Was this article helpful?" %}</h6>
                <ul>
                    <li class="vote-up">
                        <button class="btn green">{% trans "Yes" %} ({{ object.upvotes }})</button>
                    </li>
                    <li class="vote-down">
                        <button class="btn red">{% trans "No" %} ({{ object.downvotes }})</button>
                    </li>
                </ul>
                <div class="thank-you hide">
                    <h3>{% trans "Thank you for your feedback!" %}</h3>
                </div>

                <div class="feedback {% if not display_form %}hide{% endif %}">
                    <h4>{% trans "Sorry about that. Why wasn’t it helpful?" %}</h4>
                    <form method="POST" action="{% url 'article_feedback_form' object.category.slug object.slug %}">
                        {% csrf_token %}
                        {{ feedback_form.as_p }}
                        <input type="submit" value="{% trans "Send" %}" class="btn green">
                    </form>
                </div>

            </div>
            {% endif %}
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script type="text/javascript">
$(document).ready(function () {

    // Upvote
    $('div.vote-buttons li.vote-up button').click(function () {
        if ($(this).hasClass('disabled')) return;

        $.get("{% url 'article_upvote' object.category.slug object.slug %}", function(response) {
            $('.vote-buttons .thank-you').removeClass('hide');
            $('.vote-buttons .feedback').remove();
            $('.vote-buttons ul').remove();
            $('.vote-buttons h6').remove();
        });

        // Track event in Analytics.
        ga('send', 'event', 'click', 'upvote', window.location.href);
        return false;
    });

    // Downvote
    $('div.vote-buttons li.vote-down button').click(function () {
        if ($(this).hasClass('disabled')) return;

        $.get("{% url 'article_downvote' object.category.slug object.slug %}", function(response) {
            $('.vote-buttons ul button').addClass('disabled');

            // Show feedback form.
            $('.vote-buttons .feedback').removeClass('hide');
        });

        // Track event in Analytics.
        ga('send', 'event', 'click', 'downvote', window.location.href);
        return false;
    });

});
</script>
{% endblock %}