{% extends 'base/one.column.html.twig' %}

{% set title %}Snip {{ snip }}{% endset %}

{% block body %}
    {% if app.user %}
        <a href="{{ path('snip_index') }}" class="btn btn-primary">
            <i class="fa fa-arrow-left"></i> Back
        </a>
    {% else %}
        <a href="{{ path('snip_public') }}" class="btn btn-primary">
            <i class="fa fa-arrow-left"></i> Index
        </a>
    {% endif %}
    {% if is_granted('edit', snip) %}
        <a class="btn btn-info" href="{{ path('version_index', {snip: snip.id}) }}">
            <i class="fa fa-history" aria-hidden="true"></i> Versions
        </a>
        <a class="btn btn-warning" href="{{ path('snip_edit', {snip: snip.id}) }}">
            <i class="fa fa-pencil" aria-hidden="true"></i> Edit
        </a>
        <a href="{{ path('snip_archive', {snip: snip.id}) }}" class="btn btn-secondary">
            {% if snip.archived %}
                <i class="fa fa-undo"></i> Unarchive
            {% else %}
                <i class="fa fa-archive"></i> Archive
            {% endif %}
        </a>
        <a href="{{ path('snip_delete', {snip: snip.id}) }}" class="btn btn-danger">
            <i class="fa fa-trash"></i> Delete
        </a>
    {% endif %}
    <a href="{{ path('snip_raw', {snip: snip.id}) }}" class="btn btn-primary">
        <i class="fa fa-eye"></i> Raw
    </a>
    <br><br>
    <div class="card" style="width: 100%;">
        <h4 class="card-header d-flex justify-content-between">
            <span>
                {{ snip }} <small class="text-muted">#{{ snip.id }}</small>
            </span>
            <span>
                {% for tag in snip.tags %}
                    <span class="badge bg-secondary">{{ tag }}</span>
                {% endfor %}
                {{ include('user/badge.html.twig', {user: snip.createdBy}) }}
                {{ include('snip/badge.html.twig', {snip: snip}) }}
            </span>
        </h4>
        <div class="card-body">
            {{ content|raw }}
        </div>
        <div class="card-footer">
            <p class="card-text text-muted">
                Current version: {{ snip.activeVersion.id }}
                {% if snip.activeVersion == snip.latestVersion %}(latest){% endif %}
                Created at {{ include('generic/datetime.badge.html.twig', {datetime: snip.activeVersion.id.dateTime}) }}
            </p>
        </div>
    </div>
{% endblock %}

{% block css %}
    {{ parent() }}
    <link rel="stylesheet"
          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
{% endblock %}

{% block js %}
    {{ parent() }}
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script>
        const codeBlocks = document.querySelectorAll('code.hljs');

        codeBlocks.forEach((block) => {
            hljs.highlightElement(block);
        });
    </script>
{% endblock %}