<div class="box-body">
    <div class="row">
        <div class="col-xs-6 form-group">
            <label>Name (internal key) *</label>
            <input type="text" name="name" class="form-control" required value="{{ old('name', $template->name ?? '') }}" placeholder="invoice_created">
        </div>
        <div class="col-xs-3 form-group">
            <label>Language *</label>
            <input type="text" name="language" class="form-control" required value="{{ old('language', $template->language ?? 'en') }}">
        </div>
        <div class="col-xs-3 form-group">
            <label>Category *</label>
            <select name="category" class="form-control">
                @foreach(['utility','marketing','authentication'] as $c)
                    <option value="{{ $c }}" {{ old('category', $template->category ?? 'utility') === $c ? 'selected' : '' }}>{{ ucfirst($c) }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="form-group">
        <label>Body *</label>
        <textarea name="body" rows="5" class="form-control" required>{{ old('body', $template->body ?? '') }}</textarea>
        @isset($tags)
            <small class="text-muted">{{ __('whatsapp::lang.available_tags') }} (click to insert):</small>
            <div style="margin-top:4px;">
                @foreach($tags as $tag)
                    <span class="label label-default wa-tag" style="cursor:pointer;margin:2px;display:inline-block;" data-tag="{{ $tag }}">{{ $tag }}</span>
                @endforeach
            </div>
            <script>
            (function(){
                document.querySelectorAll('.wa-tag').forEach(function(el){
                    if (el.dataset.bound) return; el.dataset.bound = '1';
                    el.addEventListener('click', function(){
                        var ta = el.closest('form').querySelector('textarea[name="body"]');
                        if (!ta) return;
                        var pos = ta.selectionStart || ta.value.length;
                        ta.value = ta.value.slice(0, pos) + el.dataset.tag + ta.value.slice(pos);
                        ta.focus();
                    });
                });
            })();
            </script>
        @endisset
    </div>

    <div class="row">
        <div class="col-xs-6 form-group">
            <label>Variables (comma-separated, ordered)</label>
            <input type="text" name="variables" class="form-control" value="{{ old('variables', isset($template) ? implode(', ', (array)$template->variables) : '') }}" placeholder="customer, invoice_no, amount">
        </div>
        <div class="col-xs-6 form-group">
            <label>Meta template name</label>
            <input type="text" name="meta_template_name" class="form-control" value="{{ old('meta_template_name', $template->meta_template_name ?? '') }}" placeholder="(as approved in Meta)">
        </div>
    </div>

    <div class="row">
        <div class="col-xs-6 form-group">
            <label>Meta status</label>
            <select name="meta_status" class="form-control">
                @foreach(['none','pending','approved','rejected'] as $s)
                    <option value="{{ $s }}" {{ old('meta_status', $template->meta_status ?? 'none') === $s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-xs-6 form-group">
            <label>&nbsp;</label><br>
            <label class="checkbox-inline"><input type="checkbox" name="active" value="1" {{ old('active', $template->active ?? true) ? 'checked' : '' }}> Active</label>
        </div>
    </div>
</div>
