{{ 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>

  <section class="emptyState is-error">
    <u-icon class="errorState-icon" name="warning"></u-icon>
    <h1>{{ t("document.error") }}:<br><code>{{ error }}</code></h1>

    <div class="ly-rowStack">
      <a
        class="button is-primary"
        href='{{ ["collection", collection.name, document.name, "code"] |> path }}'
      >
        <u-icon name="code"></u-icon>
        {{ t("document.edit.action.code") }}
      </a>

      {{ if user.canDelete(collection) }}
        <u-confirm
          data-message='{{ t("document.edit.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.edit.action.delete") }}
          </button>
        </u-confirm>
      {{ /if }}
    </div>
  </section>
{{ /layout }}