{{ layout "layout.vto" { title: document.label } }}
  <header class="header">
    {{
      include "navigation.vto" {
        links: [
          [collection.label, ["collection", collection.name]],
        ],
      }
    }}
    <h1 class="header-title">
      <u-icon name="{{ document.icon }}"></u-icon>
      {{ 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.code.action.save") }}
      </button>
    {{ /if }}

    {{
      layout "components/menu.vto" { id: "edit-menu", header: t("document.code.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 collection.fields !== undefined }}
        <a
          class="button is-secondary"
          href='{{ ["collection", collection.name, document.name, "edit"] |> path }}'
        >
          <u-icon name="textbox"></u-icon>
          {{ t("document.code.action.form") }}
        </a>
      {{ /if }}

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

  <u-form>
    <form
      action='{{ ["collection", collection.name, document.name, "code"] |> path }}'
      method="post"
      class="form"
      id="form-edit"
    >
      <u-fields
        data-fields="{{ fields |> JSON.stringify |> escape  }}"
        data-value="{{ data |> JSON.stringify |> escape  }}"
      ></u-fields>
    </form>
  </u-form>
{{ /layout }}