{{template "layout.html" .}}

{{define "content"}}
<div class="user-publish-page">
    <div class="card mb-3">
        <div class="card-body">
            <div class="user-page-head">
                <div class="user-page-head-main">
                    <h5>{{T "user_publish_document"}}</h5>
                    <p class="text-muted">{{T "user_publish_subtitle"}}</p>
                </div>
                <div class="user-page-head-actions">
                    <a href="/user/projects" class="btn btn-outline-secondary btn-sm"><i class='bx bx-collection'></i> {{T "user_documents_go_categories"}}</a>
                    <a href="/user/documents" class="btn btn-outline-secondary btn-sm"><i class='bx bx-file'></i> {{T "user_documents_manage"}}</a>
                </div>
            </div>
        </div>
    </div>

    {{if .Data.Flash}}
    <div class="alert alert-warning alert-dismissible fade show py-2" role="alert">
        {{if eq .Data.Flash "no_access"}}{{T "user_flash_no_access"}}{{else if eq .Data.Flash "directory_error"}}{{T "user_flash_directory_error"}}{{else if eq .Data.Flash "no_project"}}{{T "user_flash_no_project"}}{{else}}{{.Data.Flash}}{{end}}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    {{end}}

    <div class="pub-tree-layout">
        <div class="pub-tree-panel">
            <div class="pub-tree-head">{{T "user_select_publish_location"}}</div>
            <ul class="pub-tree" id="publishTree">
                {{range .Data.CategoryTree}}
                {{$dirID := index . "id"}}
                {{$dirPath := index . "path"}}
                {{$dirLabel := index . "label"}}
                <li class="pub-tree-node pub-tree-dir{{if eq $.Data.ExpandDirectoryID $dirID}} expanded{{end}}" data-directory-id="{{$dirID}}">
                    <div class="pub-tree-row pub-tree-toggle">
                        <i class='bx bx-chevron-right pub-tree-chevron'></i>
                        <i class='bx bx-folder-open text-primary'></i>
                        <span>{{$dirLabel}}</span>
                        {{if $dirPath}}<span class="text-muted small ms-1">({{$dirPath}})</span>{{end}}
                    </div>
                    <ul class="pub-tree-children">
                        <li class="pub-tree-direct-wrap pub-tree-direct-action pub-tree-target"
                            data-type="direct"
                            data-directory-id="{{$dirID}}"
                            data-directory-label="{{$dirLabel}}"
                            data-name="{{T "user_documents_scope_direct"}}"
                            {{if and (eq $.Data.SelectedPublishTarget.type "direct") (eq $.Data.SelectedPublishTarget.directory_id $dirID)}}data-initial-selected="1"{{end}}>
                            <div class="pub-tree-direct-card">
                                <div class="pub-tree-direct-main">
                                    <i class='bx bx-upload'></i>
                                    <span>{{T "user_documents_scope_direct"}}</span>
                                </div>
                                <div class="pub-tree-direct-desc">{{T "user_direct_publish_tree_hint"}}</div>
                            </div>
                        </li>
                        <li class="pub-tree-section-label">{{T "user_tree_my_categories"}}</li>
                        {{range index . "categories"}}
                        {{$catID := index . "id"}}
                        <li class="pub-tree-node pub-tree-target pub-tree-category"
                            data-type="category"
                            data-directory-id="{{$dirID}}"
                            data-directory-label="{{$dirLabel}}"
                            data-project-id="{{$catID}}"
                            data-name="{{index . "name"}}"
                            {{if and (eq $.Data.SelectedPublishTarget.type "category") (eq $.Data.SelectedPublishTarget.project_id $catID)}}data-initial-selected="1"{{end}}>
                            <div class="pub-tree-row">
                                <i class='bx bx-folder text-warning'></i>
                                <span>{{index . "name"}}</span>
                            </div>
                        </li>
                        {{end}}
                        {{if not (index . "categories")}}
                        <li class="pub-tree-empty-cat">
                            <span class="empty-cat-hint">{{T "user_no_user_category_hint"}}</span>
                        </li>
                        {{end}}
                        <li class="pub-tree-add">
                            <a href="/user/projects?directory_id={{$dirID}}"><i class='bx bx-plus'></i> {{T "user_new_project"}}</a>
                        </li>
                    </ul>
                </li>
                {{end}}
            </ul>
        </div>

        <div class="publish-action-panel empty" id="publishActionPanel">
            <div class="pub-cat-section-title mb-2">{{T "user_publish_selected_label"}}</div>
            <div class="publish-direct-info" id="publishDirectInfo" style="display:none;">
                <span class="publish-mode-badge">{{T "user_publish_mode_direct"}}</span>
                <div class="publish-direct-box">
                    <div class="publish-direct-dir" id="publishDirectDir">—</div>
                    <p class="publish-direct-hint mb-0">{{T "user_direct_publish_hint"}}</p>
                </div>
            </div>
            <div class="publish-category-info" id="publishCategoryInfo" style="display:none;">
                <div class="publish-selected-path" id="publishSelectedPath"><i class='bx bx-folder text-warning'></i> <span>—</span></div>
            </div>
            <div class="action-grid" id="publishActionButtons" style="display:none;">
                <a href="#" class="action-chip primary" id="btnPublishDoc">
                    <i class='bx bx-edit-alt'></i> {{T "user_btn_publish_doc"}}
                </a>
                <a href="#" class="action-chip" id="btnManageDocs">
                    <i class='bx bx-list-ul'></i> {{T "user_btn_manage_docs"}}
                </a>
            </div>
            <div class="publish-empty-state" id="publishEmptyState">
                <div class="publish-empty-icon"><i class='bx bx-map-pin'></i></div>
                <h5 class="publish-empty-title">{{T "user_publish_empty_title"}}</h5>
                <p class="publish-empty-desc">{{T "user_publish_select_tree_hint"}}</p>
                <div class="publish-empty-steps">
                    <div class="publish-empty-step">
                        <span class="step-num">1</span>
                        <div>
                            <strong>{{T "user_publish_empty_step1_title"}}</strong>
                            <small>{{T "user_publish_empty_step1_desc"}}</small>
                        </div>
                        <i class='bx bx-chevron-down step-icon'></i>
                    </div>
                    <div class="publish-empty-step">
                        <span class="step-num">2</span>
                        <div>
                            <strong>{{T "user_publish_empty_step2_title"}}</strong>
                            <small>{{T "user_publish_empty_step2_desc"}}</small>
                        </div>
                        <i class='bx bx-folder-open step-icon'></i>
                    </div>
                    <div class="publish-empty-step">
                        <span class="step-num">3</span>
                        <div>
                            <strong>{{T "user_publish_empty_step3_title"}}</strong>
                            <small>{{T "user_publish_empty_step3_desc"}}</small>
                        </div>
                        <i class='bx bx-edit-alt step-icon'></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
