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

{% set active_menu = 'users' %}

{% set xdata %}
user({{ (current_user is defined ? current_user : {})|json_encode }})
{% endset %}

{% block title (current_user is defined ? p__('title', 'Edit user') : p__('title', 'New user'))|title %}

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

      <h1 class="mt-4">
        <span x-show="!user.id">{{ p__('heading', 'Add new user') }}</span>
        <span x-show="user.id">
          {{ p__('heading', 'Edit user') }}:
          <span class="font-normal text-intermediate-content"
            x-text="`${user.first_name} ${user.last_name}`"></span>
        </span>
      </h1>

      <template x-if="user.id">
        <div class="mt-2">
          <x-uuid x-text="user.id"></x-uuid>
        </div>
      </template>
    </div>

    <div class="flex flex-col gap-2">
      <section class="grid gap-6 md:grid-cols-2 box" data-density="comfortable">
        <h2 class="md:col-span-2">{{ p__('heading', 'Profile') }}</h2>

        <div>
          <label for="first_name">{{ p__('label', 'First name') }}</label>

          <input type="text" id="first_name" class="mt-2 input"
            autocomplete="off"
            :placeholder="user.first_name || `{{ __('User\'s first name') }}`"
            required x-model="model.first_name" />
        </div>

        <div>
          <label for="last_name">{{ p__('label', 'Last name') }}</label>

          <input type="text" id="last_name" class="mt-2 input"
            autocomplete="off"
            :placeholder="user.last_name || `{{ __('User\'s last name') }}`"
            x-model="model.last_name" required />
        </div>

        <div :class="user.id ? 'md:col-span-2' : ''">
          <label for="email"
            class="inline-flex gap-2 items-center">{{ p__('label', 'Email') }}

            <template x-if="user.is_email_verified">
              <span class="text-xs text-success">{{ __('Verified') }}</span>
            </template>
          </label>

          <input type="text" id="email" class="mt-2 input" autocomplete="off"
            {% if environment != 'demo' %}
            :placeholder="user.email || `{{ __('User\'s email')|e('html_attr')}}`"
            x-model="model.email"
            {% else %}value="Email is hidden in demo environment" {% endif %}
            :disabled="user.id ? true : false" required />
        </div>

        <template x-if="!user.id">
          <div>
            <label for="password">{{ p__('label', 'Password') }}</label>

            <div class="relative mt-2" x-data="{isVisible: false}">
              <input :type="isVisible ? 'text' : 'password'" id="password"
                name="password" placeholder="{{ __('Type your password') }}"
                autocomplete="current-password" class="input" required
                x-model="model.password" minlength="6">

              <button type="button"
                class="absolute right-3 top-1/2 text-2xl -translate-y-1/2 text-content-dimmed"
                @click="isVisible = !isVisible">
                <i class="block ti"
                  :class="{'ti-eye-closed' : isVisible, 'ti-eye':!isVisible}"></i>
              </button>
            </div>

            <ul
              class="flex flex-col gap-1 m-3 mb-0 text-xs list-disc list-inside text-content-dimmed">
              <li>
                {{ __('Password must be at least 6 characters long.') }}
              </li>
            </ul>
          </div>
        </template>
      </section>

      <template x-if="model.id != '{{ user.id }}'">
        <section class="grid grid-cols-1 gap-6 box" data-density="comfortable">

          <h2>{{ p__('heading', 'Account details') }}</h2>

          <div>
            <label>{{ p__('label', 'Role') }}</label>

            <div class="flex gap-2 items-center mt-2">
              <label>
                <input type="radio" name="role" value="0" class="radio-button"
                  x-model="model.role"
                  :checked="!model.role || model.role == 0" />

                <span>{{ p__('input-value', 'User') }}</span>
              </label>

              <label>
                <input type="radio" name="role" value="1" class="radio-button"
                  x-model="model.role" :checked="model.role == 1" />

                <span>{{ p__('input-value', 'Admin') }}</span>
              </label>
            </div>
          </div>

          <div
            class="flex justify-between items-center p-3 rounded-lg bg-intermediate">
            {{ p__('label', 'Status') }}

            <label class="inline-flex gap-2 items-center cursor-pointer">
              <input type="checkbox" name="status" class="hidden peer"
                :checked="model.status == 1" x-model="model.status">

              <span
                class="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>

              <span class="text-content-dimmed peer-checked:hidden">
                {{ p__('input-value', 'Inactive') }}
              </span>

              <span class="hidden text-success peer-checked:inline">
                {{ p__('input-value', 'Active') }}
              </span>
            </label>
          </div>
        </section>
      </template>

      <template x-if="user.id">
        <section class="grid gap-6 md:grid-cols-2 box"
          data-density="comfortable">
          <h2 class="md:col-span-2">{{ p__('heading', 'Workspaces') }}</h2>

          <template
            x-for="(ws, index) in user.owned_workspaces.concat(user.workspaces)"
            :key="ws.id">
            <a :href="`admin/workspaces/${ws.id}`"
              class="flex gap-3 items-center border box bg-intermediate text-intermediate-content hover:border-line border-intermediate">

              <span class="avatar bg-main text-content">
                <span
                  x-text="ws.name.match(/(\b\S)?/g).join('').slice(0, 1)"></span>
              </span>

              <div>
                <h3 x-text="ws.name"></h3>
                <div class="text-sm text-content-dimmed"
                  x-text="index<user.owned_workspaces.length ? `{{ p__('role', 'Owner') }}` : `{{ p__('role', 'Member') }}`">
                </div>
              </div>
            </a>
          </template>
        </section>
      </template>
    </div>

    <div class="flex gap-4 justify-end">
      <a href="admin/users" class="button button-outline">
        {{ p__('button', 'Cancel') }}
      </a>

      <button type="submit" class="button button-accent"
        :processing="isProcessing">

        {% include "/snippets/spinner.twig" %}

        <span x-show="!user.id">{{ p__('button', 'Create user') }}</span>
        <span x-show="user.id">{{ p__('button', 'Update user') }}</span>
      </button>
    </div>
  </form>
</x-form>
{% endblock %}