{% extends 'base/single.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-warning" href="{{ path('snip_edit', {snip: snip.id}) }}">
            <i class="fa fa-pencil" aria-hidden="true"></i> Edit
        </a>
        <a class="btn btn-info" href="{{ path('version_index', {snip: snip.id}) }}">
            <i class="fa fa-history" aria-hidden="true"></i> Versions
        </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-danger">
        <i class="fa fa-eye"></i> Raw
    </a>
    <br><br>
    <div class="card" style="width: 100%;">
        <h4 class="card-header">
            {{ include('snip/badge.html.twig', {snip: snip}) }}
            {{ snip }} <small class="text-muted">#{{ snip.id }}</small>
        </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 %}
            </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 %}