{{/* estilo-account: the account menu, the same in every app and always
     the last thing in the bar. Data: chrome.Account.

     Order: who is signed in (not interactive), the app's account-scoped
     items, Appearance, Help, then Sign out, which appears exactly once in
     the app. Appearance is a form of three buttons; the current one is
     aria-pressed="true" and every other "false", and the check glyph, not
     colour, shows which.

     Rail (Account.Rail) puts it at a sidebar rail's foot instead: the
     trigger is a row naming who is signed in, and the panel opens upward
     where the rail is the viewport's height. */}}
{{define "estilo-account"}}<details estilo-account{{if .Rail}}="rail"{{end}} name="estilo-menus">
      <summary estilo-bar-trigger aria-label="{{.TriggerLabel}}">
        {{- if .Initials}}<span estilo-avatar aria-hidden="true">{{.Initials}}</span>{{else}}{{template "estilo-icon-person"}}{{end -}}
        {{- if .Rail}}{{with or .Name .Address}}<span estilo-account-who dir="auto">{{.}}</span>{{end}}{{end -}}
      </summary>
      <div estilo-menu estilo-account-panel>
        <div estilo-menu-identity>
          <span estilo-menu-identity-label>{{.Labels.SignedInAs}}</span>
          {{- with .Name}}<span estilo-menu-identity-name dir="auto">{{.}}</span>{{end}}
          {{- with .Address}}<span estilo-menu-identity-address dir="auto">{{.}}</span>{{end}}
        </div>
        {{- if .Items}}<hr>{{range .Items}}{{template "estilo-menu-item" .}}{{end}}{{end}}
        {{- with .Appearance}}
        <hr>
        <p estilo-menu-heading id="estilo-appearance">{{$.Labels.Appearance}}</p>
        <form method="post" action="{{.Action}}" role="group" aria-labelledby="estilo-appearance">
          <input type="hidden" name="return_to" value="{{.Return}}">
          {{- range .Options}}
          <button estilo-menu-item type="submit" name="mode" value="{{.Value}}" aria-pressed="{{if .Current}}true{{else}}false{{end}}"><span estilo-menu-check aria-hidden="true">{{template "estilo-icon-check"}}</span><span estilo-menu-label>{{.Label}}</span></button>
          {{- end}}
        </form>
        {{- end}}
        {{- if .Help}}
        <hr>
        <p estilo-menu-heading>{{.Labels.Help}}</p>
        {{- range .Help}}{{template "estilo-menu-item" .}}{{end}}
        {{- end}}
        <hr>
        <form method="post" action="{{.SignOut.Action}}">
          <button estilo-menu-item type="submit"><span estilo-menu-label>{{.SignOut.Label}}</span></button>
        </form>
      </div>
    </details>{{end}}