<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/css/material-components-web.min.css">
    <link rel="stylesheet" type="text/css" href="/css/iconfont/material-icons.css">
    <link rel="stylesheet" type="text/css" href="/css/main.css">
    <script type="text/javascript" src="/js/material-components-web.min.js"></script>
    <script type="text/javascript" src="/js/main.js"></script>
</head>

<body>
    <header class="mdc-top-app-bar mdc-top-app-bar--fixed">
        <div class="mdc-top-app-bar__row">
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                <a href="/" class="index">
                    <h2 class="mdc-top-app-bar__title"><span class="material-icons">school</span> HatMeta</h2>
                </a>
            </section>
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
                <div id="toolbar" class="toolbar mdc-menu-surface--anchor mdc-top-app-bar__action-item">
                    <button id="menu-button"
                        class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">more_vert</button>
                    <div class="mdc-menu mdc-menu-surface">
                        <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
                            <% if (!locals.user) { %>
                            <li class="mdc-list-item" role="menuitem">
                                <button class="mdc-button" aria-label="login" onclick="window.location.href='/login'">
                                    <span class="material-icons mdc-button__icon">perm_identity</span><span
                                        class="mdc-button__label">LOGIN</span>
                                </button>
                            </li>
                            <li class="mdc-list-item" role="menuitem">
                                <button class="mdc-button" aria-label="upload"
                                    onclick="window.location.href='/upload'"><span
                                        class="material-icons mdc-button__icon">cloud_upload</span><span
                                        class="mdc-button__label">UPLOAD</span></button>
                            </li>
                            <% } else { %>
                            <li class="mdc-list-item" role="menuitem">
                                <button class="mdc-button" aria-label="profile"
                                    onclick="window.location.href='/user/profile'"><span
                                        class="material-icons mdc-button__icon">perm_identity</span><span
                                        class="mdc-button__label">PROFILE</span></button>
                            </li>
                            <li class="mdc-list-item" role="menuitem">
                                <button class="mdc-button" aria-label="folder"
                                    onclick="window.location.href='/user/files'"><span
                                        class="material-icons mdc-button__icon">folder</span><span
                                        class="mdc-button__label">FOLDER</span></button>
                            </li>
                            <li class="mdc-list-item" role="menuitem">
                                <button class="mdc-button" aria-label="upload"
                                    onclick="window.location.href='/user/upload'"><span
                                        class="material-icons mdc-button__icon">cloud_upload</span><span
                                        class="mdc-button__label">UPLOAD</span></button>
                            </li>
                            <li class="mdc-list-item" role="menuitem">
                                <button class="mdc-button" aria-label="logout"
                                    onclick="window.location.href='/logout'"><span
                                        class="material-icons mdc-button__icon">exit_to_app</span><span
                                        class="mdc-button__label">LOGOUT</span></button>
                            </li>
                            <% } %>
                        </ul>
                    </div>
                </div>
            </section>
        </div>
    </header>
    <br><br><br><br>
    <div class="mdc-layout-grid">
        <div class="mdc-layout-grid__inner">
            <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">