{{template "layout.html" .}}

{{define "content"}}
<link rel="stylesheet" href="{{asset "/template/default/assets/css/admin-pages.css"}}">


<div class="card">
    <div class="card-header d-flex justify-content-end align-items-center">
        <button class="btn btn-primary btn-sm" onclick="showAddDirectory()">
            <i class='bx bx-plus'></i> {{T "admin_dirs_add"}}
        </button>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Path prefix</th>
                        <th>Category slug</th>
                        <th>URL</th>
                        <th>Documents</th>
                        <th width="150">Actions</th>
                    </tr>
                </thead>
                <tbody id="directoryList"></tbody>
            </table>
        </div>
        <div id="emptyMessage" class="text-center text-muted py-4 d-none">
            <i class='bx bx-folder-open' style="font-size: 3rem;"></i>
            <p class="mt-2">No directory mapping</p>
        </div>
    </div>
</div>

<div class="card mt-3">
    <div class="card-header">
        <h6 class="mb-0"><i class='bx bx-info-circle'></i> Usage</h6>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <h6>Mapping rules:</h6>
                <ul class="mb-3">
                    <li><strong>Path prefix:</strong> URL segment, e.g. <code>doc</code>, <code>blog</code></li>
                    <li><strong>Category slug:</strong> Database project identifier for this collection</li>
                    <li><strong>URL:</strong> <code>/prefix</code> maps to documents stored in the database</li>
                </ul>
            </div>
            <div class="col-md-6">
                <h6>Examples:</h6>
                <ul class="mb-0">
                    <li><code>/doc</code> → project <code>doc</code></li>
                    <li><code>/blog</code> → project <code>blog</code></li>
                    <li><code>/api</code> → project <code>api</code></li>
                </ul>
            </div>
        </div>
        <div class="alert alert-info mt-3 mb-0">
            <i class='bx bx-bulb'></i>
            <strong>Note:</strong> Documents are stored in MySQL only. Upload or create content in the admin panel; no server folder sync is required.
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
function getDirectoryFormHtml() {
    return '<form id="directoryForm" class="p-4" style="font-size: 0.875rem;">' +
        '<div class="mb-3">' +
            '<label class="form-label">Path prefix <span class="text-danger">*</span></label>' +
            '<input type="text" class="form-control form-control-sm" id="pathPrefix" required placeholder="e.g. doc, blog, api" pattern="[a-zA-Z0-9_-]+">' +
            '<div class="form-text">URL segment, e.g. <code>/doc</code></div>' +
        '</div>' +
        '<div class="mb-3">' +
            '<label class="form-label">Category slug <span class="text-danger">*</span></label>' +
            '<input type="text" class="form-control form-control-sm" id="directory" required placeholder="e.g. doc, blog, api" pattern="[a-zA-Z0-9_-]+">' +
            '<div class="form-text">Database project slug for this collection</div>' +
        '</div>' +
        '<div class="alert alert-warning mb-0"><i class="bx bx-alert"></i> Restart the service after saving mapping changes.</div>' +
    '</form>';
}

function showAddDirectory() {
    BootstrapModal.open({
        type: 1,
        title: '<i class="bx bx-folder-plus"></i> Add Directory',
        area: ['500px', 'auto'],
        shadeClose: true,
        content: getDirectoryFormHtml(),
        btn: ['Save', 'Cancel'],
        yes: function(index) { saveDirectory(index); }
    });
}

function editDirectory(pathPrefix) {
    var row = $('#directoryList tr[data-prefix="' + pathPrefix + '"]');
    var directory = row.find('td:eq(1)').text().trim();
    BootstrapModal.open({
        type: 1,
        title: '<i class="bx bx-edit"></i> Edit Directory',
        area: ['500px', 'auto'],
        shadeClose: true,
        content: getDirectoryFormHtml(),
        success: function() {
            $('#pathPrefix').val(pathPrefix).prop('readonly', true).addClass('bg-light');
            $('#directory').val(directory);
        },
        btn: ['Save', 'Cancel'],
        yes: function(index) { saveDirectory(index); }
    });
}

function saveDirectory(layerIndex) {
    var data = {
        path_prefix: $('#pathPrefix').val().trim(),
        directory: $('#directory').val().trim()
    };
    if (!data.path_prefix || !data.directory) {
        BootstrapModal.msg('Please fill in required fields.', {icon: 2});
        return;
    }
    var loadIndex = BootstrapModal.load();
    $.post('/admin/directory-save', JSON.stringify(data), function(res) {
        BootstrapModal.close(loadIndex);
        if (res.success) {
            BootstrapModal.close(layerIndex);
            BootstrapModal.msg('Saved successfully.', {icon: 1}, function() { loadDirectoryList(); });
        } else {
            BootstrapModal.msg(res.message, {icon: 2});
        }
    }).fail(function() {
        BootstrapModal.close(loadIndex);
        BootstrapModal.msg('Request failed.', {icon: 2});
    });
}

function deleteDirectory(pathPrefix, directory) {
    BootstrapModal.confirm('Delete mapping "<strong>' + pathPrefix + '</strong>" → <code>' + directory + '</code>?<br><span class="text-danger">This cannot be undone.</span>', {
        icon: 3, title: 'Confirm Delete', btn: ['Delete', 'Cancel']
    }, function(index) {
        BootstrapModal.close(index);
        var loadIndex = BootstrapModal.load();
        $.post('/admin/directory-delete', JSON.stringify({path_prefix: pathPrefix}), function(res) {
            BootstrapModal.close(loadIndex);
            if (res.success) {
                BootstrapModal.msg('Deleted successfully.', {icon: 1}, function() { loadDirectoryList(); });
            } else {
                BootstrapModal.msg(res.message, {icon: 2});
            }
        });
    });
}

function loadDirectoryList() {
    var loadIndex = BootstrapModal.load();
    $.get('/admin/directories?format=json', function(res) {
        BootstrapModal.close(loadIndex);
        if (res.success) {
            renderDirectoryList(res.data.directories);
        } else {
            BootstrapModal.msg('Failed to load: ' + res.message, {icon: 2});
        }
    }).fail(function() {
        BootstrapModal.close(loadIndex);
        BootstrapModal.msg('Failed to load directory list.', {icon: 2});
    });
}

function renderDirectoryList(directories) {
    var tbody = $('#directoryList');
    tbody.empty();
    if (directories && directories.length > 0) {
        $('#emptyMessage').addClass('d-none');
        directories.forEach(function(dir) {
            tbody.append(
                '<tr data-prefix="' + dir.path_prefix + '">' +
                '<td><code>' + dir.path_prefix + '</code></td>' +
                '<td><code>' + dir.directory + '</code></td>' +
                '<td><a href="' + dir.url_pattern + '" target="_blank"><code>' + dir.url_pattern + '</code></a></td>' +
                '<td><span class="badge bg-info">' + dir.doc_count + ' doc(s)</span></td>' +
                '<td>' +
                    '<button class="btn btn-sm btn-outline-primary me-1" onclick="editDirectory(\'' + dir.path_prefix + '\')"><i class="bx bx-edit"></i></button>' +
                    '<button class="btn btn-sm btn-outline-danger" onclick="deleteDirectory(\'' + dir.path_prefix + '\', \'' + dir.directory + '\')"><i class="bx bx-trash"></i></button>' +
                '</td></tr>'
            );
        });
    } else {
        $('#emptyMessage').removeClass('d-none');
    }
}

$(document).ready(function() { loadDirectoryList(); });
</script>
{{end}}