{% extends "dpaste/base.html" %}

{% load mptt_tags %}
{% load i18n %}
{% load dpaste_tags %}

{% block title %}{% trans "Snippet" %} #{{ snippet.pk }}{% endblock %}
{% block headline %}{% trans "Snippet" %} #{{ snippet.pk }}{% endblock %}

{% block page %}

    <!-- ======================================================================
    Snippet Diff View
    ======================================================================= -->
    <div id="snippet-diff" class="snippet-diff container-fluid">
        <div class="row-fluid" style="width: auto; padding: 30px 0">
            <div class="span9">
                <div id="diff" style="display:none;"></div>
            </div>
            <div class="span3">
                <form method="get" id="diffform" action="{% url "snippet_diff" %}">
                {% csrf_token %}
                <div class="tree">
                    {% for tree_item,structure in tree|tree_info %}
                    {% if structure.new_level %}<ul><li>{% else %}</li><li>{% endif %}
                    <div>
                    <span class="diff">
                        <input type="radio" name="a" value="{{ tree_item.id }}" {% ifequal tree_item.id snippet.parent_id %}checked="checked"{% endifequal %}>
                        <input type="radio" name="b" value="{{ tree_item.id }}" {% ifequal snippet tree_item %}checked="checked"{% endifequal %}>
                    </span>
                    {% ifequal snippet tree_item %}
                        <strong>#{{ tree_item.id }}</strong>
                   {% else %}
                   <a href="{{ tree_item.get_absolute_url }}">#{{ tree_item.id }}</a>
                    {% endifequal %}
                    </div>
                    {% for level in structure.closed_levels %}</li></ul>{% endfor %}
                    {% endfor %}
                    <div class="submit">
                        <input type="submit" value="{% trans "Compare" %}">
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>

    <!-- ======================================================================
    Snippet Options
    ======================================================================= -->
    <div class="btn-group snippet-options">
        <span class="btn disabled">
            {% if snippet.expire_type == 1 %}
                {% blocktrans with date=snippet.expires|timeuntil %}Expires in: {{ date }}{% endblocktrans %}
            {% elif snippet.expire_type == 2 %}
                {% trans "Snippet never expires" %}
            {% elif snippet.expire_type == 3 %}
                {% trans "One-Time snippet" %}
            {% endif %}
        </span>
        {% if snippet.pk|in_list:request.session.snippet_list %}
        <a class="btn" href="{% url "snippet_delete" snippet.secret_id %}" onclick="return confirm('{% trans "Really delete this snippet?" %}');"><i class="icon-trash"></i> {% trans "Delete Now" %}</a>
        {% endif %}
        {% if not snippet.is_single %}
        <a class="btn snippet-diff-trigger" href="#snippet-diff"><i class="icon-search"></i> {% trans "Compare Snippets" %}</a>
        {% endif %}
        {% if snippet.expire_type != 3 %}
        <a class="btn" href="{% url "snippet_details_raw" snippet.secret_id %}"><i class="icon-align-left"></i> {% trans "View Raw" %}</a>
        {% endif %}
        {% if gist %}
        <a class="btn" href="{% url "snippet_gist" snippet.secret_id %}"
            rel="nofollow" title="Create a secret Gist"><i class="icon-share"></i> {% trans "Gist" %}</a>
        {% endif %}
        {% if snippet.lexer != 'text' %}
        <a class="btn" href="#" id="toggleWordwrap">Wordwrap</a>
        {% endif %}
    </div>

    {% if snippet.expire_type == 3 %}
    <p class="message">
        {% trans "This is a one-time snippet." %}
        {% if snippet.remaining_views > 1 %}
            {% blocktrans with remaining=snippet.remaining_views %}It is automatically removed after {{ remaining }} further views.{% endblocktrans %}
        {% elif snippet.remaining_views == 1 %}
            {% trans "It is automatically removed after the next view." %}
        {% else %}
            {% trans "It cannot be viewed again." %}
        {% endif %}
    </p>
    {% endif %}

    <!-- ======================================================================
    Snippet
    ======================================================================= -->
    {% if snippet.lexer == 'text' %}
    <div class="snippet-rendered">
        {{ snippet.content|linebreaksbr }}
    </div>
    {% else %}
        {% include "dpaste/snippet_pre.html" %}
    {% endif %}

    <!-- ======================================================================
    Snippet Reply
    ======================================================================= -->
    <div class="snippet-reply snippet-reply-hidden">
        <h3>{% trans "Reply to this snippet" %} &rarr;</h3>
        {% include "dpaste/snippet_form.html" %}
    </div>
{% endblock %}


{% block script_footer %}
{{ block.super }}
<script>
jQuery(function($) {
    $('.snippet-reply-hidden').click(function(e) {
        $(this).removeClass('snippet-reply-hidden');
    });

    /* ------------------------------------------------------------------------
       Diff Ajax Call
    ------------------------------------------------------------------------ */
    var diffReq;

    $('.snippet-diff-trigger').click(function(e) {
        e.preventDefault();
        $('#snippet-diff').slideDown('fast');
        $('#snippet-diff form').submit();
    });


    $('#diffform').submit(function() {
        var a = $('input[name="a"]:checked').val(),
            b = $('input[name="b"]:checked').val();

        window.location.hash = 'D' + a + ',' + b;

        // Cancel previous request if it is still pending
        if (diffReq) {
            diffReq.abort();
        }

        diffReq = $.get("{% url "snippet_diff" %}", {
            a: a,
            b: b
        }).done(function(data) {
            $('#diff').html(data).slideDown('fast');
        }).complete(function() {
            diffReq = null;
        });

        return false;
    });

    var curLine = document.location.hash,
        hashlist;

    if (curLine.substring(0, 2) === '#D') {
        hashlist = curLine.substring(2).split(',');
        if (hashlist.length === 2) {
            console.log(hashlist);
            $('#diffform input[name="a"][value="' + hashlist[0] + '"]').prop('checked', true);
            $('#diffform input[name="b"][value="' + hashlist[1] + '"]').prop('checked', true);
            $('#snippet-diff').slideDown('fast');
            $('#snippet-diff form').submit();
        }
    }

    /* ------------------------------------------------------------------------
       Line Highlighting
    ------------------------------------------------------------------------ */
    if (curLine.substring(0, 2) === '#L') {
        hashlist = curLine.substring(2).split(',');
        if (hashlist.length > 0 && hashlist[0] !== '') {
            $.each(hashlist, function(index, elem){
                $('.code li#' + elem).addClass('marked');
            });
        }
    }

    $('.code li').click(function(e) {
        var line = $(this),
            hash = 'L';

        line.toggleClass('marked');

        $('.code li.marked').each(function (index, elem) {
            if (hash !== 'L') hash += ',';
            hash += $(elem).attr('id');
        });

        window.location.hash = hash;
    });

    /* ------------------------------------------------------------------------
       Line Highlighting
    ------------------------------------------------------------------------ */
    $('#toggleWordwrap').click(function(e){
        e.preventDefault();
        $('.code').toggleClass('wordwrap');
    });
});
</script>
{% endblock %}
