{{ layout "layout.vto" { title: t("document.create.title") } }}
  <header class="header">
    {{
      include "navigation.vto" {
        links: [
          [collection.label, ["collection", collection.name]],
        ],
      }
    }}

    <h1 class="header-title">
      {{ t("document.create.title") }}
    </h1>
  </header>

  <nav class="navigation">
    {{ if user.canRename(collection) }}
      <label class="input-file">
        {{ folder }}
        <input
          class="input"
          id="_id"
          type="text"
          name="_id"
          value="{{ defaults._id }}"
          placeholder='{{ t("document.create.name.placeholder") |> escape }}'
          form="form-create"
          aria-label='{{ t("document.create.name.label") |> escape }}'
          {{ if !collection.documentName }}required autofocus{{ /if }}
        >
      </label>
    {{ /if }}

    <button
      class="button is-primary"
      form="form-create"
      type="submit"
      tabindex="1"
    >
      <u-icon name="plus-circle"></u-icon>
      {{ t("document.create.submit") }}
    </button>
  </nav>

  <u-form>
    {{ if views.length }}
      <u-views
        data-target="form-create"
        data-state="{{ initViews |> JSON.stringify |> escape }}"
        data-views="{{ views |> JSON.stringify |> escape }}"
      >
        <strong class="field-label">{{ t("document.views") }}:</strong>
      </u-views>
    {{ /if }}

    <form
      action='{{ ["collection", collection.name, "create"] |> path }}'
      method="post"
      class="form"
      enctype="multipart/form-data"
      id="form-create"
    >
      <input type="hidden" name="_prefix" value="{{ folder }}">
      <u-fields
        data-fields="{{ fields |> JSON.stringify |> escape }}"
        data-new="true"
        data-value="{{ defaults |> JSON.stringify |> escape }}"
      ></u-fields>
    </form>
  </u-form>
{{ /layout }}