{{define "head"}}<script defer src="{{asset "static/zone.js"}}"></script>{{end}}
{{define "content"}}
{{template "page-header" dict "Title" "Meetings"}}
<section>
<form method="post" action="/meetings/start">
  {{/* zone.js fills this with the browser's own time zone, so a call's
       automatic title ("Call, 30 Sep 21:47") is in the starter's time,
       not the server's. Without script it stays empty, and the title
       names the zone it was written in. */}}
  <input type="hidden" name="zone" value="" data-calls-zone>
  <button type="submit" rst-btn="primary lg">Start a call</button>
</form>
</section>
<section>
<h2>Upcoming</h2>
{{if .Upcoming}}
<div rst-list class="calls-meetings">
{{range .Upcoming}}
<div rst-row>
  <span rst-row-main><a href="/m/{{.Sqid}}/join">{{.Title}}</a><small rst-row-sub>{{if .ByAgent}}By {{.CreatedByPrincipal}} · {{end}}{{if .Starts}}Starts {{.Starts}}{{else}}Starts now{{end}}{{if not .LinkPresent}} · No live link{{end}}</small></span>
  {{if .ByAgent}}<span class="calls-row-badge">{{icon "bot"}}{{template "badge" dict "Label" "Agent"}}</span>{{end}}
  <details rst-row-menu name="estilo-menus">
    <summary aria-label="Actions for {{.Title}}">{{icon "ellipsis"}}</summary>
    <div estilo-menu class="calls-row-menu">
      <a estilo-menu-item href="/meetings/{{.Sqid}}/settings"><span estilo-menu-label>Meeting settings</span></a>
      <a estilo-menu-item href="/meetings/{{.Sqid}}/links/replace"><span estilo-menu-label>Replace the link</span></a>
      <hr>
      <a estilo-menu-item="danger" href="/meetings/{{.Sqid}}/end"><span estilo-menu-label>End meeting for everyone</span></a>
    </div>
  </details>
</div>
{{end}}
</div>
{{else}}
{{template "empty-state" dict "Body" "No meetings yet. Start a call now, or make one below and share its link."}}
{{end}}
</section>
<section>
<h2>New meeting</h2>
<form rst-form method="post" action="/meetings">
  {{template "field" dict "ID" "title" "Name" "title" "Label" "Title" "Required" true "Maxlength" "200" "Error" .TitleError}}
  {{template "field" dict "ID" "starts_at" "Name" "starts_at" "Label" "Starts" "Help" (printf "In %s. Leave it blank to start now." .Zone) "Type" "datetime-local" "Error" .StartError}}
  <div rst-form-actions><button type="submit" rst-btn="primary lg">Create meeting</button></div>
</form>
</section>
{{if .Ended}}
<details class="calls-ended">
<summary>Ended meetings ({{len .Ended}})</summary>
<div rst-list>
{{range .Ended}}<div rst-row><span rst-row-main><span class="calls-row-title">{{.Title}}</span><small rst-row-sub>{{if .ByAgent}}By {{.CreatedByPrincipal}} · {{end}}Ended</small></span>{{if .ByAgent}}<span class="calls-row-badge">{{icon "bot"}}{{template "badge" dict "Label" "Agent"}}</span>{{end}}</div>{{end}}
</div>
</details>
{{end}}
{{end}}