{{ layout "layout.vto" { title: t("home.title") } }}
  <header class="header">
    {{ include "navigation.vto" }}

    <h1 class="header-title">
      {{ site.name ?? "Lume CMS" }}
    </h1>

    <div class="header-description">
      {{ site.description }}

      {{ if site.url }}
        <p>
          <a href="{{ site.url }}">{{ site.url }}</a>
        </p>
      {{ /if }}
    </div>
  </header>

  <ul class="list">
    {{ for collection of collections }}
      <li>
        <a
          href='{{ ["collection", collection.name] |> path }}'
          class="list-item"
        >
          <u-icon name="{{ collection.icon }}"></u-icon>
          <div class="list-item-header">
            <strong>{{ collection.label }}</strong>

            {{ if collection.description }}
              <p>{{ collection.description }}</p>
            {{ /if }}
          </div>
        </a>
      </li>
    {{ /for }}

    {{ for document of documents }}
      <li>
        <a
          href='{{ ["document", document.name, "edit"] |> path }}'
          class="list-item"
          title="{{ document.label }}"
        >
          <u-icon name="{{ document.icon }}"></u-icon>
          <div class="list-item-header">
            <strong>{{ document.label }}</strong>

            {{ if document.description }}
              <p>{{ document.description }}</p>
            {{ /if }}
          </div>
        </a>
      </li>
    {{ /for }}

    {{ for upload of uploads }}
      <li>
        <a href='{{ ["uploads", upload.name] |> path }}' class="list-item">
          <u-icon name="{{ upload.icon }}"></u-icon>
          <div class="list-item-header">
            <strong>{{ upload.label }}</strong>

            {{ if upload.description }}
              <p>{{ upload.description }}</p>
            {{ /if }}
          </div>
        </a>
      </li>
    {{ /for }}
  </ul>

  {{ if site.body }}
    <div class="body">{{ site.body }}</div>
  {{ /if }}

  {{ if git }}
    <header class="subheader" id="versions">
      <h2>{{ t("versions.title") }}</h2>
    </header>

    <ul class="list">
      {{
        set versions = Array.from(git)
          .sort((a, b) => a.isProduction ? -1 : a.name.localeCompare(b.name))
      }}
      {{ for index, version of versions }}
        <li>
          {{ if version.isCurrent }}
            <span class="list-item">
              {{ if version.isProduction }}
                <u-icon
                  class="is-version is-production"
                  name="check-circle"
                ></u-icon>
                {{ version.name }}
                <span class="tag">{{ t("versions.type.production") }}</span>
              {{ else }}
                <u-icon
                  class="is-version"
                  name="check-circle"
                ></u-icon>
                {{ version.name }}
                <span class="tag">{{ t("versions.type.draft") }}</span>
              {{ /if }}
            </span>
          {{ else }}
            <form
              class="list-item"
              method="post"
              action='{{ ["versions", "change"] |> path }}'
            >
              <input type="hidden" name="name" value="{{ version.name }}">
              <u-form-restart>
                <button type="submit">
                  {{ if version.isProduction }}
                    <u-icon name="circle"></u-icon> {{ t("versions.type.production") }}
                  {{ else }}
                    <u-icon name="circle"></u-icon> {{ version.name }}
                    <span class="tag">{{ t("versions.type.draft") }}</span>
                  {{ /if }}
                </button>
              </u-form-restart>
            </form>
          {{ /if }}

          {{ layout "components/menu.vto" { id: `version-${index}-menu` } }}
            {{ slot header }}
              <strong>{{ version.name }}</strong> ({{ version.isProduction ? t("versions.type.production") : t("versions.type.draft") }})
            {{ /slot }}

            {{ if version.isCurrent }}
              <form
                method="post"
                action='{{ ["versions", "sync"] |> path }}'
              >
                <input type="hidden" name="name" value="{{ version.name }}">
                <u-form-restart data-message="{{ t("versions.action.sync.busy") }}">
                  <button class="button is-secondary">
                    {{ if version.isProduction }}
                      <u-icon name="rocket-launch"></u-icon>
                      {{ t("versions.action.publish") }}
                    {{ else }}
                      <u-icon name="arrows-down-up"></u-icon>
                      {{ t("versions.action.sync") }}
                    {{ /if }}
                  </button>
                </u-form-restart>
              </form>

              <form
                method="post"
                action='{{ ["versions", "save"] |> path }}'
              >
                <input type="hidden" name="name" value="{{ version.name }}">
                <button class="button is-secondary">
                  <u-icon name="floppy-disk"></u-icon>
                  {{ t("versions.action.save") }}
                </button>
              </form>

              <form
                method="post"
                action='{{ ["versions", "update"] |> path }}'
              >
                <input type="hidden" name="name" value="{{ version.name }}">
                <u-form-restart data-message="{{ t("versions.action.update.busy") |> escape }}">
                  <button class="button is-secondary">
                    <u-icon name="arrow-down"></u-icon>
                    {{ t("versions.action.update") }}
                  </button>
                </u-form-restart>
              </form>
            {{ /if }}

            {{ if !version.isProduction }}
            <form
              method="post"
              action='{{ ["versions", "publish"] |> path }}'
            >
              <input type="hidden" name="name" value="{{ version.name }}">
              <u-form-restart data-message="{{ t("versions.action.publish.busy") |> escape }}">
                <button class="button is-secondary">
                  <u-icon name="rocket-launch"></u-icon>
                  {{ t("versions.action.publish") }}
                </button>
              </u-form-restart>
            </form>

            <form
              method="post"
              action='{{ ["versions", "delete"] |> path }}'
            >
              <input type="hidden" name="name" value="{{ version.name }}">
              <u-form-restart data-message="{{ t("versions.action.delete.busy") |> escape }}">
                <u-confirm data-message="{{ t("versions.action.delete.confirm") |> escape }}">
                  <button class="button is-secondary">
                    <u-icon name="trash"></u-icon>
                    {{ t("versions.action.delete") }}
                  </button>
                </u-confirm>
              </u-form-restart>
            </form>
            {{ /if }}
          {{ /layout }}
        </li>
      {{ /for }}
    </ul>

    <div>
      {{ layout "components/dialog.vto" { id: "modal-new-version" } }}
        {{ slot button }}
          {{ t("versions.action.new") }}
        {{ /slot }}

        <form
          method="post"
          class="fieldset is-root is-separated"
          action='{{ ["versions", "create"] |> path }}'
        >
          <div class="field">
            <label for="version-name">{{ t("versions.action.new.name") }}</label>
            <input
              id="version-name"
              class="input"
              type="text"
              required
              autofocus
              name="name"
            >
          </div>

          <div class="field">
            <label for="version-from">{{ t("versions.action.new.from") }}</label>
            <select class="select" name="from" id="version-from">
              {{ for version of versions }}
              <option {{ if version.isCurrent }}selected{{ /if }}>
                {{ version.name }}
              </option>
              {{ /for }}
            </select>
          </div>

          <footer class="field-footer">
            <u-form-restart data-message="{{ "Creating…" }}">
              <button class="button is-primary">{{ t("versions.action.new.submit") }}</button>
            </u-form-restart>
          </footer>
        </form>
      {{ /layout }}
    </div>
  {{ /if }}
{{ /layout }}