{% set collapsed = true %}

{% if 
  option.openai.api_secret_key is not defined
  or option.credit_rate is not defined 
  or plans_count is not defined 
  or plans_count < 1
  or (option.stripe is not defined and option.paypal is not defined)
  or option.site is not defined
%}
{% set collapsed = false %}
{% endif %}

<section class="flex flex-col gap-6 box group" data-density="comfortable"
  x-ref="gsparent" {{ collapsed ? 'collapsed' : '' }}>
  <div class="flex items-center justify-between gap-4">
    <h2>{{ p__('heading', 'Getting started') }}</h2>

    {% if collapsed %}
    <button type="button" @click="$refs.gsparent.toggleAttribute('collapsed')">
      <i
        class="ti ti-caret-up-filled block transition-all group-[[collapsed]]:rotate-180"></i>
    </button>
    {% endif %}
  </div>

  <div class="flex flex-col gap-6 group-[[collapsed]]:hidden">
    <div class="relative flex items-center justify-between gap-4">
      <div class="flex items-center gap-4">
        <span class="avatar">
          <i class="ti ti-brand-openai"></i>
        </span>

        <div>
          <div>{{ __('Connect with OpenAI') }}</div>
          <div class="text-sm text-content-dimmed">
            {{ __('Set your API key and start generating content.') }}
          </div>
        </div>
      </div>

      {% if option.openai.api_secret_key is defined %}
      <div class="flex items-center gap-4 text-success">
        <span class="hidden font-medium md:inline">{{ __('Done') }}</span>

        <span class="avatar bg-success/25 text-success">
          <i class="ti ti-square-rounded-check-filled"></i>
        </span>
      </div>
      {% else %}
      <div class="hidden md:block">
        <a href="admin/settings/openai" class="button button-dimmed button-sm">
          {{ p__('button', 'Connect') }}
        </a>
      </div>

      <div class="block md:hidden">
        <a href="admin/settings/openai"
          class="absolute top-0 left-0 w-full h-full"></a>

        <span class="avatar">
          <i class="ti ti-arrow-right"></i>
        </span>
      </div>
      {% endif %}
    </div>

    <div class="relative flex items-center justify-between gap-4">
      <div class="flex items-center gap-4">
        <span class="avatar">
          <i class="ti ti-decimal"></i>
        </span>

        <div>
          <div>
            {{ __('Define credit usage rates') }}
          </div>

          <div class="text-sm text-content-dimmed">
            {{ __('Set the credit ratios against 3rd party services.') }}
          </div>
        </div>
      </div>

      {% if option.credit_rate is defined %}
      <div class="flex items-center gap-4 text-success">
        <span class="hidden font-medium md:inline">{{ __('Done') }}</span>

        <span class="avatar bg-success/25 text-success">
          <i class="ti ti-square-rounded-check-filled"></i>
        </span>
      </div>
      {% else %}
      <div class="hidden md:block">
        <a href="admin/settings/credits" class="button button-dimmed button-sm">
          {{ p__('button', 'Credit ratios') }}
        </a>
      </div>

      <div class="block md:hidden">
        <a href="admin/settings/credits"
          class="absolute top-0 left-0 w-full h-full"></a>

        <span class="avatar">
          <i class="ti ti-arrow-right"></i>
        </span>
      </div>
      {% endif %}
    </div>

    <div class="relative flex items-center justify-between gap-4">
      <div class="flex items-center gap-4">
        <span class="avatar">
          <i class="ti ti-box"></i>
        </span>

        <div>
          <div>{{ __('Setup membership plans') }}</div>
          <div class="text-sm text-content-dimmed">
            {{ __('Create pricing plans for your users.') }}
          </div>
        </div>
      </div>

      {% if plans_count is defined and plans_count > 0 %}
      <div class="flex items-center gap-4 text-success">
        <span class="hidden font-medium md:inline">{{ __('Done') }}</span>

        <span class="avatar bg-success/25 text-success">
          <i class="ti ti-square-rounded-check-filled"></i>
        </span>
      </div>
      {% else %}
      <div class="hidden md:block">
        <a href="admin/plans/new" class="button button-dimmed button-sm">
          {{ p__('button', 'Add pricing plan') }}
        </a>
      </div>

      <div class="block md:hidden">
        <a href="admin/plans/new"
          class="absolute top-0 left-0 w-full h-full"></a>

        <span class="avatar">
          <i class="ti ti-arrow-right"></i>
        </span>
      </div>
      {% endif %}
    </div>

    <div class="relative flex items-center justify-between gap-4">
      <div class="flex items-center gap-4">
        <span class="avatar">
          <i class="ti ti-cash"></i>
        </span>

        <div>
          <div>{{ __('Configure payment gateways') }}</div>
          <div class="text-sm text-content-dimmed">
            {{ __('Setup your payment gateways for transactions.') }}
          </div>
        </div>
      </div>

      {% if option.stripe is defined or option.paypal is defined %}
      <div class="flex items-center gap-4 text-success">
        <span class="hidden font-medium md:inline">{{ __('Done') }}</span>

        <span class="avatar bg-success/25 text-success">
          <i class="ti ti-square-rounded-check-filled"></i>
        </span>
      </div>
      {% else %}
      <div class="hidden md:block">
        <a href="admin/settings/payments"
          class="button button-dimmed button-sm">
          {{ p__('button', 'Configure') }}
        </a>
      </div>

      <div class="block md:hidden">
        <a href="admin/settings/payments"
          class="absolute top-0 left-0 w-full h-full"></a>

        <span class="avatar">
          <i class="ti ti-arrow-right"></i>
        </span>
      </div>
      {% endif %}
    </div>

    <div class="relative flex items-center justify-between gap-4">
      <div class="flex items-center gap-4">
        <span class="avatar">
          <i class="ti ti-settings-2"></i>
        </span>

        <div>
          <div>
            {{ __('Set business details') }}
          </div>

          <div class="text-sm text-content-dimmed">
            {{ __('Set your business details') }}
          </div>
        </div>
      </div>

      {% if option.site is defined %}
      <div class="flex items-center gap-4 text-success">
        <span class="hidden font-medium md:inline">{{ __('Done') }}</span>

        <span class="avatar bg-success/25 text-success">
          <i class="ti ti-square-rounded-check-filled"></i>
        </span>
      </div>
      {% else %}
      <div class="hidden md:block">
        <a href="admin/settings/general" class="button button-dimmed button-sm">
          {{ p__('button', 'Business details') }}
        </a>
      </div>

      <div class="block md:hidden">
        <a href="admin/settings/general"
          class="absolute top-0 left-0 w-full h-full"></a>

        <span class="avatar">
          <i class="ti ti-arrow-right"></i>
        </span>
      </div>
      {% endif %}
    </div>
  </div>

</section>