{% extends "/layouts/main.twig" %}

{% set active_menu = 'update' %}
{% set xdata = 'update' %}
{% block title p__('title', 'Update')|title %}

{% block template %}
<div class="flex flex-col gap-8" @submit.prevent="">
  <div>
    {% include "snippets/back.twig" with {link: 'admin', label: 'Dashboard'} %}

    <h1 class="mt-4">
      {{ p__('title', 'Update') }}
    </h1>
  </div>

  <div class="flex flex-col gap-2">
    <section class="flex flex-col gap-6 box " data-density="comfortable">
      <h2>{{ p__('heading', 'About') }}</h2>

      <div class="flex gap-6">
        <div>
          <div class="label">{{ p__('label', 'License') }}</div>
          <div class="flex mt-1">
            <div>
              {% if license %}
              <x-copy class="flex items-center badge" data-copy="{{ license }}">

                <span class="font-bold capitalize">
                  {{ p__('label', 'Key') }}
                </span>

                <span
                  x-text="'{{ license }}'.slice(0,4) + '*'.repeat(10) + '{{ license }}'.slice(-4)">
                </span>
              </x-copy>
              {% else %}
              <span class="text-xs">
                {{ __('Couldn’t identify the license') }}
              </span>
              {% endif %}
            </div>
          </div>
        </div>

        <div>
          <div class="label">{{ p__('label', 'Installed') }}</div>
          <div class="flex mt-1">
            <div>
              <x-copy class="flex items-center badge" data-copy="{{ version }}">

                <span class="font-bold capitalize">
                  {{ p__('label', 'Version') }}
                </span>

                <span>{{ version }}</span>
              </x-copy>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="p-8 box">
      <div class="flex items-center gap-4">
        <span
          class="flex items-center justify-center w-10 h-10 bg-intermediate text-intermediate-content"
          :class="file ? 'rounded-lg' : 'rounded-full'">
          <i class="ti" :class="file ? 'ti-file-zip' : 'ti-paperclip'"></i>
        </span>

        <template x-if="file">
          <div>
            <div class="font-medium" x-text="file.name"></div>

            <template x-if="error">
              <div class="text-sm text-failure" x-text="error"></div>
            </template>

            <template x-if="!error">
              <div class="text-sm text-content-dimmed" x-text="filesize"></div>
            </template>
          </div>
        </template>

        <template x-if="!file">
          <div>
            <div class="font-medium">
              {{ __('Choose a file of the updated version') }}
            </div>

            <template x-if="error">
              <div class="text-sm text-failure" x-text="error"></div>
            </template>

            <template x-if="!error">
              <div class="text-sm text-content-dimmed">
                {{ __('ZIP archive file only') }}
              </div>
            </template>
          </div>
        </template>

        <button type="button" class="ml-auto button button-outline button-sm"
          @click="$refs.file.click()" :disabled="isProcessing"
          x-text="file ? `{{ p__('button', 'Change file') }}` : `{{ p__('button', 'Choose file') }}`">
        </button>

        <template x-if="file">
          <button type="button" class="button button-sm button-accent"
            :processing="isProcessing" :disabled="isProcessing"
            @click="modal.open('confirm-modal')">

            {% include "/snippets/spinner.twig" %}
            <span
              x-text="isProcessing ? `{{ p__('button', 'Installing...') }}` : `{{ p__('button', 'Install') }}`"></span>

          </button>
        </template>

        <input type="file" @change="file = $refs.file.files[0]; error = null;"
          class="hidden"
          accept="application/zip, application/x-zip-compressed, multipart/x-zip"
          x-ref="file">
      </div>
    </section>
  </div>
</div>

<modal-element name="confirm-modal">
  <form class="flex flex-col gap-8 modal" @submit.prevent="submit">
    <div class="flex items-center justify-between">
      <h2 class="text-xl">{{ p__('heading', 'Confirmation') }}</h2>

      <button
        class="flex items-center justify-center w-8 h-8 border border-transparent rounded-full bg-line-dimmed hover:border-line"
        @click="modal.close()" type="button">
        <i class="text-xl ti ti-x"></i>
      </button>
    </div>

    <div>
      <div class="font-bold">{{ p__('audience', 'Backup') }}</div>
      <div class="mt-2 text-sm underline">
        {{ __('It is recommended to backup your data before updating.') }}
      </div>
    </div>

    <div>
      <div class="flex items-center gap-1 text-sm font-bold">
        <i class="text-lg ti ti-info-square-rounded "></i>
        {{ __('Important') }}
      </div>

      <p class="mt-2 text-sm">
        {{ __('Update might take some time. During this time, the application will be unavailable. Don\'t close the browser tab or navigate away from this page.') }}
      </p>
    </div>

    <div class="flex items-center">
      <button class="w-full button" type="submit" :processing="isProcessing">
        {% include "/snippets/spinner.twig" %}

        {{ p__('button', 'I took a backup, proceed to update') }}
      </button>
    </div>
  </form>
</modal-element>
{% endblock %}