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

{% block body %}
    {% if app.user and app.user is same as(snip.createdBy) %}
        <a href="{{ path('snip_index') }}" class="btn btn-primary">
            <i class="fa fa-arrow-left"></i> Index
        </a>
    {% else %}
        <a href="{{ path('snip_public') }}" class="btn btn-primary">
            <i class="fa fa-arrow-left"></i> Index
        </a>
    {% endif %}
    {% block buttons %}{% endblock %}

    <br><br>
    <div class="card" style="width: 100%;">
        <div class="card-header d-flex justify-content-between">
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                    <a class="nav-link {% if active == 'single' %}active{% endif %}"
                       href="{{ path('snip_single', {'snip': snip.id}) }}">View</a>
                </li>
                {% if is_granted('edit', snip) %}
                <li class="nav-item">
                    <a class="nav-link {% if active == 'edit' %}active{% endif %}"
                       href="{{ path('snip_edit', {'snip': snip.id}) }}">Edit</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if active == 'versions' %}active{% endif %}"
                       href="{{ path('version_index', {'snip': snip.id}) }}">Versions</a>
                </li>
                {% endif %}
            </ul>
            <span>
                <span class="badge bg-secondary">
                    <i class="fa fa-hashtag"></i> {{ snip.id }}
                </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>
        </div>
        <div class="card-body">
            {% block cardbody %}{% endblock %}
        </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 %}