{% load humanize %}

<article id="snipt-{{ snipt.pk }}" class="snipt {% if not snipt.public %}private-snipt{% endif %} {% if snipt.line_count > 8 and not detail %}expandable{% endif %} {% if snipt.user == request.user %}editable{% endif %}">
    <div class="number">#{{ snipt.pk }}</div>
    <div class="group">
        <div class="container">
            <header>
                <h2>{{ snipt.lexer_name }}</h2>
                <h1><a href="{{ snipt.get_absolute_url }}{% if not snipt.public %}?key={{ snipt.key }}{% endif %}">{{ snipt.title }}</a></h1>
            </header>
            <section class="code {% if request.GET.style %}{{ request.GET.style }}{% else %}autumn{% endif %}">
                {{ snipt.stylized|safe }}
                {% if snipt.line_count > 8 and not detail %}
                    <a href="#" class="expand">
                        <span class="expand">Expand</span>
                        <span class="collapse">Collapse</span>
                        <span class="lines">({{ snipt.line_count }} lines)</span>
                    </a>
                {% endif %}
                <textarea class="raw">{{ snipt.code }}</textarea>
            </section>
            <div class="ruler top-x"></div>
            <div class="ruler bottom-x"></div>
        </div>
        <aside>
            <ul class="options">
                {% if snipt.user == request.user %}
                    <li>
                        <a class="edit" href="#">Edit</a>
                    </li>
                {% endif %}
                <li>
                    <a class="embed" href="#">Embed</a>
                </li>
                <li>
                    <a class="copy" href="#"><span class="do">Copy</span></a>
                </li>
            </ul>
            <section class="tags">
                <h2>{{ snipt.tags.all|length }} tag{{ snipt.tags.all|pluralize }}</h2>
                <ul>
                    {% for tag in snipt.sorted_tags %}
                        <li {% if forloop.counter > 3 and not detail %}class="hidden"{% endif %}>
                            {% if public %}
                                <a href="/public/tag/{{ tag.slug }}/">{{ tag }}</a>
                            {% else %}
                                <a href="/{{ snipt.user.username }}/tag/{{ tag.slug }}/">{{ tag }}</a>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </section>
        </aside>
    </div>
    <footer>
        <ul class="attrs">
            <li class="author"><a href="{{ snipt.user.get_absolute_url }}">{{ snipt.user.username }}</a></li>
            <li class="created" title="{{ snipt.created|date:"Y-m-d\TH:i:s" }}">{{ snipt.created|naturalday }}</li>
            <li class="comments"><a href="{{ snipt.get_full_absolute_url }}{% if not snipt.public %}?key={{ snipt.key }}{% endif %}#disqus_thread" data-disqus-identifier="{{ snipt.pk }}"></a></li>
        </ul>
    </footer>
    <div class="modal hide copy-modal">
        <div class="modal-header">
            <a href="#" class="close">×</a>
            <h3>Copy <span>&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>Embed <span>&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="hide embed-url">{{ snipt.get_embed_url }}</div>
    <div class="hide key">{{ snipt.key }}</div>
    <div class="hide lexer">{{ snipt.lexer }}</div>
    <div class="hide lexer-name">{{ snipt.lexer_name }}</div>
    <div class="hide line-count">{{ snipt.line_count }}</div>
    <div class="hide modified">{{ snipt.modified|date:"Y-m-d\TH:i:s" }}</div>
    <div class="hide public">{{ snipt.public }}</div>
    {% if snipt.user == request.user %}
        <div class="hide resource-uri">/api/private/snipt/{{ snipt.pk }}/</div>
    {% else %}
        <div class="hide resource-uri">/api/public/snipt/{{ snipt.pk }}/</div>
    {% endif %}
    <div class="hide slug">{{ snipt.slug }}</div>
    <div class="hide stylized">{{ snipt.stylized }}</div>
    <div class="hide tags-list">{{ snipt.tags_list }}</div>
</article>