<div wire:ignore.self class="modal fade" tabindex="-1" role="dialog" id="theModal">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title">
                <b>ANEXO</b> OTROSÍ
                </h5>
                <h6 class="text-center text-warning" wire:loading>ESPERE UN MOMENTO POR FAVOR</h6>
            </div>
            <div class="modal-body">
                <style>
                    *{user-select: none;}
                    *::selection { background: none; }
                    *::-moz-selection { background: none; }
                    *::-webkit-selection { background: none; }
                    *::-ms-selection { background: none; }
                    *::-o-selection { background: none; }

                    .section_contract{
                        width: 99%;
                        height: 450px;
                        border: 1px solid #ccc;
                        overflow-y: scroll;
                        margin: 0 auto;

                    }
                </style>

                <div class="row justify-content-between file-content mb-2">
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="form-inline">
                            <div class="form-group d-flex mb-0"><i class="fa fa-search"></i>
                                <input class="form-control-plaintext" type="text" placeholder="Buscar..."
                                    wire:model="query"
                                    wire:keydown.escape="resetSearch"
                                    wire:keydown.tab="resetSearch"
                                />
                            </div>

                            <div wire:loading class="spinner-border text-primary" role="status">
                                <span class="sr-only">Buscando...</span>
                            </div>

                            @if (!empty($query))
                                <div class="position-fixed top-0 right-0 left-0 bottom-0" wire:click="resetSearch"></div>

                                <div class="position-absolute z-index-10 background-white list-group w-100 top-100" style="left: 0;">
                                    @if (!empty($annexes))
                                        @foreach ( $annexes as $i => $annex)
                                            <a
                                                href="JavaScript:void(0)"
                                                wire:click="selectAnnex({{ $annex->id }})"
                                                class="list-group-item list-group-item-action"
                                            >
                                                <b>{{ $annex['name'] }}</b>
                                                <i class="fa fa-arrow-right f-right"></i>
                                                <br>
                                                {{ $annex['description'] }}
                                            </a>

                                        @endforeach
                                    @else
                                        <div class="list-group-item list-group-item-action">
                                            No se encontraron resultados.
                                        </div>
                                    @endif
                                </div>
                            @endif
                        </div>
                    </div>
                    @if ($annex_description != null)
                        <div class="col-lg-12 col-md-12 col-sm-12 mt-2">
                            <div class="form-group">
                                <label for="">Descripción</label>
                                <p class="form-control-plaintext">{{ $annex_description }}</p>
                            </div>
                        </div>
                    @endif
                    <section class="section_contract text-primary mt-2" wire:model="sel_contract_content">
                        {!! $annex_content !!}
                    </section>
                </div><!--row-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" wire:click.prevent="resetUI()" data-bs-dismiss="modal">CERRAR</button>
                @if($annex_content != null)
                    <button class="btn btn-primary" wire:click="add_user_annex_others">Agregar Anexo</button>
                @endif
            </div>
        </div>
    </div>
</div>
