<div>
    <form id="website-social-settings-card" novalidate="novalidate">
        <div class="card">
            <div class="card-body">
                <h5>Redes sociales</h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-4 fv-row">
                            <label for="social_whatsapp" class="form-label">WhatsApp</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fab fa-whatsapp"></i></span>
                                <input type="text" id="social_whatsapp" name="social_whatsapp" wire:model='social_whatsapp' class="form-control" placeholder="Número telefónico de WhatsApp">
                            </div>
                            @error("social_whatsapp")
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="mb-4 fv-row">
                            <input type="text" id="social_whatsapp_message" name="social_whatsapp_message" wire:model='social_whatsapp_message' class="form-control" placeholder="Mensaje de saludo WhatsApp">
                            @error("social_whatsapp_message")
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="mb-4 fv-row">
                            <label for="social_facebook" class="form-label">Facebook</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fab fa-facebook"></i></span>
                                <input type="text" id="social_facebook" name="social_facebook" wire:model='social_facebook' class="form-control" placeholder="Enlace de Facebook">
                            </div>
                        </div>
                        <div class="mb-4 fv-row">
                            <label for="social_instagram" class="form-label">Instagram</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fab fa-instagram"></i></span>
                                <input type="text" id="social_instagram" name="social_instagram" wire:model='social_instagram' class="form-control" placeholder="Enlace de Instagram">
                            </div>
                        </div>
                        <div class="mb-4 fv-row">
                            <label for="social_linkedin" class="form-label">LinkedIn</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fab fa-linkedin"></i></span>
                                <input type="text" id="social_linkedin" name="social_linkedin" wire:model='social_linkedin' class="form-control" placeholder="Enlace de LinkedIn">
                            </div>
                        </div>
                        <div class="mb-4 fv-row">
                            <label for="social_tiktok" class="form-label">TikTok</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fab fa-tiktok"></i></span>
                                <input type="text" id="social_tiktok" name="social_tiktok" wire:model='social_tiktok' class="form-control" placeholder="Enlace de TikTok">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-4 fv-row">
                            <label for="social_x_twitter" class="form-label">X (Twitter)</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fab fa-x"></i></span>
                                <input type="text" id="social_x_twitter" name="social_x_twitter" wire:model='social_x_twitter' class="form-control" placeholder="Enlace de X (Twitter)">
                            </div>
                        </div>
                        <div class="mb-4 fv-row">
                            <label for="social_google" class="form-label">Google</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fab fa-google"></i></span>
                                <input type="text" id="social_google" name="social_google" wire:model='social_google' class="form-control" placeholder="Enlace de Google">
                            </div>
                        </div>
                        <div class="mb-4 fv-row">
                            <label for="social_pinterest" class="form-label">Pinterest</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fab fa-pinterest"></i></span>
                                <input type="text" id="social_pinterest" name="social_pinterest" wire:model='social_pinterest' class="form-control" placeholder="Enlace de Pinterest">
                            </div>
                        </div>
                        <div class="mb-4 fv-row">
                            <label for="social_youtube" class="form-label">YouTube</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fab fa-youtube"></i></span>
                                <input type="text" id="social_youtube" name="social_youtube" wire:model='social_youtube' class="form-control" placeholder="Enlace de YouTube">
                            </div>
                        </div>
                        <div class="mb-4 fv-row">
                            <label for="social_vimeo" class="form-label">Vimeo</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fab fa-vimeo"></i></span>
                                <input type="text" id="social_vimeo" name="social_vimeo" wire:model='social_vimeo' class="form-control" placeholder="Enlace de Vimeo">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            {{-- Botones --}}
            <div class="row my-4">
                <div class="col-lg-12 text-end">
                    <button
                        type="submit"
                        class="btn btn-primary btn-save btn-sm mt-2 mr-2 waves-effect waves-light"
                        disabled
                        data-loading-text="Guardando...">
                        <i class="ti ti-device-floppy mr-2"></i>
                        Guardar cambios
                    </button>
                    <button
                        type="button"
                        wire:click="loadSettings"
                        class="btn btn-secondary btn-cancel btn-sm mt-2 mr-2 waves-effect waves-light"
                        disabled>
                        <i class="ti ti-rotate-2 mr-2"></i>
                        Cancelar
                    </button>
                </div>
            </div>
            {{-- Notifications --}}
            <div class="notification-container" wire:ignore></div>
        </div>
    </form>
</div>