<header>
<div style="display: flex;">
<a href="/" style="color: inherit; text-decoration: none; display: flex; align-items: center">
<img id="logo" src="/esdiag.svg" alt="Elastic Stack Diagnostics Logo" />
<h1>Elastic Stack Diagnostics</h1>
</a>
{% if show_advanced || show_job_builder %}
<header-nav>
<a href="/" data-attr:aria-selected="window.location.pathname == '/'">Process</a>
{% if show_advanced %}
<a href="/advanced" data-attr:aria-selected="window.location.pathname == '/advanced'">Advanced</a>
{% endif %}
{% if show_job_builder %}
<a href="/jobs" data-attr:aria-selected="window.location.pathname == '/jobs'">Job Builder</a>
{% endif %}
</header-nav>
{% endif %}
</div>
<header-links>
<header-icon id="docs" title="Documentation">
<a href="/docs" class="link" style="color: inherit; text-decoration: none">
<icon-book></icon-book>
</a>
</header-icon>
<header-icon id="theme-toggle" title="Toggle dark mode">
<button type="button" class="theme-toggle-button" aria-label="Enable dark mode" data-show="!$theme.dark" data-on:click="$theme.dark = true; @post('/theme'); {% if desktop %}window.location.reload();{% endif %}">
<icon-sun></icon-sun>
</button>
<button type="button" class="theme-toggle-button" aria-label="Disable dark mode" data-show="$theme.dark" data-on:click="$theme.dark = false; @post('/theme'); {% if desktop %}window.location.reload();{% endif %}">
<icon-moon></icon-moon>
</button>
</header-icon>
<header-icon id="kibana">
<svg class="icon" width="16" height="16" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_0_6522)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11 25.2499V53.5809L31.137 30.3919C25.149 27.1299 18.299 25.2499 11 25.2499Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11 4.99991V25.2499C18.299 25.2499 25.149 27.1299 31.137 30.3919L53.188 4.99991H11Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M35.4434 33.059L14.7754 56.86L12.9164 59H52.3414C50.1784 48.342 43.9924 39.149 35.4434 33.059Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_0_6522">
<rect width="64" height="64" fill="white" />
</clipPath>
</defs>
</svg>
<popup-menu>
<popup-menu-header>Kibana Links</popup-menu-header>
<popup-menu-item>
<a
target="_blank"
href="{{ kibana_url }}/app/dashboards#/view/diagnostic-list?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:now-30d,to:now))&_a=(filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,index:'metrics-diagnostic-esdiag',key:diagnostic.user,negate:!f,params:(query:'{{ user }}'),type:phrase),query:(match_phrase:(diagnostic.user:'{{ user }}')))),viewMode:view)"
>My Diagnostics</a
>
</popup-menu-item>
<popup-menu-item>
<a
target="_blank"
href="{{ kibana_url }}/app/dashboards#/view/esdiag-readme?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:now-30d,to:now))"
>ESDiag Readme</a
>
</popup-menu-item>
</popup-menu>
</header-icon>
<header-icon id="user-circle">
<user-icon class="user-circle"> {{ user_initial }} </user-icon>
<popup-menu>
<popup-menu-header>Username</popup-menu-header>
<popup-menu-item
id="username-display"
data-signals:auth.header="{{ auth_header }}"
data-signals:metadata.user="'{{ user }}'"
data-signals:keystore.locked="{{ keystore_locked }}"
data-signals:keystore.lock_time="{{ keystore_lock_time }}"
data-text="$metadata.user"
></popup-menu-item>
{% if can_use_keystore %}
<popup-menu-item>
<a href="/settings" style="color: inherit; text-decoration: none">Settings</a>
</popup-menu-item>
<popup-menu-item
data-on:click="
if ($keystore.locked) { @get('/keystore/modal', {filterSignals: {exclude: /.*/}}); }
else if (confirm('Lock keystore and disable secret usage?')) { @post('/keystore/lock'); }
"
>
<icon-lock data-show="$keystore.locked"></icon-lock>
<icon-key data-show="!$keystore.locked"></icon-key>
<span>Keystore</span>
</popup-menu-item>
{% endif %}
</popup-menu>
</header-icon>
</header-links>
</header>