<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-file-earmark-text"></i> Content</h2>
    <div>
        <button type="button" class="btn btn-outline-success btn-sm me-1" data-bs-toggle="collapse" data-bs-target="#uploadForm">
            <i class="bi bi-cloud-upload"></i> Upload
        </button>
        <button type="button" class="btn btn-outline-secondary btn-sm me-1" data-bs-toggle="modal" data-bs-target="#createDirModal">
            <i class="bi bi-folder-plus"></i> Nieuwe map
        </button>
        <a href="/admin/content-new&dir=<?= urlencode($subdir) ?>" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg"></i> Nieuw bestand
        </a>
    </div>
</div>

<div class="collapse mb-4" id="uploadForm">
    <div class="card shadow-sm">
        <div class="card-body">
            <form method="POST" action="/admin/content&dir=<?= urlencode($subdir) ?>" 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 naar deze map
                </button>
            </form>
        </div>
    </div>
</div>

<?php if (!empty($subdir)): ?>
    <?php
        $parentDir = dirname($subdir);
        $parentLink = $parentDir === '.' ? '' : $parentDir;
    ?>
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/admin/content"><i class="bi bi-house"></i></a></li>
            <?php
            $crumbPath = '';
            foreach (explode('/', $subdir) as $i => $crumb):
                $crumbPath .= ($crumbPath ? '/' : '') . $crumb;
            ?>
                <li class="breadcrumb-item <?= $crumbPath === $subdir ? 'active' : '' ?>">
                    <?php if ($crumbPath === $subdir): ?>
                        <?= htmlspecialchars($crumb) ?>
                    <?php else: ?>
                        <a href="/admin/content&dir=<?= urlencode($crumbPath) ?>"><?= htmlspecialchars($crumb) ?></a>
                    <?php endif; ?>
                </li>
            <?php endforeach; ?>
        </ol>
    </nav>
<?php endif; ?>

<div class="card shadow-sm">
    <div class="table-responsive">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>Naam</th>
                    <th>Type</th>
                    <th>Grootte</th>
                    <th>Gewijzigd</th>
                    <th style="width: 200px;">Acties</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($items)): ?>
                    <tr><td colspan="5" class="text-muted text-center py-4">Geen bestanden gevonden.</td></tr>
                <?php else: ?>
                    <?php foreach ($items as $item): ?>
                        <tr>
                            <td>
                                <?php if ($item['is_dir']): ?>
                                    <a href="/admin/content&dir=<?= urlencode($item['path']) ?>">
                                        <i class="bi bi-folder-fill text-warning"></i> <?= htmlspecialchars($item['name']) ?>
                                    </a>
                                <?php else: ?>
                                    <a href="/admin/content-edit&file=<?= urlencode($item['path']) ?>">
                                        <?php
                                        $icon = match($item['extension']) {
                                            'md' => 'bi-file-text text-primary',
                                            'php' => 'bi-file-code text-success',
                                            'html' => 'bi-file-earmark text-info',
                                            default => 'bi-file text-muted'
                                        };
                                        ?>
                                        <i class="bi <?= $icon ?>"></i> <?= htmlspecialchars($item['name']) ?>
                                    </a>
                                <?php endif; ?>
                            </td>
                            <td>
                                <?php if ($item['is_dir']): ?>
                                    <span class="badge bg-warning text-dark">Map</span>
                                <?php else: ?>
                                    <span class="badge bg-secondary"><?= strtoupper($item['extension']) ?></span>
                                <?php endif; ?>
                            </td>
                            <td class="text-muted"><?= $item['size'] ?></td>
                            <td class="text-muted"><?= $item['modified'] ?></td>
                            <td>
                                <?php if ($item['is_dir']): ?>
                                    <a href="/admin/content-dir-rename&dir=<?= urlencode($item['path']) ?>" class="btn btn-sm btn-outline-secondary" title="Hernoemen">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <a href="/admin/content-move&item=<?= urlencode($item['path']) ?>" class="btn btn-sm btn-outline-info" title="Verplaatsen">
                                        <i class="bi bi-arrows-move"></i>
                                    </a>
                                    <form method="POST" action="/admin/content-dir-delete&dir=<?= urlencode($item['path']) ?>" class="d-inline" onsubmit="return confirm('Weet je zeker dat je deze map wilt verwijderen? De map moet leeg zijn.')">
                                        <input type="hidden" name="csrf_token" value="<?= $csrf ?>">
                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Verwijderen">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                <?php else: ?>
                                    <a href="/admin/content-edit&file=<?= urlencode($item['path']) ?>" class="btn btn-sm btn-outline-primary" title="Bewerken">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <a href="/admin/content-move&item=<?= urlencode($item['path']) ?>" class="btn btn-sm btn-outline-info" title="Verplaatsen">
                                        <i class="bi bi-arrows-move"></i>
                                    </a>
                                    <form method="POST" action="/admin/content-delete&file=<?= urlencode($item['path']) ?>" class="d-inline" onsubmit="return confirm('Weet je zeker dat je dit bestand wilt verwijderen?')">
                                        <input type="hidden" name="csrf_token" value="<?= $csrf ?>">
                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Verwijderen">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                <?php endif; ?>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Create Directory Modal -->
<div class="modal fade" id="createDirModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="/admin/content-dir-create&dir=<?= urlencode($subdir) ?>">
                <input type="hidden" name="csrf_token" value="<?= $csrf ?>">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-folder-plus"></i> Nieuwe map aanmaken</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="dirname" class="form-label">Mapnaam</label>
                        <input type="text" class="form-control" id="dirname" name="dirname" required autofocus>
                        <div class="form-text">Alleen letters, cijfers, punten, underscores en streepjes.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuleren</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Aanmaken</button>
                </div>
            </form>
        </div>
    </div>
</div>
