{{ layout "layout.vto" { title: document.label } }}
  <header class="header">
    {{
      include "breadcrumb.vto" {
        links: [
          [collection.label, ["collection", collection.name]],
        ],
      }
    }}
    <h1 class="header-title">
      {{ document.label }}
    </h1>
  </header>

  <nav class="navigation">
    {{ if user.canEdit(collection) }}
      <button
        class="button is-primary"
        type="submit"
        form="form-edit"
        tabindex="1"
      >
        <u-icon name="floppy-disk"></u-icon>
        {{ t("document.edit.action.save") }}
      </button>
    {{ /if }}

    {{ layout "components/menu.vto" { id: "edit-menu", header: t("document.edit.menu") } }}
      {{ if url }}
        <a
          class="button is-secondary"
          href="{{ url }}"
          target="_blank"
        >
          <u-icon name="arrow-square-out"></u-icon>
          {{ t("document.edit.action.preview") }}
        </a>
      {{ /if }}
      {{ if user.canEdit(collection) }}
        <a
          class="button is-secondary"
          href='{{ ["collection", collection.name, document.name, "code"] |> path }}'
        >
          <u-icon name="code"></u-icon>
          {{ t("document.edit.action.code") }}
        </a>
      {{ /if }}

      {{ if user.canRename(collection) }}
        {{ layout "components/dialog.vto" { id: "modal-rename" } }}
          {{ slot button }}
            <u-icon name="arrow-square-right"></u-icon>
            {{ t("document.edit.action.move") }}
          {{ /slot }}

          <form
            method="post"
            action='{{ ["collection", collection.name, document.name, "move"] |> path }}'
          >
            <div class="field">
              <label for="file-name">{{ t("document.edit.action.move.name") }}</label>
              <input
                id="file-name"
                class="input"
                type="text"
                required
                autofocus
                value="{{ document.name }}"
                name="name"
              >
            </div>

            <footer class="field-footer">
              <button class="button is-primary">{{ t("document.edit.action.move.submit") }}</button>
            </footer>
          </form>
        {{ /layout }}
      {{ /if }}

      {{ if user.canCreate(collection) }}
        {{ layout "components/dialog.vto" { id: "modal-duplicate" } }}
          {{ slot button }}
            <u-icon name="copy"></u-icon>
            {{ t("document.edit.action.duplicate") }}
          {{ /slot }}

          <u-form-join data-form="form-edit">
            <form
              method="post"
              action='{{ ["collection", collection.name, document.name, "duplicate"] |> path }}'
            >
              {{ if user.canRename(collection) }}
                <div class="field">
                  <label for="file-name">{{ t("document.edit.action.duplicate.name") }}</label>
                  <input
                    id="file-name"
                    class="input"
                    type="text"
                    required
                    autofocus
                    value="{{ document.name }}"
                    name="name"
                  >
                </div>
              {{ /if }}

              <footer class="field-footer">
                <button class="button is-primary">{{ t("document.edit.action.duplicate.submit") }}</button>
              </footer>
            </form>
          </u-form-join>
        {{ /layout }}
      {{ /if }}

      {{ if user.canDelete(collection) }}
        <u-confirm data-message="{{ t("document.edit.action.delete.confirm") |> escape }}">
          <button
            class="button is-secondary"
            type="submit"
            form="form-edit"
            formAction='{{ ["collection", collection.name, document.name, "delete"] |> path }}'
          >
            <u-icon name="trash"></u-icon>
            {{ t("document.edit.action.delete") }}
          </button>
        </u-confirm>
      {{ /if }}
    {{ /layout }}
  </nav>

  <u-form>
    {{ if views.length }}
      <u-views
        data-target="form-edit"
        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, document.name, "edit"] |> path }}'
      method="post"
      class="form"
      enctype="multipart/form-data"
      id="form-edit"
    >
      <u-fields
        data-fields="{{ fields |> JSON.stringify |> escape  }}"
        data-value="{{ data |> JSON.stringify |> escape  }}"
      ></u-fields>
    </form>
  </u-form>
{{ /layout }}