{{ layout "layout.vto" { title: document.label } }}
  <header class="header">
    {{ include "breadcrumb.vto" }}

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

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

  <nav class="navigation">
    <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>

    {{
      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 }}
      <a
        class="button is-secondary"
        href='{{ ["document", document.name, "code"] |> path }}'
      >
        <u-icon name="code"></u-icon>
        {{ t("document.edit.action.code") }}
      </a>
    {{ /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='{{ ["document", document.name, "edit"] |> path }}'
      method="post"
      class="form"
      id="form-edit"
      enctype="multipart/form-data"
    >
      <u-fields
        data-fields="{{ fields |> JSON.stringify |> escape }}"
        data-value="{{ data |> JSON.stringify |> escape }}"
      ></u-fields>
    </form>
  </u-form>
{{ /layout }}