<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-images"></i> Media</h2>
    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#uploadForm">
        <i class="bi bi-cloud-upload"></i> Uploaden
    </button>
</div>

<div class="collapse mb-4" id="uploadForm">
    <div class="card shadow-sm">
        <div class="card-body">
            <form method="POST" action="/admin/media" enctype="multipart/form-data">
                <input type="hidden" name="csrf_token" value="<?= $csrf ?>">
                <div class="mb-3">
                    <label for="file" class="form-label">Bestanden selecteren</label>
                    <input type="file" class="form-control" id="file" name="file[]" multiple accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml,application/pdf,application/zip,video/mp4,video/webm,audio/mpeg,audio/wav">
                    <small class="form-text text-muted">Toegestaan: JPG, PNG, GIF, WebP, SVG, PDF, ZIP, MP4, WebM, MP3, WAV</small>
                </div>
                <button type="submit" class="btn btn-success">
                    <i class="bi bi-cloud-upload"></i> Uploaden
                </button>
            </form>
        </div>
    </div>
</div>

<?php if (empty($files)): ?>
    <div class="alert alert-info">Geen bestanden gevonden in de assets map.</div>
<?php else: ?>
    <div class="table-responsive">
        <table class="table table-hover align-middle">
            <thead>
                <tr>
                    <th>Voorbeeld</th>
                    <th>Bestand</th>
                    <th>Grootte</th>
                    <th>Datum</th>
                    <th>URL</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($files as $file): ?>
                <tr>
                    <td>
                        <?php if ($file['is_image']): ?>
                            <img src="<?= htmlspecialchars($file['url']) ?>" style="width: 60px; height: 40px; object-fit: cover;" class="img-thumbnail">
                        <?php else: ?>
                            <span class="badge bg-secondary fs-6"><?= strtoupper($file['ext']) ?></span>
                        <?php endif; ?>
                    </td>
                    <td><strong><?= htmlspecialchars($file['name']) ?></strong></td>
                    <td class="text-muted small"><?= htmlspecialchars($file['size'] > 1048576 ? round($file['size'] / 1048576, 1) . ' MB' : round($file['size'] / 1024, 1) . ' KB') ?></td>
                    <td class="text-muted small"><?= htmlspecialchars($file['modified']) ?></td>
                    <td><code class="small"><?= htmlspecialchars($file['url']) ?></code></td>
                    <td>
                        <form method="POST" action="/admin/media" class="d-inline" onsubmit="return confirm('Weet je zeker dat je &#39;<?= htmlspecialchars($file['name']) ?>&#39; wilt verwijderen?')">
                            <input type="hidden" name="csrf_token" value="<?= $csrf ?>">
                            <input type="hidden" name="delete" value="<?= htmlspecialchars($file['name']) ?>">
                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Verwijderen">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
<?php endif; ?>
