{% load verbatim %}

{% verbatim %}
    <script id="snipt" type="text/html">
        <div class="number">#<%= snipt.id %></div>
        <div class="group">
            <div class="container <% if (window.detail && snipt.description && snipt.description !== 'None') { %>with-description<% } %>">
                <header>
                    <h2><%= snipt.lexer_name %></h2>
                    <h1><a href="<%= snipt.absolute_url %>"><% if (snipt.title) { %><%= snipt.title %><% } else { %>Untitled <% } %></a></h1>
                </header>
                <section class="code autumn">
                    <% if (snipt.lexer == 'markdown') { %>
                        <div class="markdown">
                            <%= snipt.stylized %>
                        </div>
                    <% } else { %>
                        <%= snipt.stylized %>
                    <% } %>
                    <% if (snipt.line_count > 8 && !window.detail) { %>
                        <a href="#" class="expand">
                            <span class="expand">Expand</span>
                            <span class="collapse">Collapse</span>
                            <span class="lines">(<%= snipt.line_count %> lines)</span>
                        </a>
                    <% } %>
                    <textarea class="raw"><%= snipt.code %></textarea>
                    <textarea class="description"><% if (snipt.description && snipt.description !== 'None') { %><%= snipt.description %><% } %></textarea>
                </section>
                <% if (window.detail && snipt.description && snipt.description !== 'None') { %>
                    <section class="description">
                        <h1>Description</h2>
                        <%= snipt.description_rendered %>
                    </section>
                <% } %>
                <div class="ruler top-x"></div>
                <div class="ruler bottom-x"></div>
            </div>
            <aside>
                <ul class="options">
                    <% if (snipt.user.username === window.user) { %>
                        <li>
                            <a class="edit" href="#">Edit</a>
                        </li>
                        <% } %>
                    <li>
                        <a class="embed" href="#">Embed</a>
                    </li>
                    <li>
                        <a class="copy" href="#">Copy</a>
                    </li>
                </ul>
                <section class="meta tags">
                    <h2><%= snipt.tags.length %> tag<% if ((snipt.tags.length > 1) || (snipt.tags.length === 0)) { print('s'); } %></h2>
                    <ul>
                        <% for (var i=0; i < snipt.tags.length; i++) { %>
                            <li <% if (i > 2 && !window.detail) { %>class="hidden"<% } %>>
                                <a href="<%= snipt.tags[i].absolute_url %>"><%= snipt.tags[i].name %></a>
                            </li>
                        <% } %>
                    </ul>
                </section>
                <section class="meta stats">
                    <ul>
                        <li><%= snipt.views %> views</li>
                        <li><%= snipt.favs %> favs</li>
                    </ul>
                </section>
            </aside>
        </div>
        <footer>
            <ul class="attrs">
                <li class="author">
                    <span class="avatar" style="background-image: url('https://secure.gravatar.com/avatar/<%= snipt.user.email_md5 %>?s=15&d=https://snipt.s3.amazonaws.com/img/author-icon.png');"></span>
                    <a href="<%= snipt.user.absolute_url %>">
                        <%= snipt.user.username %>
                    </a>
                    <% if (window.user_is_pro) { %>
                        <span class="pro"><a href="/pro/">Pro</a></span>
                    <% } %>
                </li>
                <% if (!snipt.new_from_js) { %>
                    <li class="created" title="<%= snipt.created %>"><%= snipt.created_formatted %></li>
                <% } %>
                <% if (snipt.public && !window.detail) { %>
                    <li class="comments"><a href="<%= snipt.absolute_url %>#disqus_thread" data-disqus-identifier="<%= snipt.id %>"></a></li>
                <% } %>
                <li class="raw">
                    <a href="<%= snipt.raw_url %>">Raw</a> / 
                    <a href="<%= snipt.raw_url %>?nice">Raw Nice</a>
                </li>
            </ul>
        </footer>
        <div class="modal hide copy-modal">
            <div class="modal-header">
                <a href="#" class="close">×</a>
                <h3><span>Copy &ldquo;<%= snipt.title %>&rdquo;</span></h3>
                <h4>(Text is selected. <span class="cmd-ctrl"></span>+C to copy.)</h4>
            </div>
            <div class="modal-body"></div>
        </div>
        <div class="modal hide embed-modal">
            <div class="modal-header">
                <a href="#" class="close">×</a>
                <h3><span>Embed &ldquo;<%= snipt.title %>&rdquo;</span></h3>
                <h4>(Text is selected. <span class="cmd-ctrl"></span>+C to copy.)</h4>
            </div>
            <div class="modal-body">
                <textarea><script type="text/javascript"><%= snipt.get_embed_url %></script></textarea>
            </div>
        </div>
    </script>
{% endverbatim %}