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

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

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

{% set xdata %}
plugins({{ strings|json_encode()}},
{{ theme|json_encode() }})
{% endset %}

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

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

			<template x-if="total !== null">
				<div class="text-sm text-content-dimmed md:hidden">
					{{ __('Total :count themes')|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/themes/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/themes/new" class="hidden md:flex button button-accent button-sm">
			<i class="text-lg ti ti-square-rounded-plus"></i>
			{{ p__('button', 'Install theme') }}
		</a>
	</div>

	{# Filters #}
	{% include "/snippets/filters.twig" with { 
	total: __('Total :count themes')
} %}

	{# 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 themes yet.'), reset: __('There are no theme matching your search.') } %}
		</div>

		<ul class="text-sm flex flex-col gap-1 group-data-[state=empty]:hidden">
			{% for i in range(1,5) %}
				<li class="hidden justify-between gap-3 p-8 box group-data-[state=initial]/list:flex" x-data>
					<div>
						<div class="flex gap-4 items-center">
							<div class="my-0.5 w-36 h-5 loading"></div>

							<span class="flex gap-1 items-center">
								<span class="relative w-3 h-3 rounded-full text-content-dimmed loading">
									<span class="absolute top-0 left-0 w-full h-full bg-current rounded-full opacity-20"></span>
									<span class="absolute top-1/2 left-1/2 w-1.5 h-1.5 bg-current rounded-full -translate-x-1/2 -translate-y-1/2"></span>
								</span>

								<span class="w-14 h-4 loading"></span>
							</span>
						</div>

						<div class="mt-1 w-96 h-5 loading"></div>

						<div class="flex gap-1 items-center mt-6 text-xs text-content-dimmed">
							<span class="inline-block w-14 h-4 loading"></span>
							<span class="inline-block w-14 h-4 loading"></span>
						</div>
					</div>

					<div>
						<i class="text-2xl ti ti-dots-vertical text-content-dimmed"></i>
					</div>
				</li>
			{% endfor %}

			<template x-for="theme in resources" :key="theme.name">
				<li class="flex gap-3 justify-between p-8 box" x-data>
					<div>
						<div class="flex gap-4 items-center">
							<h2>
								<template x-if="theme.default_url">
									<a :href="theme.default_url" class="font-bold text-content group flex items-center">
										<span x-text="theme.title || theme.name" class="group-hover:underline"></span>
										<i class="ti ti-chevron-right text-content-dimmed group-hover:text-content group-hover:translate-x-1 transition-all"></i>
									</a>
								</template>

								<template x-if="!theme.default_url">
									<span x-text="theme.title || theme.name"></span>
								</template>
							</h2>

							<template x-if="theme.name == activeTheme">
								<span class="badge badge-success">
									<span class="relative w-3 h-3 rounded-full">
										<span class="absolute top-0 left-0 w-full h-full bg-current rounded-full opacity-20"></span>
										<span class="absolute top-1/2 left-1/2 w-1.5 h-1.5 bg-current rounded-full -translate-x-1/2 -translate-y-1/2"></span>
									</span>

									<span>
										{{ p__('status', 'Current theme') }}
									</span>
								</span>
							</template>

							<template x-if="theme.name != activeTheme">
								<button type="button" @click.prevent="publish(theme)" class="bg-transparent badge text-content-dimmed" :disabled="isPublishing" :processing="isPublishing == theme.name">

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

									<span class="relative w-3 h-3 rounded-full" x-show="isPublishing != theme.name">
										<span class="absolute top-0 left-0 w-full h-full bg-current rounded-full opacity-20"></span>
										<span class="absolute top-1/2 left-1/2 w-1.5 h-1.5 bg-current rounded-full -translate-x-1/2 -translate-y-1/2"></span>
									</span>

									<span>{{ p__('status', 'Publish') }}</span>
								</button>
							</template>
						</div>

						<div class="mt-1 text-sm text-content-dimmed" x-text="theme.tagline || theme.description"></div>

						<div class="mt-6 text-xs text-content-dimmed">
							{% set version %}<span x-text="theme.version || 'dev'"></span>
							{% endset %}
							{{  __('Version :version')|replace({":version": version})|raw }}

							<template x-if="theme.authors.length > 0">
								<span>
									|

									<template x-if="theme.authors[0].homepage">
										{% set author %}<a :href="theme.authors[0].homepage" target="_blank" class="font-bold text-content hover:underline" x-text="theme.authors[0].name"></a>
										{% endset %}
										<span>{{ __('By :author')|replace({":author": author})|raw }}</span>
									</template>

									<template x-if="!theme.authors[0].homepage && theme.authors[0].email">
										{% set author %}<a :href="`mailto:${theme.authors[0].email}`" target="_blank" class="font-bold text-content hover:underline" x-text="theme.authors[0].name"></a>
										{% endset %}
										<span>{{ __('By :author')|replace({":author": author})|raw }}</span>
									</template>

									<template x-if="!theme.authors[0].homepage && !theme.authors[0].email">
										{% set author %}<strong class="font-bold text-content" x-text="theme.authors[0].name"></strong>
										{% endset %}
										<span>{{ __('By :author')|replace({":author": author})|raw }}</span>
									</template>
								</span>
							</template>
						</div>
					</div>

					<div>
						<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="`/preview?theme=${theme.name}`" target="_blank" class="flex gap-2 items-center px-4 py-2 w-full hover:no-underline hover:bg-intermediate">
											<i class="ti ti-eye"></i>

											{{ p__('button', 'Preview') }}
										</a>
									</li>

									<template x-if="theme.name != activeTheme">
										<li>
											<button class="flex gap-2 items-center px-4 py-2 w-full hover:no-underline hover:bg-intermediate" @click.prevent="currentResource = theme; modal.open('delete-modal')">
												<i class="ti ti-trash"></i>

												{{ p__('button', 'Delete') }}
											</button>
										</li>
									</template>
								</ul>
							</div>
						</div>
					</div>
				</li>
			</template>
		</ul>
	</div>

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