<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dodo: Launcher</title>
    <link rel="stylesheet" type="text/css" href="/static/pico.2.0.6.min.css">
    <link rel="stylesheet" type="text/css" href="/static/main.css?v=0.0.22">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css">
</head>
<body class="container-fluid">
    <div id="left-panel">
        <div class="user-circle">
            <div class="circle">
                <p id="user-initial">{{ GetUserInitials .LoggedInUsername }}</p>
                <div class="tooltip-user" id="tooltip-user">
                    <p>{{ .LoggedInUsername }}</p>
					<a href="{{ .AuthBaseAddr }}/change-password" role="button" class="profile-button" target="_blank">change password</a>
                    <a href="{{ .AuthBaseAddr }}/logout" role="button" class="profile-button">log out</a>
                </div>
            </div>
        </div>
        <hr class="separator">
        <div class="app-list scrollbar-custom">
            {{range .AllAppsInfo}}
			<div class="app-container" id="{{ .Id }}">
				<div class="app-icon" data-app-id="{{ .Id }}" data-app-url="{{ .URL }}" {{ if not .URL }}data-modal-id="modal-{{ CleanAppName .Id }}"{{ end }}>
					{{.Icon}}
				</div>
				<div class="tooltip">
					<p>{{ .Name }}</p>
					{{ if .DisplayURL }}
                    <p>{{ .DisplayURL }}</p>
					{{ end }}
					{{ if .Help }}
                    <button class="help-button" id="help-button-{{ CleanAppName .Id }}">Help</button>
					{{ end }}
				</div>
                <dialog class="app-help-modal" id="modal-{{ CleanAppName .Id }}" close>
                    <article class="modal-article">
                        <header>
                            <h4>{{ .Name }}</h4>
                            <button class="close-button" id="close-help-{{ CleanAppName .Id }}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 32 32"><path fill="#d4888d" d="M16 2C8.2 2 2 8.2 2 16s6.2 14 14 14s14-6.2 14-14S23.8 2 16 2m5.4 21L16 17.6L10.6 23L9 21.4l5.4-5.4L9 10.6L10.6 9l5.4 5.4L21.4 9l1.6 1.6l-5.4 5.4l5.4 5.4z"/></svg>
                            </button>
                        </header>
                        <div class="app-help-modal-article">
                            <div class="modal-left">
                                {{ template "help-menu-template" (dict "Help" .Help "First" true) }}
                            </div>
                            <div class="modal-right" id="modal-right-help-content-{{ CleanAppName .Id }}">
                                <aside>
                                    <nav>
                                        {{ template "help-content-template" (dict "Help" .Help "First" true) }}
                                    </nav>
                                </aside>
                            </div>
                        </div>
                    </article>
                </dialog>
			</div>
            {{end}}
        </div>
    </div>
    <div id="right-panel">
        <iframe id="appFrame-default" class="appFrame" style="display: block;"></iframe>
    </div>
    {{ define "help-menu-template" }}
		{{ $first := .First }}
        <ul>
            {{ range $i, $h := .Help }}
                <li>
                    <a class="title-menu secondary" id="title-{{ CleanAppName $h.Title }}" {{ if (and $first (eq 0 $i)) }}aria-current="page"{{ end }}>{{ $h.Title }}</a>
                    {{ template "help-menu-template" (dict "Help" $h.Children "First" false) }}
                </li>
            {{ end }}
        </ul>
    {{ end }}
	{{ define "help-content-template" }}
		{{ $first := .First }}
        {{ range $i, $h := .Help }}
            <div class="help-content" id="help-content-{{ CleanAppName $h.Title }}" {{ if (and $first (eq 0 $i)) }}style="display: block;"{{ end }}> {{ $h.Contents }}</div>
            {{ template "help-content-template" (dict "Help" $h.Children "First" false) }}
        {{ end }}
    {{ end }}
    <script src="/static/main.js?v=0.0.19"></script>
</body>
</html>
