@php
$onlyTemplatePreview = request()->has('only-preview');
@endphp
<div class="row" x-cloak>
    @if(!$onlyTemplatePreview)
    <div class="col-sm-12 col-lg-6 lw-template-structure-form" style="max-height:77vh;">
        <input type="hidden" name="template_uid" value="{{ $template->_uid }}">
        <div class="mt-4">
            <div class="row">
                <div class="col-12">
                    <div>
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <h4 class="text-primary1 fw-bold">{{ __tr('Template Details') }}</h4>
                            
                            <template x-if="selectedTemplate">
                                <button class="btn btn-dark btn-sm lw-change-template-btn" @click.prevent="selectedTemplate = ''">
                                    {{ __tr('Change Template') }}
                                </button>
                            </template>
                        </div>

                        <h5> {{ __tr('Template Name') }}: <strong>{{ $template->template_name }}</strong></h5>
                        <div class="d-flex gap-3">
                            <h5>{{ __tr('Language Code') }}: <strong>{{ $template->language }}</strong></h5>
                            <h5>{{ __tr('Category') }}: <strong>{{ $template->category }}</strong></h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- <div class="toggle-switch toggle-custom mt-3">
            <input type="radio" id="inputTab" name="tab" class="tab-toggle" value="inputs" x-model="tab" checked>
            <label for="inputTab" data-status="inputs">Inputs</label>

            <input type="radio" id="scheduleTab" name="tab" class="tab-toggle" value="schedule" x-model="tab">
            <label for="scheduleTab" data-status="schedule">Contacts and Schedule</label>

            <span class="toggle-slider"></span>
        </div> --}}
        <div class="progress-container progress-container-custom" id="steps_send" style="max-width: 500px;">
            <div class="progress" id="progress"></div>
            <div class="step active" data-label="Inputs" @click="goToStep(0)">1</div>
            <div class="step" data-label="Contacts and Schedule" @click="goToStep(1)">2</div>
        </div>
        {{-- <div class="inputs" x-show="tab === 'inputs'" style="animation: fadeIn 0.5s ease-in-out;"> --}}
        <div class="form-step" :class="{ 'active': currentStep === 0 }" style="animation: fadeIn 0.5s ease-in-out;">
        @if($headerFormat)
         <div class="mt-1 lw-template-header-variables-container">
            <div class="row">
                <div class="col-12">
                    <div class="">
                        <div class="">
                            <h4 class="mb-0 text-primary1">{{ __tr('Header') }}</h4>
                        </div>
                        <div class="card-body padding-custom">
            @if($headerFormat == 'LOCATION')
            <h3>{{ __tr('Location Details') }}</h3>
            @include('whatsapp-service.template-partial', [
            'parameters' => [
            'location_latitude',
            'location_longitude',
            'location_name',
            'location_address',
            ],
            'subjectType' => 'header',
            ])
            @elseif($headerFormat == 'TEXT' and !__isEmpty($headerParameters))
            @include('whatsapp-service.template-partial', [
            'parameters' => $headerParameters,
            'subjectType' => 'header',
            ])
            @elseif($headerFormat == 'TEXT' and __isEmpty($headerParameters))
            <div class="alert alert-info">{{  __tr('No variables available for header text.') }}</div>
            <style>
                .lw-template-header-variables-container{display:none;}
            </style>
            @elseif($headerFormat == 'IMAGE')
            <div class="form-group col-md-12 col-sm-12 pl-0">
                <label for="lwHeaderImageFilepond">{{ __tr('Select Image') }}</label>
                <input id="lwHeaderImageFilepond" type="file" data-allow-revert="true"
                    data-label-idle="{{ __tr('Select Image') }}" class="lw-file-uploader" data-instant-upload="true"
                    data-action="