{% extends "base.html" %}
{% load humanize %}
{% load voting_tags %}
{% load activity_tags %}
{% load comments %}

{% block extra_head %}
        {% comment %}
            /* If your site contains an 'extra_head' block, and jQuery, this will 
               allow your 'like' clicks to be AJAXed instead of the old fashioned
               way.  Completely not needed.
            */
        {% endcomment %}
        <script type="text/javascript">
            $(function() {
                $(".like_button").click(function() {
                    event.preventDefault();
                    var self = $(this);
                    $.post($(this).attr("href"), function(data) {
                        self.find("img").attr("src", "/static/images/full.png");
                        self.attr("href", "");
                    });
                    return false;                
                });             
            });
        </script>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="large-12 columns">
            <h2 style="margin-bottom: 5px;">{{ article.title|title }}</h2>
            <hr />
        </div>
        <div class="large-12 columns center">
            <div class="large-1 columns hide-for-small">
                {% vote_by_user user on article as vote %}
                {% if vote.vote == 1 %}
                    <img src="{{ STATIC_URL }}images/full.png" style="max-width: 32px;" />
                {% else %}
                    <a href="{% url djig_like_article article.pk %}"><img src="{{ STATIC_URL }}images/empty.png" style="max-width: 32px;" /></a>
                {% endif %}
                <br />
                <img src="{{ article.user.get_profile.get_mugshot_url }}" />
            </div>
            <div class="small-12 large-11 columns">
                <p><a href="{{ article.site }}">{{ article.site_name }}</a> - {{ article.description }}</p>
                <div class="row">
                    <div class="small-12 large-6 columns">
                        Submitted by <a href="{% url userena_profile_detail article.user.username %}">{{ article.user.username }}</a>, {{ article.created|naturaltime }}
                    </div>
                    <div class="small-12 large-6 columns">
                        {% if user.is_superuser %}
                            &middot; <a href="/admin/djig/article/{{ article.id }}/delete/">Delete</a>
                            &middot; <a href="/admin/djig/article/{{ article.id }}/">Edit</a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% if COMMENTS_ENABLED %}
        <div class="large-12 columns">
            <hr />
            {% get_comment_count for djig.article article.id as comment_count %}
            <h4>{{ comment_count }} Comments</h4>
            <hr />
            {% get_comment_list for article as comment_list %}
            {% for comment in comment_list %}
                <div class="large-12 columns">
                    <div class="large-1 columns">
                        <img src="{{ comment.user.get_profile.get_mugshot_url }}" />
                    </div>
                    <div class="large-11 columns">
                        <blockquote>
                            <a href="{{ comment.user.get_absolute_url }}">{{ comment.user.username }}</a><br />
                            {{ comment.comment }}
                            <span style="font-size: 90%; color: #666;"><br />{{ comment.submit_date|timesince }} ago</span> 
                        </blockquote>
                    </div>
                </div>
            {% endfor %}
            <hr />
            {% if user.is_authenticated %}
                {% get_comment_form for article as form %}
                <form action="{% comment_form_target %}" method="POST">
                    {% csrf_token %}
                    <textarea id="id_comment" rows="10" cols="40" name="comment" placeholder="Comment"></textarea>
                    {{ form.content_type }}
                    {{ form.object_pk }}
                    {{ form.timestamp }}
                    {{ form.security_hash }}
                    <input type="hidden" name="next" value="{{ request.path }}" />
                    <input type="submit" value="Add comment" id="id_submit" />
                </form>
            {% else %}
                <p>Please <a href="/accounts/signin/?next={{ request.path }}">log in</a> to leave a comment.</p>
            {% endif %}
        </div>
        {% endif %}
    </div>
{% endblock %}
