<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>File Editor - Browsing: /<%= currentPath %></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body class="bg-light">
    <div class="container">
        <div class="py-5">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h2>Browsing: /<%= currentPath %></h2>
                <% if (parentPath !== '.') { %>
                    <a href="/<%= parentPath %>" class="btn btn-secondary">Previous Folder</a>
                <% } %>
            </div>
            <ul class="list-group mb-4">
                <% files.forEach(file => { %>
                    <% if (file.isDirectory()) { %>
                        <li class="list-group-item">
                            <a href="/<%= path.join(currentPath, file.name) %>">
                                <i class="fas fa-folder"></i> <%= file.name %>/
                            </a>
                        </li>
                    <% } else { %>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <a href="/edit/<%= currentPath + '/' + file.name %>">
                                <i class="fas fa-file"></i> <%= file.name %>
                            </a>
                            <div>
                                <a href="/download/<%= currentPath + '/' + file.name %>" class="btn btn-primary btn-sm ml-2">Download</a>
                                <form action="/delete/<%= currentPath + '/' + file.name %>" method="POST" style="display:inline;" onsubmit="return confirmDelete();">
                                    <button type="submit" class="btn btn-danger btn-sm ml-2">Delete</button>
                                </form>
                            </div>
                        </li>
                    <% } %>
                <% }); %>
            </ul>
            <form action="/upload" method="post" enctype="multipart/form-data" class="mb-4">
                <input type="hidden" name="directory" value="<%= currentPath %>">
                <div class="custom-file mb-3">
                    <input type="file" class="custom-file-input" id="file" name="file" required>
                    <label class="custom-file-label" for="file">Choose file</label>
                </div>
                <button type="submit" class="btn btn-primary btn-block">Upload</button>
            </form>
        </div>
    </div>

<script>
    function confirmDelete() {
        return confirm('Are you sure you want to delete this file?');
    }
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script> <!-- Font Awesome for icons -->
</body>
</html>
