{% extends "base_template.html" %}

{% block title %}{{ _('Media library') }}{% endblock %}

{% block content %}
<h1 class="h3 mb-1">{{ _('Media library') }}</h1>
<p class="text-muted mb-4" style="font-size:.86rem;">{{ _('Upload and manage files. Copy a URL to use it anywhere.') }}</p>

<form method="POST" action="{{ url_for('media.admin_upload') }}" enctype="multipart/form-data" class="mb-4">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="d-flex flex-wrap gap-2 align-items-center">
        <input type="file" name="file" class="form-control" style="max-width:340px" required>
        <input type="text" name="title" class="form-control" style="max-width:240px" placeholder="{{ _('Title (optional)') }}">
        <button class="btn btn-primary" type="submit">{{ _('Upload') }}</button>
    </div>
</form>

<div class="row g-3">
    {% for m in items %}
    <div class="col-6 col-md-3">
        <div class="card h-100">
            <a href="{{ url_for('media.admin_detail', item_id=m.id) }}" class="text-decoration-none text-reset" title="{{ _('Edit details') }}">
            {% if m.is_image %}
            <img src="{{ m.url }}" class="card-img-top" style="height:140px;object-fit:cover" alt="{{ m.alt }}">
            {% else %}
            <div class="card-img-top d-flex align-items-center justify-content-center bg-light" style="height:140px"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg></div>
            {% endif %}
            </a>
            <div class="card-body p-2">
                <a href="{{ url_for('media.admin_detail', item_id=m.id) }}" class="text-decoration-none text-reset">
                <p class="small text-truncate mb-1" title="{{ m.title or m.filename }}">{{ m.title or m.filename }}</p>
                </a>
                <div class="d-flex justify-content-between align-items-center">
                    <code class="small text-muted text-truncate" style="max-width:120px">{{ m.url }}</code>
                    <form method="POST" action="{{ url_for('media.admin_delete', item_id=m.id) }}" onsubmit="return confirm('{{ _('Delete this file?') }}')">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button class="btn btn-sm btn-outline-danger py-0 px-1" type="submit" title="{{ _('Delete') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <p class="text-muted">{{ _('No media yet. Upload something above.') }}</p>
    {% endfor %}
</div>
{% endblock %}