{{template "layout.html" .}}

{{define "content"}}
<div class="user-list-page user-projects-page">
    <div class="card mb-3">
        <div class="card-body">
            <div class="user-page-head">
                <div class="user-page-head-main">
                    <h5>{{T "user_my_projects"}}</h5>
                    <p class="text-muted">{{T "user_projects_subtitle"}}</p>
                </div>
                <div class="user-page-head-actions">
                    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#projectModal" onclick="prepareNewProject()">
                        <i class='bx bx-plus'></i> {{T "user_new_project"}}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="user-hint-bar d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3 py-2 px-3">
        <span class="small mb-0"><i class='bx bx-info-circle me-1'></i>{{T "user_categories_page_hint"}}</span>
        <a href="/user/documents" class="btn btn-primary btn-sm"><i class='bx bx-file'></i> {{T "user_documents"}}</a>
    </div>

    <div class="card user-table-card">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 table-fixed">
                <thead>
                    <tr>
                        <th class="col-check"><input type="checkbox" id="selectAllProjects" title="{{T "user_select_all"}}"></th>
                        <th>{{T "user_col_name"}}</th>
                        <th>{{T "user_col_slug"}}</th>
                        <th class="text-center">{{T "user_col_docs"}}</th>
                        <th>{{T "user_col_updated"}}</th>
                        <th class="text-center" width="60">{{T "user_col_actions"}}</th>
                    </tr>
                </thead>
                <tbody>
                {{if .Data.Projects}}
                    {{range .Data.Projects}}
                    {{$proj := .}}
                    <tr>
                        <td><input type="checkbox" class="project-checkbox" value="{{index $proj "id"}}" data-name="{{index $proj "name"}}"></td>
                        <td>
                            <div class="project-cell">
                                <span class="project-icon"><i class="{{index $proj "directory_icon"}}"></i></span>
                                <span class="project-name" title="{{index $proj "name"}}">{{index $proj "name"}}</span>
                            </div>
                        </td>
                        <td><span class="slug-tag">{{index $proj "slug"}}</span></td>
                        <td class="text-center">
                            <a href="/user/documents?project_id={{index $proj "id"}}" class="doc-count-link" title="{{T "user_btn_manage_docs"}}">{{index $proj "doc_count"}}</a>
                        </td>
                        <td class="small text-muted">{{index $proj "updated_at_display"}}</td>
                        <td class="text-center">
                            <div class="dropdown table-action-dropdown">
                                <button class="btn btn-action-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="bx bx-dots-vertical-rounded" style="font-size:1.15rem;"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item" href="/user/documents?project_id={{index $proj "id"}}"><i class="bx bx-file"></i> {{T "user_btn_manage_docs"}}</a></li>
                                    <li><a class="dropdown-item btn-edit-project" href="javascript:;" data-id="{{index $proj "id"}}"><i class="bx bx-edit"></i> {{T "user_btn_edit"}}</a></li>
                                    <li><a class="dropdown-item text-danger btn-delete-project" href="javascript:;" data-id="{{index $proj "id"}}" data-name="{{index $proj "name"}}"><i class="bx bx-trash"></i> {{T "user_btn_delete"}}</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    {{end}}
                {{else}}
                    <tr><td colspan="6"><div class="projects-empty">
                        <i class='bx bx-folder-open' style="font-size:2.5rem;opacity:.4;"></i>
                        <p class="mt-2">{{T "user_no_projects"}}</p>
                        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#projectModal" onclick="prepareNewProject()">
                            <i class='bx bx-plus'></i> {{T "user_new_project"}}
                        </button>
                    </div></td></tr>
                {{end}}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="batchActionBar" class="user-batch-bar" style="display:none;">
    <div class="d-flex justify-content-between align-items-center">
        <span class="small text-secondary"><span id="selectedProjectCount">0</span> {{T "user_projects_selected_suffix"}}</span>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-sm btn-outline-danger" onclick="batchDeleteProjects()">{{T "user_batch_delete"}}</button>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearProjectSelection()">{{T "user_clear_selection"}}</button>
        </div>
    </div>
</div>

<div class="modal fade" id="projectModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content user-form-modal user-project-modal">
            <div class="modal-header user-project-modal__header">
                <div class="user-project-modal__title-wrap">
                    <span class="user-project-modal__icon" aria-hidden="true"><i class='bx bx-folder'></i></span>
                    <h5 class="modal-title" id="projectModalTitle">{{T "user_create_project"}}</h5>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "user_btn_cancel"}}"></button>
            </div>
            <div class="modal-body user-project-modal__body">
                <input type="hidden" id="projectId" value="0">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label user-project-modal__label" for="projectName">{{T "user_project_name"}} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="projectName" autocomplete="off">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label user-project-modal__label" for="projectSlug">{{T "user_project_slug"}}</label>
                        <input type="text" class="form-control" id="projectSlug" placeholder="{{T "user_project_slug_placeholder"}}" autocomplete="off">
                    </div>
                    <div class="col-12">
                        <div class="user-project-modal__hint">
                            <i class='bx bx-info-circle'></i>
                            <span>{{T "user_categories_list_hint"}}</span>
                        </div>
                    </div>
                    <div class="col-12">
                        <label class="form-label user-project-modal__label" for="projectDesc">{{T "user_project_description"}}</label>
                        <textarea class="form-control" id="projectDesc" rows="4"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer user-project-modal__footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{T "user_btn_cancel"}}</button>
                <button type="button" class="btn btn-primary user-project-modal__save" onclick="saveProject()">
                    <i class='bx bx-check'></i> {{T "user_btn_save"}}
                </button>
            </div>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
