@if ($formTemplates->count() > 0)
    <div class="row mt-4">
        @foreach ($formTemplates as $key => $formTemplate)
            <div class="col-md-3 col-sm-6 mb-4">
                <div class="card mb-4 shadow-sm template-card">
                    <span class="template-image-box2">
                        <img class="card-img-top" src="{{ $formTemplate->template->getThumbUrl() }}" style="height: 100%; width: auto; display: block;">
                        <div class="preview_control">
                            <div style="width: calc(80% - 0px);">
                                <div class="mb-2">
                                    <a class="btn btn-light d-block" href="#preview" onclick="popupwindow('{{ action('Admin\FormTemplateController@preview', $formTemplate->uid) }}', `{{ $formTemplate->name }}`, 1200)"><span class="material-symbols-rounded">zoom_in</span> {{ trans("messages.preview") }}</a>
                                </div>
                                <div>
                                    <div>
                                        @if (Auth::user()->can('update', $formTemplate))
                                            <div>
                                                <a href="{{ action('Admin\FormTemplateController@builder', $formTemplate->uid) }}" role="button" class="btn btn-primary btn-icon d-block mb-2">
                                                    {{ trans('messages.template.pro_builder') }}
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </span>
                    <div class="card-body p-3">
                        <h6 title="{{ $formTemplate->name }}" class="fw-600 mt-1 mb-1 text-ellipsis">{{ $formTemplate->name }}</h6>
                        <p style="display: block;
                        overflow: hidden;" class="card-text">
                            @if (Auth::user()->can('update', $formTemplate))
                                <a href="{{ action('Admin\TemplateController@categories', [
                                    'uid' => $formTemplate->template->uid,
                                ]) }}" class="template-categories text-secondary">
                                    @if ($formTemplate->template->categories()->count())
                                        {{ $formTemplate->template->categories->map(function ($cat) {
                                            return $cat->name;
                                        })->join(', ') }}
                                    @else
                                        <span style="color:#ea8c8c;text-decoration: underline;text-decoration-style: dashed;text-underline-offset:4px" class="xtooltip" title="{{ trans('messages.template.category.notice') }}">{{ trans('messages.template.category.no_category_set') }}</span>
                                    @endif    
                                </a>
                            @else
                                <span class="template-categories">{{ $formTemplate->template->categories()->count() ? $formTemplate->template->categories->map(function ($cat) {
                                    return $cat->name;
                                })->join(', ') : 'N/A' }}</span>
                            @endif
                        </p>
                        <div class="">
                            <div class="d-flex align-items-center justify-content-end">
                                @if (Auth::user()->can('preview', $formTemplate) ||
                                    Auth::user()->can('copy', $formTemplate) ||
                                    Auth::user()->can('delete', $formTemplate) ||
                                    Auth::user()->can('update', $formTemplate))
                                    <div class="btn-group">
                                        <button role="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
                                            {{ trans('messages.actions') }} </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            @if (Auth::user()->can('update', $formTemplate))
                                                <li>
                                                    <a class="dropdown-item change-template-name"
                                                        href="{{ action('Admin\FormTemplateController@changeName', [
                                                            'uid' => $formTemplate->uid,
                                                        ]) }}">
                                                        <span class="material-symbols-rounded">subtitles</span>
                                                        {{ trans("messages.template.change_name") }}
                                                    </a>
                                                </li>
                                            @endif
                                            @if (Auth::user()->can('preview', $formTemplate))
                                                <li><a class="dropdown-item" href="#preview" onclick="popupwindow('{{ action('Admin\FormTemplateController@preview', $formTemplate->uid) }}', `{{ $formTemplate->name }}`, 1200)"><span class="material-symbols-rounded">zoom_in</span> {{ trans("messages.preview") }}</a></li>
                                            @endif
                                            @if (Auth::user()->can('update', $formTemplate))
                                                <li>
                                                    <a class="dropdown-item template-categories" href="{{ action('Admin\TemplateController@categories', [
                                                        'uid' => $formTemplate->template->uid,
                                                    ]) }}">
                                                        <span class="material-symbols-rounded">category</span> {{ trans("messages.template.categories") }}
                                                    </a>
                                                </li>
                                            @endif
                                            @if (Auth::user()->can('copy', $formTemplate))
                                                <li>
                                                    <a
                                                        href="{{ action('Admin\FormTemplateController@copy', $formTemplate->uid) }}"
                                                        role="button"
                                                        class="dropdown-item copy-template-button"
                                                        link-method="GET"
                                                    >
                                                        <span class="material-symbols-rounded me-2">copy_all</span> {{ trans("messages.template.copy") }}
                                                    </a>
                                                </li>
                                            @endif
                                            @if (Auth::user()->can('delete', $formTemplate))
                                                <li><a
                                                    class="dropdown-item list-action-single"
                                                    link-confirm="{{ trans('messages.delete_templates_confirm') }}"
                                                    link-method="POST"
                                                    href="{{ action('Admin\FormTemplateController@delete', ["uids" => $formTemplate->uid]) }}">
                                                    <span class="material-symbols-rounded me-2">delete_outline</span> {{ trans("messages.delete") }}</a></li>
                                            @endif
                                        </ul>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    
    @include('elements/_per_page_select', ["items" => $formTemplates, 'custom_per_pages' => [8, 12, 24]])
    
    <script>
        $(function() {
            // change name click
            $('.change-template-name').on('click', function(e) {
                e.preventDefault();
                var url = $(this).attr('href');

                TemplatesList.getChangeNamePopup().load({
                    url: url
                });
            });

            $('.copy-template-button').on('click', function(e) {
                e.preventDefault();			
                var url = $(this).attr('href');

                TemplatesList.getCopyPopup().load({
                    url: url
                });
            });

            $('.template-compose').click(function(e) {
                e.preventDefault();
                
                var url = $(this).attr('href');

                openBuilder(url);
            });
            
            $('.template-compose-classic').click(function(e) {
                e.preventDefault();
                
                var url = $(this).attr('href');

                openBuilderClassic(url);
            });
        });
            

        var TemplatesList = {
			copyPopup: null,
            changeNamePopup: null,

			getCopyPopup: function() {
				if (this.copyPopup === null) {
					this.copyPopup = new Popup();
				}

				return this.copyPopup;
			},
            
            getChangeNamePopup: function() {
				if (this.changeNamePopup === null) {
					this.changeNamePopup = new Popup();
				}

				return this.changeNamePopup;
			}
		}
    </script>

    <script>
		var thumbPopup = new Popup();    
        var categoriesPopup = new Popup();           
    
        $('.upload-thumb-button').click(function(e) {
            e.preventDefault();
            
            var url = $(this).attr('href');
            
            thumbPopup.load(url);
        });

        $('.template-categories').click(function(e) {
            e.preventDefault();
            
            var url = $(this).attr('href');
            
            categoriesPopup.load(url);
        });
    </script>

@elseif (!empty(request()->keyword))
    <div class="empty-list">
        <span class="material-symbols-rounded">auto_awesome_mosaic</span>
        <span class="line-1">
            {{ trans('messages.no_search_result') }}
        </span>
    </div>
@else
    <div class="empty-list">
        <span class="material-symbols-rounded">auto_awesome_mosaic</span>
        <span class="line-1">
            {{ trans('messages.template_empty_line_1') }}
        </span>
    </div>
@endif