@inject('activityLogger', 'V2\Services\ActivityLogger\ActivityLoggerService')
<form action="{{ route('v2.structural-editor.structural-data.save') }}" method="POST" id="form-social">
    {{ csrf_field() }}
    <input type="hidden" name="tab" value="redes-sociais">
    @php 
        $configModel = $configs->has('social_media') ? $configs['social_media'] : null;
        $payloadJson = $configModel ? json_encode($configModel->payload) : '[]';
    @endphp

    <div class="mb-3">
        <label class="form-label fw-bold">Gerenciador de Redes Sociais</label>
        <p class="text-muted small mb-3">Adicione, remova e reordene as redes sociais. Os links aparecerão no rodapé (e cabeçalho se aplicável).</p>
        
        <div id="social-builder-container" class="bg-light border p-3 rounded" style="min-height: 200px;">
            <ul id="social-list" class="list-unstyled mb-0">
                <!-- Itens renderizados via JS -->
            </ul>
            <button type="button" id="btn-add-social" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1 mt-3 {{ \v2_can('LayoutBase', 'write') ? '' : 'd-none' }}">
                <i class="bi bi-plus-lg"></i> Adicionar Rede Social
            </button>
        </div>

        <textarea name="social_media_json" id="social_media_json" style="display:none;" aria-label="JSON das redes sociais">{{ $payloadJson }}</textarea>
    </div>

    @v2can('LayoutBase', 'write')
    <button type="submit" class="btn btn-primary fw-bold px-3 d-inline-flex align-items-center gap-1 mt-3"><i class="bi bi-save" aria-hidden="true"></i> Salvar Redes Sociais</button>
    @endv2can
</form>

@include('v2-structurallandingeditor::cms.tabs.layoutbase.components.history-table', ['configModel' => $configModel, 'logSuffix' => 'Atualizou a lista de Redes Sociais.'])

@push('scripts')
    @include('v2-structurallandingeditor::cms.tabs.layoutbase.scripts.redes-sociais')
@endpush