{{define "app_new"}}{{template "top" .}}
{{if .Flash}}<p class="banner">{{.Flash}}</p>{{end}}
{{if .FlashErr}}<p class="banner error">{{.FlashErr}}</p>{{end}}
<div class="pagehead">
  <p class="eyebrow">Account · {{.Account.Name}}</p>
  <h1>Create an app</h1>
  <p class="lede">Claim a name here; ship a release to it from your terminal.</p>
</div>
<form class="signin" method="post" action="{{.Base}}/apps/new">
  <input type="hidden" name="csrf" value="{{.CSRF}}">
  <label class="visually-hidden" for="app-name">App name</label>
  <input id="app-name" type="text" name="name" placeholder="my-app" autofocus
    required pattern="[A-Za-z][A-Za-z0-9-]{0,31}" maxlength="32">{{with .RegionPicker}}
  <label for="app-region">{{$.RegionCopy.PickerLabel}}</label>
  <select id="app-region" name="region">
    <option value="@auto" selected>{{.Auto}}</option>
    {{range .Options}}<option value="{{.Value}}">{{.Label}}</option>{{end}}
  </select>
  <input type="hidden" name="tz" value="">
  <p class="small">{{$.RegionCopy.PickerHelp}}</p>
  {{if .Attribution}}<p class="small"><a href="{{.AttributionURL}}">{{.AttributionText}}</a></p>{{end}}
  <script>
  // Enhancement only: with JS off the server's IP-or-home guess stands.
  // Fills the tz hint and relabels ONLY the @auto option; its value stays
  // "@auto" so the server still knows the person did not choose.
  (function () {
    var f = document.currentScript.closest("form"), sel = f.elements.region, tz = "";
    var label = {{printf $.RegionCopy.AutoOption "%PLACE%"}};
    try { tz = Intl.DateTimeFormat().resolvedOptions().timeZone || ""; } catch (e) {}
    f.elements.tz.value = tz;
    if (!tz) return;
    var body = new URLSearchParams({ csrf: f.elements.csrf.value, tz: tz });
    fetch("{{$.Base}}/apps/new/region", { method: "POST", body: body, credentials: "same-origin" })
      .then(function (r) { return r.ok ? r.json() : null; })
      .then(function (g) {
        if (!g || sel.value !== "@auto") return;
        sel.options[0].text = label.replace("%PLACE%", g.name);
      })
      .catch(function () {});
  })();
  </script>{{end}}
  <button type="submit">Create app</button>
</form>
<p class="small">Names are lowercase letters, digits, and dashes, starting with a letter — unique within this account, not across the platform.</p>
{{template "bottom" .}}{{end}}