{{define "title"}}Untitled{{end}}
{{define "content"}}{{end}}
{{define "scripts"}}{{end}}
{{define "base"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/static/css/bulma.min.css?build={{.BuildHash}}">
    <link rel="stylesheet" type="text/css" href="/static/css/bulma-prefers-dark.css?build={{.BuildHash}}" />
    <link rel="stylesheet" href="/static/fontawesome-free-6.1.2-web/css/all.css">
    <link rel="stylesheet" href="/static/css/theme.css?build={{.BuildHash}}">
    <title>{{template "title" .}} - {{ .Title }}</title>
</head>
<body>
    <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="/">
                {{ PrettyTitle }}
            </a>

            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>

        <div id="navbarBasicExample" class="navbar-menu">
            <div class="navbar-start">
                {{if not .LoggedIn}}
                <a class="navbar-item" href="/">
                    <span class="icon"><i class="fa fa-home"></i></span>
                    <span>Home</span>
                </a>

                <a class="navbar-item" href="/about">
                    About
                </a>

                <a class="navbar-item" href="/features">
                    Features
                </a>

                <a class="navbar-item" href="/faq">
                    FAQ
                </a>
                {{end}}

                {{if .LoggedIn}}
                <a class="navbar-item px-1" href="/me">
                    <span class="icon"><i class="fa fa-house-user"></i></span>
                    <span>Home</span>
                </a>

                <a class="navbar-item px-1" href="/chat">
                    <span class="icon"><i class="fa fa-message"></i></span>
                    <span>Chat</span>
                    {{if .NavChatStatistics.UserCount}}<span class="nonshy-navbar-notification-tag is-info ml-1">{{.NavChatStatistics.UserCount}}</span>{{end}}
                </a>

                <a class="navbar-item px-1" href="/forum">
                    <span class="icon"><i class="fa fa-comments"></i></span>
                    <span>Forum</span>
                </a>

                <a class="navbar-item px-1" href="/photo/gallery">
                    <span class="icon"><i class="fa fa-image"></i></span>
                    <span>Gallery</span>
                </a>

                <a class="navbar-item px-1" href="/friends{{if gt .NavFriendRequests 0}}?view=requests{{end}}">
                    <span class="icon"><i class="fa fa-user-group"></i></span>
                    <span>Friends</span>
                    {{if .NavFriendRequests}}<span class="nonshy-navbar-notification-tag is-warning ml-1">{{.NavFriendRequests}}</span>{{end}}
                </a>

                <a class="navbar-item px-1" href="/messages">
                    <span class="icon"><i class="fa fa-envelope"></i></span>
                    <span>Messages</span>
                    {{if .NavUnreadMessages}}<span class="nonshy-navbar-notification-tag is-warning ml-1">{{.NavUnreadMessages}}</span>{{end}}
                </a>

                <a class="navbar-item px-1" href="/members">
                    <span class="icon"><i class="fa fa-people-group"></i></span>
                    <span>People</span>
                </a>
                {{end}}

                <div id="navbar-more" class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                        More
                    </a>

                    <div class="navbar-dropdown is-active">
                        <a class="navbar-item" href="/about">
                            <span class="icon"><i class="fa fa-circle-info"></i></span>
                            <span>About {{PrettyTitle}}</span>
                        </a>
                        <a class="navbar-item" href="/faq">
                            <span class="icon"><i class="fa fa-circle-question"></i></span>
                            <span>FAQ</span>
                        </a>
                        <a class="navbar-item" href="/tos">
                            <span class="icon"><i class="fa fa-list"></i></span>
                            <span>Terms of Service</span>
                        </a>
                        <a class="navbar-item" href="/privacy">
                            <span class="icon"><i class="fa fa-file-shield"></i></span>
                            <span>Privacy Policy</span>
                        </a>
                        <a class="navbar-item" href="/contact">
                            <span class="icon"><i class="fa fa-message"></i></span>
                            <span>Contact</span>
                        </a>
                        <hr class="navbar-divider">
                        <a class="navbar-item" href="/contact?intent=report">
                            <span class="icon"><i class="fa fa-triangle-exclamation"></i></span>
                            <span>Report an issue</span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="navbar-end">
                {{if .LoggedIn }}
                    <div id="navbar-user" class="navbar-item has-dropdown is-hoverable">
                        <a class="navbar-link" href="/me{{if .NavUnreadNotifications}}#notifications{{end}}">
                            <div class="columns is-mobile is-gapless">
                                <div class="column is-narrow">
                                    <figure class="image is-24x24 mr-2">
                                        {{if gt .CurrentUser.ProfilePhoto.ID 0}}
                                        <img src="{{PhotoURL .CurrentUser.ProfilePhoto.CroppedFilename}}" class="is-rounded">
                                        {{else}}
                                        <img src="/static/img/shy.png" class="is-rounded has-background-warning">
                                        {{end}}
                                    </figure>
                                </div>
                                <div class="column">
                                    {{.CurrentUser.Username}}
                                    {{if .NavUnreadNotifications}}<span class="nonshy-navbar-notification-tag is-warning ml-1">{{.NavUnreadNotifications}}</span>{{end}}
                                    {{if .NavAdminNotifications}}<span class="nonshy-navbar-notification-tag is-danger ml-1">{{.NavAdminNotifications}}</span>{{end}}
                                </div>
                            </div>
                        </a>

                        <div class="navbar-dropdown is-right is-hoverable">
                            <a class="navbar-item" href="/me{{if .NavUnreadNotifications}}#notifications{{end}}">
                                <span class="icon"><i class="fa fa-home-user"></i></span>
                                <span>Dashboard</span>
                                {{if .NavUnreadNotifications}}
                                    <span class="nonshy-navbar-notification-tag is-warning ml-1">
                                        <span class="icon"><i class="fa fa-bell"></i></span>
                                        <span>{{.NavUnreadNotifications}}</span>
                                    </span>
                                {{end}}
                            </a>
                            <a class="navbar-item" href="/u/{{.CurrentUser.Username}}">
                                <span class="icon"><i class="fa fa-user"></i></span>
                                <span>My Profile</span>
                            </a>
                            <a class="navbar-item" href="/photo/u/{{.CurrentUser.Username}}">
                                <span class="icon"><i class="fa fa-image"></i></span>
                                <span>My Photos</span>
                            </a>
                            <a class="navbar-item" href="/photo/upload">
                                <span class="icon"><i class="fa fa-upload"></i></span>
                                <span>Upload Photo</span>
                            </a>
                            <a class="navbar-item" href="/photo/private">
                                <span class="icon"><i class="fa fa-eye"></i></span>
                                <span>Private Photos</span>
                            </a>
                            {{if .CurrentUser.IsInnerCircle}}
                            <a class="navbar-item" href="/inner-circle">
                                <span class="icon"><img src="/static/img/circle-16.png"></span>
                                <span>Inner circle</span>
                            </a>
                            {{end}}
                            <a class="navbar-item" href="/settings">
                                <span class="icon"><i class="fa fa-gear"></i></span>
                                <span>Settings</span>
                            </a>
                            {{if .CurrentUser.IsAdmin}}
                            <a class="navbar-item has-text-danger" href="/admin">
                                <span class="icon"><i class="fa fa-peace"></i></span>
                                <span>Admin</span>
                                {{if .NavAdminNotifications}}<span class="nonshy-navbar-notification-tag is-danger ml-1">{{.NavAdminNotifications}}</span>{{end}}
                            </a>
                            {{end}}
                            {{if .SessionImpersonated}}
                                <a href="/admin/unimpersonate" class="navbar-item has-text-danger">
                                    <span class="icon"><i class="fa fa-ghost"></i></span>
                                    <span>Unimpersonate</span>
                                </a>
                            {{end}}
                            <a class="navbar-item" href="/logout">
                                <span class="icon"><i class="fa fa-arrow-right-from-bracket"></i></span>
                                <span>Log out</span>
                            </a>
                        </div>
                    </div>
                {{ else }}
                    <div class="navbar-item">
                        <div class="buttons">
                            <a class="button is-primary" href="/signup">
                                <strong>Sign up</strong>
                            </a>
                            <a class="button is-light" href="/login">
                                Log in
                            </a>
                        </div>
                    </div>
                {{end}}
            </div>
        </div>
    </nav>

    <!-- Mobile: notifications badge next to hamburger menu -->
    {{if .LoggedIn}}
    <div class="mobile nonshy-mobile-notification">
        {{if .CurrentUser.Certified}}
        <a class="tag {{if gt .NavChatStatistics.UserCount 0}}is-info{{else}}is-grey{{end}} py-4"
            href="/chat">
            <span class="icon"><i class="fa fa-message"></i></span>
            {{if gt .NavChatStatistics.UserCount 0}}
                <small class="nonshy-navbar-notification-count">{{.NavChatStatistics.UserCount}}</small>
            {{end}}
        </a>

        <a class="tag is-grey py-4"
            href="/forum">
            <span class="icon"><i class="fa fa-comments"></i></span>
        </a>

        <a class="tag is-grey py-4"
            href="/photo/gallery">
            <span class="icon"><i class="fa fa-image"></i></span>
        </a>
        {{end}}

        <a class="tag {{if gt .NavFriendRequests 0}}is-warning{{else}}is-grey{{end}} py-4"
            href="/friends{{if gt .NavFriendRequests 0}}?view=requests{{end}}">
            <span class="icon"><i class="fa fa-user-group"></i></span>
            {{if gt .NavFriendRequests 0}}
                <small class="nonshy-navbar-notification-count">{{.NavFriendRequests}}</small>
            {{end}}
        </a>


        <a class="tag {{if gt .NavUnreadMessages 0}}is-warning{{else}}is-grey{{end}} py-4" href="/messages">
            <span class="icon"><i class="fa fa-envelope"></i></span>
            {{if gt .NavUnreadMessages 0}}
                <small class="nonshy-navbar-notification-count">{{.NavUnreadMessages}}</small>
            {{end}}
        </a>

        {{if gt .NavUnreadNotifications 0}}
            <a class="tag is-warning py-4" href="/me#notifications">
                <span class="icon"><i class="fa fa-bell"></i></span>
                <small class="nonshy-navbar-notification-count">{{.NavUnreadNotifications}}</small>
            </a>
        {{end}}

        {{if gt .NavAdminNotifications 0}}
            <a class="tag is-danger py-4" href="/admin">
                <span class="icon"><i class="fa fa-peace"></i></span>
                <small class="nonshy-navbar-notification-count">{{.NavAdminNotifications}}</small>
            </a>
        {{end}}
    </div>
    {{end}}

    <div class="container is-fullhd">
        {{if .Flashes}}
        <div class="notification block is-success">
            <!-- <button class="delete"></button> -->

            {{range .Flashes}}
                <div class="block">{{.}}</div>
            {{end}}
        </div>
        {{end}}

        {{if .Errors}}
        <div class="notification block is-danger">
            <!-- <button class="delete"></button> -->

            {{range .Errors}}
                <div class="block">{{.}}</div>
            {{end}}
        </div>
        {{end}}

        {{template "content" .}}

        <div class="block p-4 has-text-centered has-text-grey">
            &copy; {{.YYYY}} {{.Title}}
            <div class="columns">
                <div class="column">
                    <a href="/">Home</a>
                </div>
                <div class="column">
                    <a href="/about">About</a>
                </div>
                {{if .LoggedIn}}
                <div class="column">
                    <a href="/me">User Dashboard</a>
                </div>
                <div class="column">
                    <a href="/u/{{.CurrentUser.Username}}">My Profile</a>
                </div>
                <div class="column">
                    <a href="/settings">Settings</a>
                </div>
                <div class="column">
                    <a href="/logout">Log out</a>
                </div>
                {{else}}
                <div class="column">
                    <a href="/login">Log in</a>
                </div>
                <div class="column">
                    <a href="/signup">Sign up</a>
                </div>
                {{end}}
            </div>
        </div>
    </div>

    <script type="text/javascript" src="/static/js/bulma.js?build={{.BuildHash}}"></script>
    <script type="text/javascript" src="/static/js/likes.js?build={{.BuildHash}}"></script>
    <script type="text/javascript" src="/static/js/vue-3.2.45.js"></script>
    {{template "scripts" .}}

    <!-- Likes modal -->
    {{template "like-modal"}}

</body>
</html>
{{end}}
