{{define "h5-tabbar-front"}}
<nav class="h5-tabbar h5-tabbar--front" aria-label="{{T "h5_tabbar_aria_front"}}">
    <a href="/" class="h5-tabbar__item{{if and (eq .CurrentPage "docs") (or (not .Data) (not .Data.HasDocument))}} is-active{{end}}" data-h5-tab="home">
        <i class='bx bx-home-alt'></i>
        <span>{{T "h5_tab_home"}}</span>
    </a>
    <a href="/docs" class="h5-tabbar__item{{if and (eq .CurrentPage "docs") .Data .Data.HasDocument}} is-active{{end}}" data-h5-tab="docs" id="h5TabDocs">
        <i class='bx bx-book-open'></i>
        <span>{{T "h5_tab_docs"}}</span>
    </a>
    <button type="button" class="h5-tabbar__item" data-h5-tab="search" id="h5TabSearch" title="{{T "h5_tab_search"}}">
        <i class='bx bx-search'></i>
        <span>{{T "h5_tab_search"}}</span>
    </button>
    {{if .User}}
    <a href="/user" class="h5-tabbar__item{{if hasPrefix .CurrentPage "user-"}} is-active{{end}}" data-h5-tab="mine">
        <i class='bx bx-user'></i>
        <span>{{T "h5_tab_mine"}}</span>
    </a>
    {{else}}
    <a href="/login" class="h5-tabbar__item{{if or (eq .CurrentPage "login") (eq .CurrentPage "register")}} is-active{{end}}" data-h5-tab="mine">
        <i class='bx bx-user'></i>
        <span>{{T "h5_tab_mine"}}</span>
    </a>
    {{end}}
</nav>
<script>
(function() {
    var searchTab = document.getElementById('h5TabSearch');
    if (searchTab) {
        searchTab.addEventListener('click', function() {
            var btn = document.getElementById('searchBtn');
            if (btn) {
                btn.click();
                return;
            }
            window.location.href = '/';
        });
    }
    var docsTab = document.getElementById('h5TabDocs');
    if (docsTab) {
        docsTab.addEventListener('click', function(e) {
            var sidebar = document.getElementById('docsSidebar');
            var toggle = document.getElementById('docsMenuToggle');
            if (sidebar && toggle && window.matchMedia('(max-width: 992px)').matches) {
                var path = window.location.pathname || '';
                if (path !== '/docs' && path !== '/') {
                    e.preventDefault();
                    toggle.click();
                }
            }
        });
    }
})();
</script>
{{end}}

{{define "h5-tabbar-user"}}
{{if ne .CurrentPage "user-document-preview"}}
<nav class="h5-tabbar h5-tabbar--panel" aria-label="{{T "h5_tabbar_aria_user"}}">
    <a href="/user" class="h5-tabbar__item{{if eq .CurrentPage "user-dashboard"}} is-active{{end}}" data-h5-tab="overview">
        <i class='bx bx-grid-alt'></i>
        <span>{{T "h5_tab_overview"}}</span>
    </a>
    <a href="/user/documents" class="h5-tabbar__item{{if or (eq .CurrentPage "user-documents") (eq .CurrentPage "user-projects")}} is-active{{end}}" data-h5-tab="documents">
        <i class='bx bx-file'></i>
        <span>{{T "h5_tab_documents"}}</span>
    </a>
    <a href="/user/document_edit" class="h5-tabbar__item{{if or (eq .CurrentPage "user-publish") (eq .CurrentPage "user-document-edit")}} is-active{{end}}" data-h5-tab="publish">
        <i class='bx bx-upload'></i>
        <span>{{T "h5_tab_publish"}}</span>
    </a>
    <button type="button" class="h5-tabbar__item{{if or (eq .CurrentPage "user-profile") (eq .CurrentPage "user-password") (eq .CurrentPage "user-favorites") (eq .CurrentPage "user-comments") (eq .CurrentPage "user-reports") (eq .CurrentPage "user-stats") (eq .CurrentPage "user-attachments")}} is-active{{end}}" data-h5-tab="more" id="h5TabUserMore" title="{{T "h5_tab_more"}}">
        <i class='bx bx-menu'></i>
        <span>{{T "h5_tab_more"}}</span>
    </button>
</nav>
<script>
(function() {
    var moreBtn = document.getElementById('h5TabUserMore');
    var toggle = document.getElementById('userSidebarToggle');
    if (moreBtn && toggle) {
        moreBtn.addEventListener('click', function() {
            if (window.matchMedia('(max-width: 992px)').matches) {
                toggle.click();
            } else {
                window.location.href = '/user/profile';
            }
        });
    } else if (moreBtn) {
        moreBtn.addEventListener('click', function() {
            window.location.href = '/user/profile';
        });
    }
})();
</script>
{{end}}
{{end}}

{{define "h5-tabbar-admin"}}
<nav class="h5-tabbar h5-tabbar--admin" aria-label="{{T "h5_tabbar_aria_admin"}}">
    <a href="/admin" class="h5-tabbar__item{{if eq .CurrentPage "admin-dashboard"}} is-active{{end}}" data-h5-tab="overview">
        <i class='bx bx-home-alt'></i>
        <span>{{T "h5_tab_overview"}}</span>
    </a>
    <a href="/admin/documents" class="h5-tabbar__item{{if eq .CurrentPage "admin-documents"}} is-active{{end}}" data-h5-tab="documents">
        <i class='bx bx-file'></i>
        <span>{{T "h5_tab_documents"}}</span>
    </a>
    <a href="/admin/audit" class="h5-tabbar__item{{if or (eq .CurrentPage "admin-audit") (eq .CurrentPage "admin-comments") (eq .CurrentPage "admin-reports")}} is-active{{end}}" data-h5-tab="audit">
        <i class='bx bx-check-shield'></i>
        <span>{{T "h5_tab_audit"}}</span>
    </a>
    <button type="button" class="h5-tabbar__item{{if and (ne .CurrentPage "admin-dashboard") (ne .CurrentPage "admin-documents") (ne .CurrentPage "admin-audit") (ne .CurrentPage "admin-comments") (ne .CurrentPage "admin-reports")}} is-active{{end}}" data-h5-tab="more" id="h5TabAdminMore" title="{{T "h5_tab_more"}}">
        <i class='bx bx-menu'></i>
        <span>{{T "h5_tab_more"}}</span>
    </button>
</nav>
<script>
(function() {
    var moreBtn = document.getElementById('h5TabAdminMore');
    var toggle = document.getElementById('adminSidebarToggle');
    if (moreBtn && toggle) {
        moreBtn.addEventListener('click', function() {
            if (window.matchMedia('(max-width: 992px)').matches) {
                toggle.click();
            }
        });
    }
})();
</script>
{{end}}