{{ layout "layout.vto" { title: document.label } }}
  <header class="header">
    {{
      include "breadcrumb.vto" {
        links: document.fields !== undefined
          ? [
            [document.label, ["document", document.name, "edit"]],
          ]
          : undefined,
      }
    }}

    <h1 class="header-title">
      {{ document.label }}
    </h1>

    {{ if document.description }}
      <div class="header-description">
        {{ document.description }}
      </div>
    {{ /if }}
  </header>

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

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

  <u-form>
    <form
      action='{{ ["document", 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 }}