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

{% set active_menu = '/admin/templates' %}

{% set strings = {
  delete_success: __('Preset has been deleted successfully.')
} %}

{% set xdata %}
list("presets",
{{ strings|json_encode }})
{% endset %}

{% block title p__('title', 'Templates')|title %}

{% block template %}
	{# Header #}
	<div class="flex justify-between items-center">
		<div>
			<h1>{{ p__('heading', 'Templates') }}</h1>

			<template x-if="total !== null">
				<div class="text-sm text-content-dimmed md:hidden">
					{{ __('Total :count templates')|replace({':count': '<span x-text="total"></span>'})|raw }}
				</div>
			</template>
		</div>

		<div class="flex gap-2 items-center md:hidden">
			<button type="button" class="hidden w-8 h-8 avatar">
				<i class="text-lg ti ti-adjustments-horizontal"></i>
			</button>

			<a href="admin/templates/new" class="w-8 h-8 rounded-full button button-accent button-sm">
				<i class="text-lg ti ti-plus"></i>
			</a>
		</div>

		<a href="admin/templates/new" class="hidden md:flex button button-accent button-sm">
			{{ p__('button', 'Create template') }}
		</a>
	</div>

	{# Filters #}
	{% include "/snippets/filters.twig" with { 
  total: __("Total :count templates"),
  filters: [
    {
      label: p__('label', 'Category'),
      model: 'category',
      options: [
      ]
    },
    {
      label: p__('label', 'Type'),
      model: 'is_locked',
      options: [
        {
          value: '1',
          label: __('Built-in')
        },
        {
          value: '0',
          label: __('Custom')
        }
      ]
    },
    {
      label: p__('label', 'Status'),
      model: 'status',
      options: [
        {
          value: '0',
          label: p__('status', 'Inactive')
        },
        {
          value: '1',
          label: p__('status', 'Active')
        }
      ]
    }
  ],
  sort: [
    {
      value: null,
      label: p__('label', 'Default')
    },
    {
      value: 'position',
      label: p__('label', 'Manual')
    },
  
    {
      value: 'created_at',
      label: p__('label', 'Date')
    },
  
    {
      value: 'title',
      label: p__('label', 'Title')
    }
  ]
} %}

	{# List #}
	<div class="group/list" :data-state="state">
		<div class="hidden group-data-[state=empty]/list:block">
			{% include "sections/empty.twig" with { title: p__('heading', 'Empty result set'), message: __('There are no templates yet.'), reset: __('There are no template matching your search.') } %}
		</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-7">{{ p__('label', 'Template') }}</div>
			<div class="col-span-3">{{ p__('label', 'Category') }}</div>
			<div class="col-span-1">{{ p__('label', 'Status') }}</div>
			<div class="col-span-1"></div>
		</div>

		<ul x-ref="list" class="text-sm group-data-[state=empty]/list:hidden flex flex-col gap-1" x-sort.ghost="prioritize($item, $position, $refs.list)">
			{% for i in range(1,5) %}
				<li class="pointer-events-none bg-main hidden md:grid-cols-12 justify-between gap-3 items-center p-3 box group-data-[state=initial]/list:flex md:group-data-[state=initial]/list:grid">
					<div class="flex gap-3 items-center md:col-span-7">
						<i class="ti ti-grip-vertical text-content-dimmed" :class="orderby == 'position' ? 'inline-block' : 'hidden'" x-sort:handle></i>

						<div class="avatar loading"></div>

						<div>
							<div class="flex gap-2 items-center">
								<span class="w-28 h-5 loading"></span>
								<span class="hidden w-16 h-6 loading md:block"></span>
							</div>

							<div class="my-0.5 w-20 h-5 md:hidden loading"></div>
						</div>
					</div>

					<div class="hidden md:block md:col-span-3">
						<span class="inline-block my-0.5 w-20 h-5 loading"></span>
					</div>

					<div class="hidden md:block md:col-span-1"></div>

					<div class="justify-self-end md:col-span-1">
						<i class="text-2xl ti ti-dots-vertical text-content-dimmed"></i>
					</div>
				</li>
			{% endfor %}

			<template x-for="preset in resources" :key="preset.id">
				<li class="flex relative grid-cols-12 gap-3 justify-between items-center p-3 md:grid box bg-main [body:not(.sorting)_&]:hover:border-line" x-data x-sort:item="preset.id" :data-id="preset.id">
					<a :href="`admin/templates/${preset.id}`" class="absolute top-0 left-0 w-full h-full cursor-pointer"></a>

					<div class="flex gap-3 items-center md:col-span-7">
						<i class="ti ti-grip-vertical text-content-dimmed relative z-10 cursor-grab [body:not(.sorting)_&]:hover:scale-150 transition-transform" :class="orderby == 'position' ? 'inline-block' : 'hidden'" x-sort:handle></i>
						<x-avatar :style="{backgroundColor: preset.color, color: '#fff'}" :title="preset.title" :icon="preset.image"></x-avatar>

						<div>
							<div class="flex gap-6 items-center">
								<div class="font-bold" x-text="preset.title"></div>

								<template x-if="preset.is_locked">
									<div class="hidden md:block">
										<span class="badge">{{ __('Built-in') }}</span>
									</div>
								</template>
							</div>

							<div class="text-content-dimmed md:hidden">
								<span x-text="preset.category?.title"></span>
							</div>
						</div>
					</div>

					<div class="hidden md:block md:col-span-3" x-text="preset.category?.title"></div>

					<div class="hidden md:block md:col-span-1">
						<label class="inline-flex relative z-10 gap-2 items-center cursor-pointer">
							<input type="checkbox" name="status" class="hidden peer" :checked="preset.status == 1" @click="toggleStatus(preset)">

							<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:ms-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__('status', 'Inactive') }}
							</span>

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

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

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

							<div class="menu" x-ref="context">
								<ul>
									<li>
										<a :href="`admin/templates/${preset.id}`" class="flex gap-2 items-center px-4 py-2 hover:no-underline hover:bg-intermediate">
											<i class="ti ti-pencil"></i>
											{{ p__('button', 'Edit') }}
										</a>
									</li>

									<li x-show="!preset.is_locked">
										<button class="flex gap-2 items-center px-4 py-2 w-full hover:no-underline hover:bg-intermediate" @click.prevent="currentResource = preset; modal.open('delete-modal')">
											<i class="ti ti-trash"></i>
											{{ p__('button', 'Delete') }}
										</button>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</li>
			</template>
		</ul>
	</div>

	{% include "sections/delete-modal.twig" with { 
    message: __('Do you really want to delete :title from templates?'),
    title: 'currentResource.title'
  } %}
{% endblock %}