LuHost/views/mods/details.ejs

<%
const body = `
    <div class="page-header">
        <div class="breadcrumb">
            <a href="/mods">Mods</a>
            <span>${mod.title}</span>
        </div>
        <h2>${mod.title}</h2>
        ${mod.description ? `<p class="text-secondary">${mod.description}</p>` : ''}
    </div>

    <div class="grid">
        <div class="card">
            <div class="card-header">
                <h3>Mod Information</h3>
            </div>
            <div class="card-body">
                <div class="info-grid">
                    <div><strong>Name:</strong> ${mod.name}</div>
                    <div><strong>Author:</strong> ${mod.author || 'Unknown'}</div>
                    <div><strong>Files:</strong> ${mod.fileCount} files</div>
                    <div><strong>Size:</strong> ${(mod.totalSize / 1024).toFixed(2)} KB</div>
                    <div><strong>Created:</strong> ${new Date(mod.created).toLocaleString()}</div>
                    <div><strong>Modified:</strong> ${new Date(mod.lastModified).toLocaleString()}</div>
                    ${mod.min_minetest_version ? `<div><strong>Min Version:</strong> ${mod.min_minetest_version}</div>` : ''}
                    ${mod.max_minetest_version ? `<div><strong>Max Version:</strong> ${mod.max_minetest_version}</div>` : ''}
                </div>

                ${mod.depends.length > 0 ? `
                    <div style="margin-top: 16px;">
                        <strong>Dependencies:</strong>
                        <div class="tag-list">
                            ${mod.depends.map(dep => `<span class="tag tag-required">${dep}</span>`).join('')}
                        </div>
                    </div>
                ` : ''}

                ${mod.optional_depends.length > 0 ? `
                    <div style="margin-top: 16px;">
                        <strong>Optional Dependencies:</strong>
                        <div class="tag-list">
                            ${mod.optional_depends.map(dep => `<span class="tag tag-optional">${dep}</span>`).join('')}
                        </div>
                    </div>
                ` : ''}
            </div>
        </div>

        ${mod.installedWorlds.length > 0 ? `
        <div class="card">
            <div class="card-header">
                <h3>Installed in Worlds (${mod.installedWorlds.length})</h3>
            </div>
            <div class="card-body">
                <div class="world-list">
                    ${mod.installedWorlds.map(world => `
                        <div class="world-item">
                            <div>
                                <strong>${world.displayName}</strong>
                                <span class="text-secondary">(${world.name})</span>
                            </div>
                            <div class="world-actions">
                                <form method="POST" action="/mods/remove/${world.name}/${mod.name}" style="display: inline;" onsubmit="return confirm('Remove this mod from ${world.displayName}?')">
                                    ${typeof csrfToken !== 'undefined' && csrfToken ? `<input type="hidden" name="_csrf" value="${csrfToken}">` : ''}
                                    <button type="submit" class="btn btn-sm btn-danger">Remove</button>
                                </form>
                            </div>
                        </div>
                    `).join('')}
                </div>
            </div>
        </div>
        ` : ''}

        <div class="card">
            <div class="card-header">
                <h3>Actions</h3>
            </div>
            <div class="card-body">
                <div class="action-buttons">
                    <a href="/mods" class="btn btn-outline">← Back to Mods</a>
                    <form method="POST" action="/mods/delete/${mod.name}" style="display: inline;" onsubmit="return confirm('Permanently delete this mod and remove it from all worlds?')">
                        ${typeof csrfToken !== 'undefined' && csrfToken ? `<input type="hidden" name="_csrf" value="${csrfToken}">` : ''}
                        <button type="submit" class="btn btn-danger">Delete Mod</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <style>
        .info-grid {
            display: grid;
            gap: 8px;
        }
        
        .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
        }
        
        .tag {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: 500;
        }
        
        .tag-required {
            background: var(--error-color);
            color: white;
        }
        
        .tag-optional {
            background: var(--warning-color);
            color: white;
        }
        
        .world-list {
            display: grid;
            gap: 12px;
        }
        
        .world-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background: var(--bg-secondary);
        }
        
        .world-actions {
            display: flex;
            gap: 8px;
        }
        
        .action-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
    </style>
`;
%>

<%- include('../layout', { body: body, currentPage: 'mods', title: title }) %>