var createTitle = {{json (T "user_create_project")}};
var editTitle = {{json (T "user_edit_project")}};
var msgFailed = {{json (T "user_failed")}};
var msgNameRequired = {{json (T "user_project_name_required")}};
var msgSaveFailed = {{json (T "user_save_failed")}};
var msgDeleted = {{json (T "user_deleted")}};
var msgDeleteConfirm = {{json (T "user_delete_project_confirm")}};
var msgBatchDeleteConfirm = {{json (T "user_batch_delete_projects_confirm")}};
var msgDeleteTitle = {{json (T "user_btn_delete")}};
var msgBatchDeleteTitle = {{json (T "user_batch_delete")}};

function showToast(msg, icon) {
    if (typeof BootstrapModal !== 'undefined') BootstrapModal.msg(msg, {icon: icon || 0});
    else alert(msg);
}
function showProjectModal() {
    var el = document.getElementById('projectModal');
    if (!el) return;
    if (typeof bootstrap !== 'undefined' && bootstrap.Modal) bootstrap.Modal.getOrCreateInstance(el).show();
}
function prepareNewProject() {
    resetProjectForm();
    $('#projectModalTitle').text(createTitle);
}
function resetProjectForm() {
    $('#projectId').val('0'); $('#projectName').val(''); $('#projectSlug').val(''); $('#projectDesc').val('');
}
$(function() {
    $('#selectAllProjects').on('change', function() {
        $('.project-checkbox').prop('checked', $(this).prop('checked'));
        updateBatchBar();
    });
    $(document).on('change', '.project-checkbox', function() { updateSelectAllState(); updateBatchBar(); });
    $(document).on('click', '.btn-delete-project', function(e) { e.preventDefault(); deleteProject($(this).data('id'), $(this).data('name')); });
    $(document).on('click', '.btn-edit-project', function(e) { e.preventDefault(); openProjectModal($(this).data('id')); });
});
function updateSelectAllState() {
    var total = $('.project-checkbox').length, checked = $('.project-checkbox:checked').length;
    $('#selectAllProjects').prop('checked', total > 0 && total === checked);
}
function updateBatchBar() {
    var count = $('.project-checkbox:checked').length;
    $('#selectedProjectCount').text(count);
    $('#batchActionBar').toggle(count > 0);
}
function clearProjectSelection() { $('.project-checkbox, #selectAllProjects').prop('checked', false); updateBatchBar(); }
function openProjectModal(id) {
    if (!id) { prepareNewProject(); showProjectModal(); return; }
    resetProjectForm(); $('#projectModalTitle').text(editTitle);
    $.get('/user/project_get?id=' + id, function(res) {
        if (!res.success || !res.data || !res.data.project) { showToast(res.message || msgFailed, 2); return; }
        var p = res.data.project;
        $('#projectId').val(p.id); $('#projectName').val(p.name || ''); $('#projectSlug').val(p.slug || '');
        $('#projectDesc').val(p.description || '');
        showProjectModal();
    }, 'json').fail(function() { showToast(msgFailed, 2); });
}
function saveProject() {
    if (!$('#projectName').val().trim()) { showToast(msgNameRequired, 2); return; }
    $.ajax({
        url: '/user/project_save', method: 'POST', contentType: 'application/json',
        data: JSON.stringify({
            id: parseInt($('#projectId').val()) || 0, name: $('#projectName').val(), slug: $('#projectSlug').val(),
            description: $('#projectDesc').val()
        }),
        success: function(res) {
            if (res.success) { showToast(res.message, 1); setTimeout(function(){ location.reload(); }, 600); }
            else showToast(res.message || msgSaveFailed, 2);
        },
        error: function() { showToast(msgSaveFailed, 2); }
    });
}
function deleteProject(id, name) {
    var msg = msgDeleteConfirm.replace('{name}', name || '');
    var run = function() {
        $.post('/user/project_delete', {id: id}, function(res) {
            if (res.success) { showToast(res.message || msgDeleted, 1); setTimeout(function(){ location.reload(); }, 600); }
            else showToast(res.message || msgFailed, 2);
        }, 'json');
    };
    if (typeof BootstrapModal !== 'undefined') BootstrapModal.confirm(msg, {icon:3, title:msgDeleteTitle}, function(){ run(); });
    else if (confirm(msg)) run();
}
function batchDeleteProjects() {
    var ids = []; $('.project-checkbox:checked').each(function(){ ids.push(parseInt($(this).val())); });
    if (!ids.length) return;
    var msg = msgBatchDeleteConfirm.replace('{count}', ids.length);
    var run = function() {
        $.ajax({ url:'/user/project_batch_delete', method:'POST', contentType:'application/json', data:JSON.stringify({ids:ids}),
            success:function(res){ if(res.success){ showToast(res.message,1); setTimeout(function(){ location.reload(); },600);} else showToast(res.message||msgFailed,2); },
            error:function(){ showToast(msgFailed,2); }
        });
    };
    if (typeof BootstrapModal !== 'undefined') BootstrapModal.confirm(msg, {icon:3, title:msgBatchDeleteTitle}, function(){ run(); });
    else if (confirm(msg)) run();
}
</script>
{{end}}