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

{% block title %}{{ media.name }}{% endblock %}

{% block body %}
    <div class="container-fluid">
        <div class="row mb-4">
            <div class="col-12">
                <div class="admin-card p-4">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
                        <div>
                            <h1 class="h2 fw-bold mb-1">{{ media.name }}</h1>
                            <p class="text-muted mb-0 small">
                                <span class="badge bg-secondary">{{ extension }}</span>
                                {% if folder %}<span class="ms-2">In Ordner: {{ folder.name }}</span>{% endif %}
                            </p>
                        </div>
                        <div class="d-flex gap-2 flex-wrap">
                            {% if canEdit %}
                                <a href="{{ path('admin_media_edit', { id: media.id }) }}" class="btn btn-primary">
                                    <i class="bi bi-pencil me-2"></i>{{ 'admin.media.edit'|trans }}
                                </a>
                            {% endif %}
                            <a href="/uploads/media/{{ media.path }}" target="_blank" class="btn btn-outline-secondary" download>
                                <i class="bi bi-download me-2"></i>Download
                            </a>
                            {% if canDelete %}
                                <a href="{{ path('admin_media_delete', { id: media.id }) }}" class="btn btn-outline-danger" onclick="return confirm('{{ 'admin.media.delete_confirm_prefix'|trans }} wirklich löschen?');">
                                    <i class="bi bi-trash me-2"></i>{{ 'admin.delete'|trans }}
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-12 col-lg-8">
                <div class="admin-card p-4 mb-4">
                    {% if isImage %}
                        <div class="text-center bg-dark bg-opacity-10 rounded-3 p-3">
                            <img src="{{ media_url(media.id) }}" alt="{{ media.name }}" class="img-fluid" style="max-height: 70vh;">
                        </div>
                    {% elseif isPdf %}
                        <div class="ratio ratio-4x3 bg-light rounded-3 overflow-hidden">
                            <iframe src="{{ media_url(media.id) }}" title="{{ media.name }}" class="w-100 h-100"></iframe>
                        </div>
                    {% elseif isTextEditable %}
                        {% if fileContentError %}
                            <p class="text-danger mb-0">{{ fileContentError }}</p>
                        {% else %}
                            <div class="mb-3 d-flex justify-content-between align-items-center">
                                <h5 class="fw-bold mb-0">Vorschau</h5>
                                {% if canEdit %}
                                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#edit-text-form">
                                        <i class="bi bi-pencil me-1"></i>Inhalt bearbeiten
                                    </button>
                                {% endif %}
                            </div>
                            {% set prismLang = extension == 'yml' ? 'yaml' : extension %}
                            <pre class="bg-dark text-light p-3 rounded-3 overflow-auto mb-0" style="max-height: 50vh;"><code id="preview-code" class="language-{{ prismLang }}">{{ fileContent|e }}</code></pre>
                            {% if canEdit %}
                                <div class="collapse mt-3" id="edit-text-form">
                                    <form method="post" action="{{ path('admin_media_save_content', { id: media.id }) }}">
                                        <input type="hidden" name="_token" value="{{ csrf_token('media_save_content') }}">
                                        <div class="mb-2">
                                            <label for="content-field" class="form-label fw-semibold">Inhalt</label>
                                            <textarea name="content" id="content-field" class="form-control font-monospace" rows="18">{{ fileContent|e }}</textarea>
                                        </div>
                                        <button type="submit" class="btn btn-primary"><i class="bi bi-check-circle me-2"></i>Speichern</button>
                                    </form>
                                </div>
                            {% endif %}
                        {% endif %}
                    {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-file-earmark-fill text-muted" style="font-size: 4rem;"></i>
                            <p class="text-muted mt-2 mb-0">Keine Vorschau für diesen Dateityp.</p>
                            <a href="/uploads/media/{{ media.path }}" target="_blank" class="btn btn-outline-primary mt-3" download>Datei herunterladen</a>
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class="col-12 col-lg-4">
                <div class="admin-card p-4">
                    <h4 class="fw-bold mb-3">Metadaten</h4>
                    <dl class="mb-0">
                        <dt class="text-muted small">Dateiname</dt>
                        <dd class="mb-2">{{ media.path }}</dd>
                        <dt class="text-muted small">Erstellt</dt>
                        <dd class="mb-2">{{ media.createdAt|date('d.m.Y H:i') }}</dd>
                        {% if folder %}
                            <dt class="text-muted small">Ordner</dt>
                            <dd class="mb-2"><a href="{{ path('admin_media', { folder_id: folder.id }) }}">{{ folder.name }}</a></dd>
                        {% endif %}
                    </dl>
                    {% if canEdit %}
                        <a href="{{ path('admin_media_edit', { id: media.id }) }}" class="btn btn-outline-primary btn-sm">{{ 'admin.media.edit'|trans }}</a>
                    {% endif %}
                </div>
                {% set customFieldValues = media.customFields %}
                {% if customFieldValues is defined and customFieldValues is not empty %}
                    <div class="admin-card p-4 mt-3">
                        <h4 class="fw-bold mb-3">{{ 'admin.custom_fields.title'|trans }}</h4>
                        <dl class="mb-0">
                            {% for key, value in customFieldValues %}
                                <dt class="text-muted small">{{ key }}</dt>
                                <dd class="mb-2">{{ value is iterable ? value|json_encode : value }}</dd>
                            {% endfor %}
                        </dl>
                        {% if canEdit %}
                            <a href="{{ path('admin_media_edit', { id: media.id }) }}" class="btn btn-outline-primary btn-sm">{{ 'admin.media.edit'|trans }}</a>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% if isTextEditable and fileContent is not null %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markdown.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-xml-doc.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>
    <script>document.addEventListener('DOMContentLoaded', function() { if (typeof Prism !== 'undefined') Prism.highlightAll(); });</script>
    {% endif %}
{% endblock %}