<div>
        <h6>{{ $componentName }}</h6>
                <a href="javascript:void(0)" wire:click.prevent="openAddCP()"
                    class="btn btn-square btn-primary txt-white mb-4 mt-4">Agregar <i class="fa fa-plus"></i></a></li>
                <ul class="list-group list-group-flush">
                    @foreach ($contractplans as $contractplan)
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col-sm-10">
                                    <p><span class="bagde-outline p-1" style="border: 2px solid {{$contractplan->color_plan}}">{{ $contractplan->name_plan }}</span></p>
                                </div>
                                <div class="col-sm-12 col-md-2 d-flex align-items-center justify-content-end">
                                    <span wire:click="EditCP('{{ $contractplan->id }}')"
                                        class="c-pointer action-box large complete-btn f-right" title="Editar">
                                        <i class="fas fa-edit f-20 text-primary"></i>
                                    </span>
                                    <span onclick="ConfirmCV('{{ $contractplan->id }}','CP')"
                                        class="c-pointer action-box large complete-btn f-right" title="Eliminar">
                                        <i class="fas fa-trash f-20 text-danger"></i>
                                    </span>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
                <br>
    @include('livewire.contracts.detail.plan.form')
    @include('common.scriptsCompCV', ['ComponentId' => 'CP'])
</div>
