#? stdtmpl | standard
#
## --==--==--==--==--==--==--==--==--==--==-- #
##   proc genMain : master web page once login
## --==--==--==--==--==--==--==--==--==--==-- #
#proc genMain(c: var TData): string =
# result = ""

    <link rel="stylesheet" href="css/styles.css">
    <meta http-equiv="refresh" content="0; URL=./login" />

#end proc
#
# import snippet_html
# import snippet_icons
#proc genSecret(c: var TData, columnLeftInfo: var ColomnLeftData, ColomnRightInfo: var ColomnRightData): string =
# result = ""
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Joplin-TheNewWeb</title>
        <link rel="stylesheet" href="css/styles.css">
        <link rel="stylesheet" href="css/notif-bell.css">
        <link rel="stylesheet" href="css/dashboard.css">  
        <script src="js/script.js" defer></script>
        
    </head>

    <body>
        <header class="header">
            <button class="menu-icon-btn" data-menu-icon-btn>
                # var icon_menu = Menu_icon()
                ${icon_menu}
            </button>

            <div class="search-wrapper">
                <label for="search"></label>
                <input type="search" id="search" data-search>
            </div>

            <button class="notifBell-btn" data-notifBell-btn>
                # var notifBell = show_notification_bell(1)
                ${notifBell}
            </button>

        </header>
        <div class="container">
            <aside class="sidebar" data-sidebar>
                <div class="top-sidebar">
                    <a href="#" class="channel-logo"><img src="images/logo.png" alt="Channel Logo" width="15"
                            height="15"></a>
                    <div class="hidden-sidebar your-channel">Joplin</div>
                    <div class="hidden-sidebar channel-name">The New Web</div>
                </div>
                <div class="middle-sidebar">
                    <ul class="sidebar-list">
                        
                        ## Change the visual active option on the sidebar
                        # var active_newNote: string = ""
                        # var active_search: string = ""
                        # var active_shortcuts: string = ""
                        # var active_notes: string = ""
                        # var active_notebooks: string = ""
                        # var active_tags: string = ""
                        # var active_dashbord: string = ""
                        # var active_settings: string = ""
                        # var active_sendFeedBack: string = ""
                        # if columnLeftInfo.option == newNote:
                        #   active_newNote = "active"
                        # elif columnLeftInfo.option == search:
                        #   active_search = "active"                        
                        # elif columnLeftInfo.option == shortcuts:
                        #   active_shortcuts = "active" 
                        # elif columnLeftInfo.option == notes:
                        #   active_notes = "active"
                        # elif columnLeftInfo.option == notebooks:
                        #   active_notebooks = "active"
                        # elif columnLeftInfo.option == tags:
                        #   active_tags = "active"
                        # elif columnLeftInfo.option == dashbord:
                        #   active_dashbord = "active"
                        # end if

                        <li class="sidebar-list-item ${active_newNote}">

                            <!-- Nouvelle Note dans la bar de navigation -->
                            <a href="/secret?msg=newNote" class="sidebar-link">

                                # var icon_newNote = NewNote_icon()
                                ${icon_newNote}

                                <div class="hidden-sidebar">New Note</div>
                            </a>
                        </li>
                        <li class="sidebar-list-item ${active_search}">

                            <!-- Recherche dans la bar de navigation -->
                            <a href="/secret?msg=search" class="sidebar-link">

                                # var icon_search = Search_icon()
                                ${icon_search}

                                <div class="hidden-sidebar">Search</div>
                            </a>
                        </li>

                        <!--Favoris  dans la bar de navigation -->
                        <li class="sidebar-list-item ${active_shortcuts}">
                            <a href="/secret?msg=shortcuts" class="sidebar-link">

                                # var icon_shortcuts = Shortcuts_icon()
                                ${icon_shortcuts}

                                <div class="hidden-sidebar">Shortcuts</div>
                            </a>
                        </li>

                        <!--Notes dans la bar de navigation -->
                        <li class="sidebar-list-item ${active_notes}">
                            <a href="/secret?msg=notes" class="sidebar-link">

                                # var icon_Notes = Notes_icon()
                                ${icon_Notes}

                                <div class="hidden-sidebar">Notes</div>
                            </a>
                        </li>

                        <!--Notebooks dans la bar de navigation -->
                        <li class="sidebar-list-item ${active_notebooks}">
                            <a href="/secret?msg=notebooks" class="sidebar-link">

                                # var icon_Notebooks = Notebooks_icon()
                                ${icon_Notebooks}

                                <div class="hidden-sidebar">Notebooks</div>
                            </a>
                        </li>

                        <!--Tags  dans la bar de navigation -->
                        <li class="sidebar-list-item ${active_tags}">
                            <a href="/secret?msg=tags" class="sidebar-link">

                                # var icon_Tags = Tags_icon()
                                ${icon_Tags}

                                <div class="hidden-sidebar">Tags</div>
                            </a>
                        </li>

                        <!--Dashbord  dans la bar de navigation -->
                        <li class="sidebar-list-item ${active_dashbord}">
                            <a href="/secret?msg=dashbord" class="sidebar-link">

                                # var icon_Dashbord = Dashbord_icon()
                                ${icon_Dashbord}

                                <div class="hidden-sidebar">Dashbord</div>
                            </a>
                        </li>

                    </ul>
                </div>
                <div class="bottom-sidebar">
                    <ul class="sidebar-list">
                        <li class="sidebar-list-item ${active_settings}">
                            <a href="/secret?msg=settings" class="sidebar-link">

                                # var icon_Settings = Settings_icon()
                                ${icon_Settings}

                                <div class="hidden-sidebar">Settings</div>
                            </a>
                        </li>

                        <li class="sidebar-list-item">
                            <a href="/logout" class="sidebar-link">

                                # var icon_Logout = Logout_icon()
                                ${icon_Logout}

                                <div class="hidden-sidebar">Logout</div>
                            </a>
                        </li>
                        <li class="sidebar-list-item ">
                                
                                # if columnLeftInfo.j_status:
                                    <a href="/secret?msg=startStopJoplin" class="sidebar-link">    
                                    # var status_green = status_joplin_green()
                                    ${status_green}
                                # else:
                                    <a href="/secret?msg=startStopJoplin" class="sidebar-link">
                                    # var status_red = status_joplin_red()
                                    ${status_red}
                                # end if
                                <div class="hidden-sidebar">Joplin Status</div>
                            </a>
                        </li>

                        <li class="sidebar-list-item ${active_sendFeedBack}">
                            <a href="/secret?msg=sendFeedBack" class="sidebar-link">

                                # var icon_SendFeedback = SendFeedback_icon()
                                ${icon_SendFeedback}

                                <div class="hidden-sidebar">Send Feedback</div>
                            </a>
                        </li>
                    </ul>
                </div>
            </aside>
            <div class="row">
                <div class="column left">
                    # if columnLeftInfo.option == newNote:
                        <h2>New Note</h2>
                        <div class="scrollbar scrollbar-primary">
                            <div class="force-overflow">
                                <div class="ColomnLeftJoplinNewNote">                            
                                <h5>Todo ...</h5>
                                </div>      
                            </div>
                        </div>
                    # elif columnLeftInfo.option == search:
                        <h2>Search</h2>
                        <div class="scrollbar scrollbar-primary">
                            <div class="force-overflow">
                                <div class="ColomnLeftJoplinSearch">                            
                                    <h5>Todo ...</h5>
                                </div>      
                            </div>
                        </div>
                    # elif columnLeftInfo.option == shortcuts:
                        <h2>Shortcuts</h2>
                        <div class="scrollbar scrollbar-primary">
                            <div class="force-overflow">
                                <div class="ColomnLeftJoplinShortcuts">                            
                                    <h5>Todo ...</h5>
                                </div>      
                            </div>
                        </div>
                    # elif columnLeftInfo.option == notes:
                        <h2>Notes</h2> <h5>${columnLeftInfo.j_notes_nb}</h5>    
                        <div class="scrollbar scrollbar-primary">
                            <div class="force-overflow">                                                            
                                # for i in 0 .. (columnLeftInfo.j_notes.id.len() - 1) :
                                    <div class="columnLeftJoplinNotes">
                                        <a href="/secret?msg=notes&noteid=${columnLeftInfo.j_notes.id[i]}" class="sidebar-note-link">${columnLeftInfo.j_notes.title[i]}</a>
                                        <p class="sidebar-note-date">${columnLeftInfo.j_notes.created_time[i]} </p>                                    
                                </div>
                                # end for                                      
                            </div>
                        </div>
                    # elif columnLeftInfo.option == notebooks:
                        <h2>Notebooks</h2>
                        <div class="scrollbar scrollbar-primary">
                            <div class="force-overflow">
                                <div class="ColomnLeftJoplinNotebooks">                            
                                # for i in columnLeftInfo.j_notebooks.title:
                                    <p> ${i} </p>
                                # end for
                                </div>      
                            </div>
                        </div>
                    # elif columnLeftInfo.option == tags:
                        <h2>Tags</h2>
                        <div class="scrollbar scrollbar-primary">
                            <div class="force-overflow">
                                <div class="ColomnLeftJoplinTags">                            
                                # for i in columnLeftInfo.j_tags.title:
                                    <p> ${i} </p>
                                # end for
                                </div>      
                            </div>
                        </div>
                    # elif columnLeftInfo.option == dashbord:
                        <h2>Dashboard</h2>
                        <div class="scrollbar scrollbar-primary">
                            <div class="force-overflow">
                                <div class="ColomnLeftJoplinDashboard">                            
                                
                                    # var dashboardHTML = dashboardHtml(columnLeftInfo)
                                    ${dashboardHTML}
                                
                                </div>      
                            </div>
                        </div>
                    # end if
                </div>
                <div class="column right" >                
                    # if columnLeftInfo.option == newNote:
                        <h2>New Note !!</h2>
                        <p>Some text..</p>
                    # elif columnLeftInfo.option == notes:
                        # if ColomnRightInfo.j_SelectedNote.id != "":
                            <h2> ${ColomnRightInfo.j_SelectedNote.title}</h2>      
                            <hr width="65%"></hr>
                            <br>
                            <p>${ColomnRightInfo.j_SelectedNote.body}</p>
                        # else :
                            <h2>Click on note to see it !!</h2>
                        # end if

                    # end if
                </div>
            </div>
        </div>
        <script
            src="https://code.jquery.com/jquery-2.2.4.min.js"
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous">
        </script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js'></script>
        <script src="js/alertify_notif.js" defer></script>
    </body>

    </html>
#end proc