<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dodo: Launcher</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css">
    <link rel="stylesheet" type="text/css" href="/static/base.css?v=0.1.0">
    <link rel="stylesheet" type="text/css" href="/static/main.css?v=0.15.0">
</head>
<body>
    <aside id="left-panel" aria-label="Application dock" data-collapsed="false">
        <div class="dock-content" id="dock-content">
        <nav class="app-list scrollbar-custom" aria-label="Applications">
            {{ range .AllAppsInfo }}
            <div class="app-container" data-app-id="{{ .Id }}">
                <button class="app-button" type="button"
                    data-app-id="{{ .Id }}"
                    data-app-url="{{ .URL }}"
                    data-app-name="{{ .Name }}"
                    data-has-help="{{ if .Help }}true{{ else }}false{{ end }}"
                    data-launcher-caption="{{ .Id }}"
                    aria-label="{{ if .URL }}Open {{ .Name }}{{ else }}Open Help for {{ .Name }}{{ end }}"
                    aria-describedby="app-label-{{ CleanAppName .Id }}"
                    {{ if and (not .URL) .Help }}aria-controls="help-sidebar" aria-expanded="false"{{ end }}>
                    {{ .Icon }}
                </button>
                <div class="app-label" id="app-label-{{ CleanAppName .Id }}" role="tooltip">
                    <p>{{ .Name }}</p>
                    {{ if .DisplayURL }}<p>{{ .DisplayURL }}</p>{{ end }}
                </div>
            </div>
            {{ end }}
        </nav>
        <hr class="separator">
        <button class="dock-help-button" id="dock-help-button" type="button" data-launcher-caption="dock-help" aria-controls="help-sidebar" aria-expanded="false" aria-label="Open Help" aria-describedby="dock-help-label">
            <span aria-hidden="true">?</span>
            <span class="visually-hidden">Help</span>
        </button>
        <div class="app-label" id="dock-help-label" role="tooltip"><p>Help</p></div>
        <div class="account">
            <button class="account-button" id="account-button" type="button"
                data-app-id="launcher-account"
                data-app-url="{{ .AuthBaseAddr }}"
                data-app-name="Account"
                data-has-help="false"
                data-launcher-caption="account"
                aria-label="Open account details"
                aria-describedby="account-label">
                <span class="circle" aria-hidden="true">
                    <span id="user-initial">{{ GetUserInitials .LoggedInUsername }}</span>
                </span>
            </button>
            <div class="app-label" id="account-label" role="tooltip"><p>Account details</p></div>
        </div>
        </div>
        <button class="dock-toggle-button" id="dock-toggle-button" type="button" aria-controls="dock-content" aria-expanded="true" aria-label="Collapse application dock">
            <span class="dock-toggle-tab" aria-hidden="true">
                <span class="dock-toggle-icon">‹</span>
            </span>
        </button>
    </aside>
    <main id="right-panel" aria-label="Application workspace">
        <div class="workspace-pane" id="workspace-pane">
            <iframe id="appFrame-default" class="appFrame" title="Launcher welcome"></iframe>
            <section class="workspace-status" id="workspace-status" aria-live="polite" aria-atomic="true" hidden>
                <span class="loading-indicator" id="loading-indicator" aria-hidden="true"></span>
                <p id="workspace-status-message"></p>
                <div class="workspace-status-actions" id="workspace-status-actions" hidden>
                    <button id="workspace-retry-button" type="button" data-retry-active-app>Retry</button>
                    <a id="workspace-open-external" target="_blank" rel="noopener">Open in new tab</a>
                </div>
            </section>
        </div>
        <aside id="help-sidebar" aria-labelledby="help-sidebar-title" data-help-open="false" data-help-pinned="false" hidden>
            <div class="help-resizer" id="help-resizer" role="separator" aria-label="Resize Help sidebar" aria-orientation="vertical" aria-valuemin="320" aria-valuemax="960" aria-valuenow="480" tabindex="0"></div>
            <header class="help-sidebar-header">
                <div class="help-header-main">
                    <h1 id="help-sidebar-title" tabindex="-1">Help</h1>
                    <div class="help-header-actions">
                        <button class="icon-button help-pin-button" id="help-pin-button" type="button" aria-pressed="false" aria-label="Pin Help sidebar">
                            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="16" r="14" fill="#7f9f7f"/><path fill="#3a3a3a" d="m21.4 7.2l3.4 3.4l-3.2 1.1l-3.8 3.8l.9 4l-1.4 1.4l-3-3l-5.2 5.2l-1.2-1.2l5.2-5.2l-3-3l1.4-1.4l4 .9l3.8-3.8z"/></svg>
                        </button>
                        <button class="icon-button help-close-button" id="help-close-button" type="button" aria-label="Close Help">
                            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 32 32" aria-hidden="true"><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>
                    </div>
                </div>
            </header>
            <details class="help-contents" id="help-contents">
                <summary>Contents</summary>
                <nav class="scrollbar-custom" id="help-contents-nav" aria-label="Help contents">
                    <ul id="help-outline-list">
                        {{ range .AllAppsInfo }}{{ if .Help }}
                        <li class="help-outline-app" data-help-app-id="{{ .Id }}">
                            <a class="help-app-link" href="#help-app-heading-{{ CleanAppName .Id }}" data-help-app-id="{{ .Id }}" data-help-heading-id="help-app-heading-{{ CleanAppName .Id }}">{{ .Name }}</a>
                            {{ template "help-outline-topics" (dict "Help" .Help "AppID" .Id "CleanID" (CleanAppName .Id) "Path" "topic") }}
                        </li>
                        {{ end }}{{ end }}
                    </ul>
                </nav>
            </details>
            <article class="help-document scrollbar-custom" id="help-document">
                {{ range .AllAppsInfo }}{{ if .Help }}
                <section class="help-app-section" id="help-app-{{ CleanAppName .Id }}" data-help-app-id="{{ .Id }}">
                    <h2 id="help-app-heading-{{ CleanAppName .Id }}" tabindex="-1">{{ .Name }}</h2>
                    {{ template "help-sections-h3" (dict "Help" .Help "AppID" .Id "CleanID" (CleanAppName .Id) "Path" "topic") }}
                </section>
                {{ end }}{{ end }}
            </article>
        </aside>
    </main>

    {{ define "help-outline-topics" }}
        {{ if .Help }}<ul>{{ range $i, $h := .Help }}{{ $path := printf "%s-%d" $.Path $i }}
            <li>
                <a href="#help-heading-{{ $.CleanID }}-{{ $path }}" data-help-app-id="{{ $.AppID }}" data-help-heading-id="help-heading-{{ $.CleanID }}-{{ $path }}">{{ $h.Title }}</a>
                {{ template "help-outline-topics" (dict "Help" $h.Children "AppID" $.AppID "CleanID" $.CleanID "Path" $path) }}
            </li>
        {{ end }}</ul>{{ end }}
    {{ end }}
    {{ define "help-sections-h3" }}
        {{ range $i, $h := .Help }}{{ $path := printf "%s-%d" $.Path $i }}
        <section class="help-topic-section" id="help-section-{{ $.CleanID }}-{{ $path }}">
            <h3 id="help-heading-{{ $.CleanID }}-{{ $path }}" tabindex="-1">{{ $h.Title }}</h3>
            <div class="help-topic-content">{{ $h.Contents }}</div>
            {{ template "help-sections-h4" (dict "Help" $h.Children "AppID" $.AppID "CleanID" $.CleanID "Path" $path) }}
        </section>{{ end }}
    {{ end }}
    {{ define "help-sections-h4" }}
        {{ range $i, $h := .Help }}{{ $path := printf "%s-%d" $.Path $i }}
        <section class="help-topic-section" id="help-section-{{ $.CleanID }}-{{ $path }}">
            <h4 id="help-heading-{{ $.CleanID }}-{{ $path }}" tabindex="-1">{{ $h.Title }}</h4>
            <div class="help-topic-content">{{ $h.Contents }}</div>
            {{ template "help-sections-h5" (dict "Help" $h.Children "AppID" $.AppID "CleanID" $.CleanID "Path" $path) }}
        </section>{{ end }}
    {{ end }}
    {{ define "help-sections-h5" }}
        {{ range $i, $h := .Help }}{{ $path := printf "%s-%d" $.Path $i }}
        <section class="help-topic-section" id="help-section-{{ $.CleanID }}-{{ $path }}">
            <h5 id="help-heading-{{ $.CleanID }}-{{ $path }}" tabindex="-1">{{ $h.Title }}</h5>
            <div class="help-topic-content">{{ $h.Contents }}</div>
            {{ template "help-sections-h6" (dict "Help" $h.Children "AppID" $.AppID "CleanID" $.CleanID "Path" $path) }}
        </section>{{ end }}
    {{ end }}
    {{ define "help-sections-h6" }}
        {{ range $i, $h := .Help }}{{ $path := printf "%s-%d" $.Path $i }}
        <section class="help-topic-section" id="help-section-{{ $.CleanID }}-{{ $path }}">
            <h6 id="help-heading-{{ $.CleanID }}-{{ $path }}" tabindex="-1">{{ $h.Title }}</h6>
            <div class="help-topic-content">{{ $h.Contents }}</div>
            {{ template "help-sections-h6" (dict "Help" $h.Children "AppID" $.AppID "CleanID" $.CleanID "Path" $path) }}
        </section>{{ end }}
    {{ end }}
    <script src="/static/main.js?v=0.15.0"></script>
</body>
</html>
