<div x-data="audience({{ ref ?? 'preview' }})" x-model="{{ ref ?? 'preview' }}"
  x-modelable="item">

  <template x-if="item">
    <button type="button" class="button button-dimmed button-xs"
      @click="modal.open('audience-modal')">
      <template x-if="item.visibility === 0">
        <span class="flex items-center gap-1">
          <i class="ti ti-lock"></i>
          {{ p__('audience', 'Only me') }}
        </span>
      </template>

      <template x-if="item.visibility === 1">
        <span class="flex items-center gap-1">
          <i class="ti ti-building"></i>
          {{ p__('audience', 'Workspace') }}
        </span>
      </template>
    </button>
  </template>

  <template x-if="item">
    <modal-element name="audience-modal">
      <div class="flex flex-col gap-6 modal">
        <div class="flex items-center justify-between">
          <h2 class="text-xl">{{ p__('heading', 'Select audience') }}</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 class="flex flex-col gap-1">
          <template x-if="item.user && item.user.id != $store.user.id">
            <div class="flex items-center gap-4 box group">
              <span class="avatar">
                <span
                  x-text="`${item.user.first_name} ${item.user.last_name}`.match(/(\b\S)?/g).join('').slice(0, 2)"></span>

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

              <div>
                <div class="font-bold"
                  x-text="`${item.user.first_name} ${item.user.last_name}`">
                </div>
                <div class="text-xs text-content-dimmed">
                  {{ __('Item will be accessible only by owner.') }}</div>
              </div>

              <template x-if="item.visibility === 0">
                <button type="button" disabled
                  class="ml-auto button button-xs button-dimmed">
                  {{ p__('badge', 'Selected') }}
                </button>
              </template>

              <template x-if="item.visibility !== 0">
                <button type="button" :processing="isProcessing===0"
                  class="invisible ml-auto button button-xs button-dimmed group-hover:visible"
                  @click="changeAudience(0)">
                  {% include "/snippets/spinner.twig" %}
                  {{ p__('badge', 'Select') }}
                </button>
              </template>
            </div>
          </template>

          <template x-if="item.user && item.user.id == $store.user.id">
            <div class="flex items-center gap-4 box group">
              <span class="avatar">
                <i class="ti ti-lock"></i>
              </span>

              <div>
                <div class="font-bold">{{ p__('audience', 'Only me') }}</div>
                <div class="text-xs text-content-dimmed">
                  {{ __('Item is only accessible by you.') }}</div>
              </div>

              <template x-if="item.visibility === 0">
                <button type="button" disabled
                  class="ml-auto button button-xs button-dimmed">
                  {{ p__('badge', 'Selected') }}
                </button>
              </template>

              <template x-if="item.visibility !== 0">
                <button type="button" :processing="isProcessing===0"
                  class="invisible ml-auto button button-xs button-dimmed group-hover:visible"
                  @click="changeAudience(0)">
                  {% include "/snippets/spinner.twig" %}
                  {{ p__('badge', 'Select') }}
                </button>
              </template>
            </div>
          </template>

          <div class="flex items-center gap-4 box group">
            <span class="avatar">
              <i class="ti ti-building"></i>
            </span>

            <div>
              <div class="font-bold">{{ p__('audience', 'Workspace') }}</div>
              <div class="text-xs text-content-dimmed">
                {{ __('Accesible by team members. Can be managed by workspace owner.') }}
              </div>
            </div>

            <template x-if="item.visibility === 1">
              <button type="button" disabled
                class="ml-auto button button-xs button-dimmed">
                {{ p__('badge', 'Selected') }}
              </button>
            </template>

            <template x-if="item.visibility !== 1">
              <button type="button" :processing="isProcessing===1"
                class="invisible ml-auto button button-xs button-dimmed group-hover:visible"
                @click="changeAudience(1)">
                {% include "/snippets/spinner.twig" %}
                {{ p__('badge', 'Select') }}
              </button>
            </template>
          </div>
        </div>
      </div>
    </modal-element>
  </template>
</div>