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

{% set active_menu = 'workspaces' %}

{% set xdata %}
workspace({{ current_workspace|json_encode }})
{% endset %}

{% block title p__('title', 'Workspace details')|title %}

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

    <h1 class="mt-4">
      <span>
        {{ p__('heading', 'Workspace') }}:
        <span class="font-normal text-intermediate-content"
          x-text="workspace.name"></span>
      </span>
    </h1>

    <div class="mt-2">
      <x-uuid x-text="workspace.id"></x-uuid>
    </div>
  </div>

  <div class="flex flex-col gap-2">
    <section class="flex flex-col gap-6 box " data-density="comfortable">
      <div>
        <h2>{{ p__('heading', 'General') }}</h2>
        <p class="text-sm text-content-dimmed">
          {{ __('Workspace created on %s', '<x-time :datetime="workspace.created_at"></x-time>')|raw }}
        </p>
      </div>

      <div class="flex flex-col gap-1">
        <div
          class="flex items-center justify-between gap-3 p-4 rounded-2xl bg-intermediate text-intermediate-content">
          <div>
            <label>{{ p__('label', 'Workspace name') }}</label>
            <div x-text="workspace.name"></div>
          </div>

          <button type="button" @click="modal.open('workspace-name')"
            class="flex items-center justify-center w-8 h-8 rounded-full bg-main outline-1 outline-line hover:outline outline-offset-0">
            <i class="text-base ti ti-pencil"></i>
          </button>
        </div>

        <div
          class="flex items-center gap-3 p-4 rounded-2xl bg-intermediate text-intermediate-content">
          <div class="avatar bg-main text-content">
            <span
              x-text="`${workspace.owner.first_name} ${workspace.owner.last_name}`.match(/(\b\S)?/g).join('').slice(0, 2)"></span>

            <template x-if="workspace.owner.avatar">
              <img :src="workspace.owner.avatar"
                :alt="`${workspace.owner.first_name} ${workspace.owner.last_name}`">
            </template>
          </div>

          <div>
            <label
              x-text="`${workspace.owner.first_name} ${workspace.owner.last_name}`"></label>
            <div class="text-sm text-content-dimmed">{{ p__('role', 'Owner') }}
            </div>
          </div>

          <a type="button" :href="`admin/users/${workspace.owner.id}`"
            class="flex items-center justify-center w-8 h-8 ml-auto rounded-full bg-main outline-1 outline-line hover:outline outline-offset-0">
            <i class="text-base ti ti-chevron-right"></i>
          </a>
        </div>
      </div>
    </section>

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

          <template x-if="workspace.subscription">
            <div>
              <template x-if="workspace.subscription.status == 'active'">
                <span
                  class="badge badge-success">{{ p__('subscription-status', 'Active') }}</span>
              </template>

              <template x-if="workspace.subscription.status == 'trialing'">
                <span
                  class="badge badge-info">{{ p__('subscription-status', 'Trialing') }}</span>
              </template>

              <template x-if="workspace.subscription.status == 'canceled'">
                <span
                  class="badge">{{ p__('subscription-status', 'Canceled') }}</span>
              </template>

              <template x-if="workspace.subscription.status == 'ended'">
                <span
                  class="badge badge-failure">{{ p__('subscription-status', 'Ended') }}</span>
              </template>
            </div>
          </template>
        </div>

        <template x-if="workspace.subscription">
          <p class="text-sm text-content-dimmed">
            {{ __('Workspace is subscribed to %s plan.', '<a class="hover:underline" :href="`admin/plan-snapshots/${workspace.subscription.plan.id}`" x-text="workspace.subscription.plan.title"></a>')|raw }}
          </p>
        </template>

        <template x-if="!workspace.subscription">
          <p class="text-sm text-content-dimmed">
            {{ __('This workspace is not subscribed to any plan.') }}
          </p>
        </template>
      </div>

      <template x-if="workspace.subscription">
        <div class="flex flex-col gap-6">
          <div class="flex flex-wrap items-center gap-6">
            <div class="w-40 min-w-min">
              <div class="label">{{ p__('label', 'Plan') }}</div>
              <div>
                <a :href="`admin/plan-snapshots/${workspace.subscription.plan.id}`"
                  class="inline-flex items-center gap-1 group">
                  <span class="group-hover:underline"
                    x-text="workspace.subscription.plan.title"></span>
                  <i
                    class="text-base ti ti-corner-right-up text-content-dimmed"></i>
                </a>
              </div>
            </div>

            <div class="w-40 min-w-min">
              <div class="label">
                {{ p__('label', 'Monthly credits') }}
              </div>

              <x-credit
                :data-value="workspace.subscription.plan.credit_count"></x-credit>
            </div>

            <div class="w-40 min-w-min">
              <div class="label">
                {{ p__('label', 'Credits left') }}
              </div>

              <x-credit
                :data-value="workspace.subscription.credit_count"></x-credit>
            </div>

            <div class="w-40 min-w-min">
              <template
                x-if="workspace.subscription.plan.billing_cycle == 'monthly'">
                <div class="label">{{ __('Monthly') }}</div>
              </template>

              <template
                x-if="workspace.subscription.plan.billing_cycle == 'yearly'">
                <div class="label">{{ __('Yearly') }}</div>
              </template>

              <template
                x-if="workspace.subscription.plan.billing_cycle == 'lifetime'">
                <div class="label">{{ __('Lifetime') }}</div>
              </template>

              <div class="flex items-center gap-2">
                <x-money
                  :data-value="workspace.subscription.order ? workspace.subscription.plan.price : 0"
                  :currency="workspace.subscription.order ? workspace.subscription.order.currency.code : `{{ currency.code }}`"
                  :minor-units="workspace.subscription.order ? workspace.subscription.order.currency.fraction_digits : `{{ currency.fraction_digits }}`"></x-money>

                <template x-if="!workspace.subscription.order">
                  <i class="text-lg ti ti-info-square-rounded"
                    x-tooltip.raw="{{ __('Subscription created with no charge') }}"></i>
                </template>
              </div>
            </div>
          </div>

          <hr>

          <template x-if="workspace.subscription.cancel_at">
            <p class="text-xs text-content-dimmed">
              {{ __("Subscription will be cancelled at %s", '<x-time :datetime="workspace.subscription.cancel_at"></x-time>')|raw }}
            </p>
          </template>

          <template
            x-if="!workspace.subscription.cancel_at && workspace.subscription.renew_at">
            <p class="text-xs text-content-dimmed">
              {{ __("Usage renews at %s", '<x-time :datetime="workspace.subscription.renew_at"></x-time>')|raw }}
            </p>
          </template>

          <div class="flex items-center gap-1">
            <button type="button" class="button button-accent button-sm"
              @click="modal.open('workspace-subscription')">
              <i class=" ti ti-click"></i>

              {{ p__('button', 'Change plan') }}
            </button>

            <a :href="`admin/subscriptions/${workspace.subscription.id}`"
              class="button button-outline button-sm">
              {{ p__('button', 'View details')}}
            </a>
          </div>
        </div>
      </template>

      <template x-if="!workspace.subscription">
        <div class="flex items-center gap-1">
          <button type="button" class="button button-accent button-sm"
            @click="modal.open('workspace-subscription')">
            <i class=" ti ti-click"></i>

            {{ p__('button', 'Create subscription') }}
          </button>
        </div>
      </template>

      <div class="flex">
        <a :href="`admin/subscriptions/?workspace=${workspace.id}&sort=created_at:desc`"
          class="flex items-center gap-1 text-xs text-content-dimmed hover:text-content">
          <i class="text-base ti ti-history"></i>

          {{ p__('button', 'View subscription history')}}
        </a>
      </div>
    </section>

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

        <p class="text-sm text-content-dimmed">
          {{ __('Permanent, non-renewing extras for the subscription, used only after recurring credits run out.') }}
        </p>
      </div>

      <div>
        <div class="label">{{ p__('label', 'Credits left') }}</div>

        <x-credit :data-value="workspace.credit_count"></x-credit>
      </div>

      <hr>

      <p class="text-xs text-content-dimmed">
        {{ __("Add-on credits are valid with a subscription and transferable between plan changes.") }}
      </p>

      <div class="flex">
        <a :href="`admin/orders?billing_cycle=one-time&workspace=${workspace.id}`"
          class="button button-sm">
          <i class="ti ti-history"></i>

          {{ p__('button', 'View addon credit orders') }}
        </a>
      </div>
    </section>

    <section class="grid gap-6 box" data-density="comfortable">
      <div>
        <h2>{{ p__('heading', 'Team') }}</h2>
        <template
          x-if="workspace.users.concat(workspace.invitations).length == 0">
          <p class="text-sm text-content-dimmed">
            {{ __('This workspace has no members yet.') }}
          </p>
        </template>
      </div>

      <template x-if="workspace.users.concat(workspace.invitations).length > 0">
        <ul class="flex flex-col gap-1">
          <template x-for="u in workspace.users" :key="u.id">
            <li>
              <a :href="`admin/users/${u.id}`"
                class="relative grid items-center grid-cols-2 gap-3 p-3 box hover:border-line">
                <div class="flex items-center gap-3">
                  <div class="avatar">
                    <span
                      x-text="`${u.first_name} ${u.last_name}`.match(/(\b\S)?/g).join('').slice(0, 2)"></span>

                    <template x-if="u.avatar">
                      <img :src="u.avatar"
                        :alt="`${u.first_name} ${u.last_name}`">
                    </template>
                  </div>

                  <div>
                    <div class="flex items-center gap-2">
                      <div class="font-bold"
                        x-text="`${u.first_name} ${u.last_name}`">
                      </div>

                      <template x-if="u.id == `{{ user.id }}`">
                        <span class="badge badge-success">{{ __('You') }}</span>
                      </template>
                    </div>


                    <div class="text-xs text-content-dimmed" x-text="u.email">
                    </div>
                  </div>
                </div>

                <div class="justify-self-start">
                  <div class="badge">
                    {{ p__('input-value', 'Member') }}
                  </div>
                </div>
              </a>
            </li>
          </template>

          <template x-for="u in workspace.invitations" :key="u.id">
            <li class="relative grid items-center grid-cols-4 gap-3 p-3 box"
              x-data>
              <div class="flex items-center col-span-2 gap-3">
                <div class="avatar">
                  <span
                    x-text="`${u.email}`.match(/(\b\S)?/g).join('').slice(0, 1)"></span>
                </div>

                <div class="text-xs text-content-dimmed" x-text="u.email">
                </div>
              </div>

              <div class="justify-self-start">
                <div class="flex items-center gap-2">
                  <div class="opacity-50 badge">
                    {{ p__('input-value', 'Invited') }}
                  </div>

                  <x-copy class="button button-xs button-dimmed"
                    x-tooltip.raw="{{ __("Click to copy invitation link") }}"
                    class="flex items-center gap-1"
                    :data-copy="`${window.location.origin}/app/workspace/${ workspace.id }/invitations/${ u.id}`">
                    <i class="ti ti-link"></i>
                  </x-copy>
                </div>
              </div>
            </li>
          </template>
        </ul>
      </template>
    </section>

    <template x-if="orders.length > 0">
      <section class="flex flex-col gap-6 box " data-density="comfortable">
        <div class="flex items-center gap-2">
          <h2>{{ p__('heading', 'Latest orders') }}</h2>

          <a class="badge"
            :href="`admin/orders?workspace=${workspace.id}&sort=created_at:desc`">
            {{ p__('button', 'View all') }}
          </a>
        </div>

        <div>
          <div
            class="hidden md:grid grid-cols-12 gap-3 items-center px-3 py-2 text-content-dimmed text-xs group-data-[state=empty]/list:hidden">
            <div class="col-span-3">{{ p__('label', 'Order') }}</div>
            <div class="col-span-2">{{ p__('label', 'Status') }}</div>
            <div class="col-span-2">{{ p__('label', 'Credits') }}</div>
            <div class="col-span-2">{{ p__('label', 'Total') }}</div>
            <div class="col-span-2">{{ p__('label', 'Created') }}</div>
            <div class="col-span-1"></div>
          </div>

          <ul
            class="text-sm flex flex-col gap-1 group-data-[state=empty]:hidden">
            <template x-for="order in orders" :key="order.id">
              <li
                class="relative grid items-center grid-cols-12 gap-3 p-3 box hover:border-line"
                x-data>
                <a :href="`admin/orders/${order.id}`"
                  class="absolute top-0 left-0 w-full h-full cursor-pointer"></a>

                <div class="flex items-center col-span-11 gap-3 md:col-span-3">
                  <div>
                    <div class="flex items-center gap-2">
                      <div class="flex items-center">
                        <span class="font-bold"
                          x-text="order.plan.title"></span>

                        <i
                          class="ti ti-direction-horizontal text-content-dimmed"></i>

                        <template x-if="order.plan.billing_cycle == 'monthly'">
                          <span>{{ p__('billing-cycle', 'Monthly') }}</span>
                        </template>

                        <template x-if="order.plan.billing_cycle == 'yearly'">
                          <span>{{ p__('billing-cycle', 'Yearly') }}</span>
                        </template>

                        <template x-if="order.plan.billing_cycle == 'lifetime'">
                          <span>{{ p__('billing-cycle', 'Lifetime') }}</span>
                        </template>

                        <template x-if="order.plan.billing_cycle == 'one-time'">
                          <span>{{ p__('billing-cycle', 'Add-on credit') }}</span>
                        </template>
                      </div>
                    </div>

                    <div class="text-xs text-content-dimmed mt-0.5">
                      {% set name %}
                      <a :href="`admin/workspaces/${order.workspace.id}`"
                        x-text="order.workspace.name"
                        class="relative hover:underline text-content"></a>
                      {% endset %}

                      {{ __('Workspace: :name')|replace({':name' : name})|raw }}
                    </div>
                  </div>
                </div>

                <div class="hidden md:block md:col-span-2">
                  <template x-if="order.status == 'completed'">
                    <span>{{ p__('order-status', 'Completed') }}</span>
                  </template>

                  <template x-if="order.status == 'pending'">
                    <span>{{ p__('order-status', 'Pending') }}</span>
                  </template>

                  <template x-if="order.status == 'failed'">
                    <span>{{ p__('order-status', 'Failed') }}</span>
                  </template>
                </div>

                <div class="hidden md:block md:col-span-2">
                  <x-credit :data-value="order.plan.credit_count"></x-credit>
                </div>

                <div class="hidden md:block md:col-span-2">
                  <div class="font-bold">
                    <x-money :data-value="order.total"
                      :currency="order.currency.code"
                      :minor-units="order.currency.fraction_digits"></x-money>
                  </div>

                  <div class="text-xs text-content-dimmed mt-0.5"
                    x-text="order.plan.billing_cycle == 'monthly' ? `{{ __('per month') }}` : order.plan.billing_cycle == 'yearly' ? `{{ __('per year') }}` : `{{ __('one-time') }}`">
                  </div>
                </div>

                <div class="hidden md:block md:col-span-2">
                  <x-time :datetime="order.created_at"
                    data-type="date"></x-time>
                </div>

                <div class="col-span-1 justify-self-end">
                  <div class="relative"
                    @click.outside="$refs.context.removeAttribute('data-open')">

                    <button class="relative z-10"
                      @click="$refs.context.toggleAttribute('data-open')">
                      <i
                        class="ti ti-dots-vertical text-content-dimmed hover:text-intermediate-content"></i>
                    </button>

                    <div class="menu" x-ref="context">
                      <ul>
                        <li>
                          <a :href="`admin/orders/${order.id}`"
                            class="flex items-center gap-2 px-4 py-2 hover:no-underline hover:bg-intermediate">
                            {{ p__('button', 'Details') }}
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </section>
    </template>
  </div>
