{% extends 'base.html.twig' %}

{% block title %}{{ art.name }} · Art · dmtools{% endblock %}

{% block body %}
    <div class="d-flex justify-content-between align-items-start mb-3 gap-3 flex-wrap">
        <div>
            <a href="{{ path('app_art') }}" class="text-decoration-none small">&larr; Art</a>
            <h1 class="h3 mb-0">{{ art.name }}</h1>
            <span class="text-body-secondary small">
                {{ art.uploadedAt|date('Y-m-d H:i') }} · {{ (art.size / 1024)|round }} KB
                {%- if art.originalName %} · {{ art.originalName }}{% endif %}
            </span>
        </div>

        <div class="d-flex gap-2 flex-wrap">
            <button type="button" class="btn btn-outline-secondary btn-sm"
                    data-controller="clipboard"
                    data-clipboard-url-value="{{ path('app_art_file', {id: art.id}) }}"
                    data-action="clipboard#copy">Copy image</button>

            <a href="{{ path('app_art_file', {id: art.id}) }}" target="_blank" rel="noopener"
               class="btn btn-outline-secondary btn-sm">Open full size</a>

            <form method="post" action="{{ path('app_art_delete', {id: art.id}) }}"
                  onsubmit="return confirm('Delete “{{ art.name|e('js') }}”?')">
                <input type="hidden" name="_token" value="{{ csrf_token('delete-art-' ~ art.id) }}">
                <button class="btn btn-outline-danger btn-sm">Delete</button>
            </form>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-body text-center art-full">
            <img src="{{ path('app_art_file', {id: art.id}) }}" alt="{{ art.name }}">
        </div>
    </div>
{% endblock %}