<div>

    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="muduleTitle">
            <h1>{{ __('Especificaciones') }}</h1>
        </div>
        <div class="inputTitle">
            <input type="text" class="inputSearch" wire:model="search">
            <button class="btn " wire:click="$toggle('imputActive')"><i class="fa fa-plus"></i>Añadir Especificaciones</button>
            <!-- <button class="btn " wire:click="$emit('openModal', 'create-unit')"><i class="fa fa-plus"></i>Añadir Insumo</button> -->
        </div>
    </div>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        @if($imputActive or $updateMode)
            <div class="flex w-full justify-between">
                <div class="dataBox dataBox--top">
                    <div class="rowBox">
                        <div class="labelBox">
                            Nombre
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Nombre" class="form-control" wire:model.defer="name"
                            style="margin-right:5px;">
                            <input type="hidden" wire:model.defer="unit_id">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Descripcion
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Detalle" class="form-control" wire:model.defer="description"
                            style="margin-right:5px;">
                        </div>
                    </div>

                    <div class="rowBox">
                        <div class="labelBox--full">
                            <button class="btn" wire:click="save">
                                <i class="fa fa-save"></i>Guardar
                            </button>
                            <button class="btn" wire:click="resetInput">
                                <i class="fa fa-trash"></i>Cancelar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="flex w-full">
                <table class="quamaqTable">
                    <thead>

                        <th>Nombre</th>
                        <th>Descripcion</th>
                        <th></th>
                    </thead>
                    <tbody>
                        @foreach($data as $units)
                        <tr>
                            <td>{{ $units->name }}</td>
                            <td>{{ $units->description }}</td>
                            <td>
                                <img src="{{ asset('/storage/images/edit.jpg') }}" wire:click="edit({{ $units->id }})">
                                <img src="{{ asset('/storage/images/trash.jpg') }}" wire:click="destroy({{ $units->id }})">
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
                <x-welcome />
            </div> -->
        @endif
        </div>

    </div>
</div>