</div>

<modal-element name="workspace-name">
  <x-form>
    <form class="flex flex-col gap-8 modal"
      @submit.prevent="rename($refs.name.value)">
      <div class="flex items-center justify-between">
        <h2 class="text-xl">{{ p__('heading', 'Rename workspace') }}</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>
        <label for="workspace-name">{{ p__('label', 'Workspace name') }}</label>
        <input type="text" class="mt-2 input" id="workspace-name" required
          x-ref="name" :value.trim="workspace.name">
      </div>

      <div class="flex justify-end gap-4">
        <button type="button" class="button button-outline"
          @click="modal.close()" type="button">
          {{ p__('button', 'Cancel') }}
        </button>

        <button type="submit" class="button button-accent"
          :processing="isProcessing" :disabled="isProcessing">
          {% include "/snippets/spinner.twig" %}

          {{ p__('button', 'Save changes') }}
        </button>
      </div>
    </form>
  </x-form>
</modal-element>

<modal-element name="workspace-subscription">
  <x-form>
    <form class="flex flex-col gap-8 modal"
      @submit.prevent="subscribe($refs.plan.value)">
      <div class="flex items-center justify-between">
        <h2 class="text-xl">{{ p__('heading', 'New subscription') }}</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>
        <label for="plan">{{ p__('label', 'Plan') }}</label>
        <select name="plan" id="plan" class="mt-2 input"
          :disabled="plans.length == 0" x-ref="plan" required>
          <option value="">{{ p__('input-value', 'Select a plan') }}</option>

          <template x-for="plan in plans" :key="plan.id">
            <option :value="plan.id"
              x-text="`${plan.title} / ${plan.billing_cycle}`"></option>
          </template>
        </select>
      </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 ">
          {{ __('This action creates a new subscription with the selected plan for the workspace, ending the current one.') }}
          <strong>{{ __('No charges apply, even if the plan isn\'t free.') }}</strong>
        </p>
      </div>

      <div class="flex justify-end gap-4">
        <button type="button" class="button button-outline"
          @click="modal.close()" type="button">
          {{ p__('button', 'Cancel') }}
        </button>

        <button type="submit" class="button button-accent"
          :processing="isProcessing">
          {% include "/snippets/spinner.twig" %}

          {{ p__('button', 'Create subscription') }}
        </button>
      </div>
    </form>
  </x-form>
</modal-element>
{% endblock %}