function selectPublishTarget($node) {
    if (!$node || !$node.length) return;
    $('.pub-tree-target').removeClass('selected');
    $node.addClass('selected');
    var type = $node.data('type');
    var dirLabel = $node.data('directory-label') || '';
    var name = $node.data('name') || '';
    var $panel = $('#publishActionPanel');
    $panel.removeClass('empty mode-direct mode-category');
    $('#publishEmptyState').hide();
    if (type === 'direct') {
        $panel.addClass('mode-direct');
        $('#publishDirectInfo').show();
        $('#publishCategoryInfo').hide();
        $('#publishDirectDir').text(dirLabel || name);
    } else {
        $panel.addClass('mode-category');
        $('#publishDirectInfo').hide();
        $('#publishCategoryInfo').show();
        var path = dirLabel ? (dirLabel + ' / ' + name) : name;
        $('#publishSelectedPath span').text(path);
    }
    var editUrl, manageUrl;
    if (type === 'direct') {
        var dirId = parseInt($node.data('directory-id')) || 0;
        editUrl = '/user/document_edit?directory_id=' + dirId;
        manageUrl = '/user/documents?directory_id=' + dirId;
    } else {
        var pid = parseInt($node.data('project-id')) || 0;
        editUrl = '/user/document_edit?project_id=' + pid;
        manageUrl = '/user/documents?project_id=' + pid;
    }
    $('#btnPublishDoc').attr('href', editUrl);
    $('#btnManageDocs').attr('href', manageUrl);
    $('#publishActionButtons').show();
}
function togglePubTreeDir($dir, forceExpand) {
    if (!$dir || !$dir.length) return;
    var isExpanded = $dir.hasClass('expanded');
    if (forceExpand === true && isExpanded) return;
    if (forceExpand === false && !isExpanded) return;
    if (forceExpand === true) {
        $('.pub-tree-dir').not($dir).removeClass('expanded');
        $dir.addClass('expanded');
        return;
    }
    if (forceExpand === false) {
        $dir.removeClass('expanded');
        return;
    }
    if (isExpanded) {
        $dir.removeClass('expanded');
        return;
    }
    $('.pub-tree-dir').not($dir).removeClass('expanded');
    $dir.addClass('expanded');
}

$(function() {
    var $tree = $('#publishTree');
    $tree.addClass('pub-tree-init');

    $(document).on('click', '.pub-tree-toggle', function(e) {
        e.stopPropagation();
        togglePubTreeDir($(this).closest('.pub-tree-dir'));
    });
    $(document).on('click', '.pub-tree-target.pub-tree-category > .pub-tree-row', function(e) {
        e.stopPropagation();
        selectPublishTarget($(this).closest('.pub-tree-target'));
    });
    $(document).on('click', '.pub-tree-direct-action .pub-tree-direct-card', function(e) {
        e.stopPropagation();
        selectPublishTarget($(this).closest('.pub-tree-direct-action'));
    });
    var $initial = $('.pub-tree-target[data-initial-selected="1"]').first();
    var $expandDir;
    if ($initial.length) {
        $expandDir = $initial.closest('.pub-tree-dir');
    } else {
        $expandDir = $('.pub-tree-dir.expanded').first();
        if (!$expandDir.length) {
            $expandDir = $('.pub-tree-dir').first();
        }
    }
    togglePubTreeDir($expandDir, true);
    if ($initial.length) {
        selectPublishTarget($initial);
    }

    requestAnimationFrame(function() {
        requestAnimationFrame(function() {
            $tree.removeClass('pub-tree-init');
        });
    });
});
</script>
{{end}}