{{/* estilo-bar: the whole app header, one row at every width.

     Data: chrome.Bar. Parse this package's templates together with
     menu.Templates() and the app's own layout. The skip link and <main>
     are the layout's; this is only the <header>.

     Order in the end group is fixed in every app: actions, then Menu
     (narrow only), then the switcher, then the account. The account is
     always the last thing at the inline end.

     The brand is a link to the app root, except on public read-only
     pages, where App.Home is empty and it is plain text. */}}
{{define "estilo-bar"}}<header estilo-bar{{if .Sticky}}="sticky"{{end}}>
  {{- if .App.Home}}
  <a estilo-bar-brand href="{{.App.Home}}"><img estilo-brand-icon src="{{.App.Icon}}" alt="" width="28" height="28"><span estilo-bar-name>{{.App.Name}}</span></a>
  {{- else}}
  <span estilo-bar-brand><img estilo-brand-icon src="{{.App.Icon}}" alt="" width="28" height="28"><span estilo-bar-name>{{.App.Name}}</span></span>
  {{- end}}
  {{- with .ContextEdit}}
  {{template "estilo-bar-title" .}}
  {{- else}}{{with .Context}}
  <span estilo-bar-context dir="auto" title="{{.}}">{{.}}</span>
  {{- end}}{{end}}
  {{- if .Nav}}
  <nav estilo-bar-nav aria-label="{{.NavLabel}}">
    {{- range .Nav}}<a href="{{.Href}}"{{if .Current}} aria-current="page"{{end}}>{{.Label}}</a>{{end}}
  </nav>
  {{- end}}
  <div estilo-bar-end>
    {{- if .Actions}}
    <div estilo-bar-actions>{{template "estilo-bar-actions" .}}</div>
    {{- end}}
    {{- if or .Nav .Actions}}
    <details estilo-bar-more name="estilo-menus">
      <summary estilo-bar-trigger>{{template "estilo-icon-menu"}}<span>{{.Labels.Menu}}</span></summary>
      <div estilo-menu="sheet">
        {{- range .Nav}}<a estilo-menu-item href="{{.Href}}"{{if .Current}} aria-current="page"{{end}}><span estilo-menu-label>{{.Label}}</span></a>{{end}}
        {{- if and .Nav .Actions}}<hr>{{end}}
        {{- range .Actions}}{{template "estilo-menu-item" .Item}}{{end}}
      </div>
    </details>
    {{- end}}
    {{- with .Switcher}}
    {{template "estilo-switcher" .}}
    {{- end}}
    {{- if .Account}}
    {{template "estilo-account" .Account}}
    {{- else}}{{with .SignIn}}
    <a rst-btn href="{{.Href}}" estilo-bar-signin>{{.Label}}</a>
    {{- end}}{{end}}
  </div>
</header>{{end}}

{{/* estilo-bar-actions: the wide-screen actions, from Bar.Actions, each
     the element its Item names: a link, a one-button POST form, or a
     button opening a dialog. The same items are rows in the narrow Menu
     sheet, so both stay one list. An app may redefine this after parsing
     to change how they are drawn, but the sheet always renders
     Bar.Actions. */}}
{{define "estilo-bar-actions"}}{{range .Actions}}{{template "estilo-bar-action" .}}{{end}}{{end}}
{{define "estilo-bar-action"}}{{if .Action}}<form method="post" action="{{.Action}}"><button rst-btn{{if .Primary}}="primary"{{end}} type="submit">{{.Label}}</button></form>{{else if .Dialog}}<button rst-btn{{if .Primary}}="primary"{{end}} type="button" commandfor="{{.Dialog}}" command="show-modal">{{.Label}}</button>{{else}}<a rst-btn{{if .Primary}}="primary"{{end}} href="{{.Href}}">{{.Label}}</a>{{end}}{{end}}

{{/* estilo-bar-title: the open object's title, editable in place. A real
     form, so Enter renames with scripts off. The submit button is visually
     hidden until the form has focus. Data: chrome.TitleEdit. */}}
{{define "estilo-bar-title"}}<form estilo-bar-title method="post" action="{{.Action}}">
    <input estilo-bar-title-input name="{{.Name}}" value="{{.Value}}" aria-label="{{.Label}}" autocomplete="off" spellcheck="false" dir="auto">
    <button rst-btn="ghost" type="submit" estilo-bar-title-submit>{{.Submit}}</button>
  </form>{{end}}