{{ layout "layout.vto" { title: t("document.create.title") } }}
  <header class="header">
    {{
      include "breadcrumb.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>

  {{ 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>
{{ /layout }}