components/controls.js

class CustomControls extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .controls-container {
                    @apply p-6 bg-gray-800 rounded-lg shadow-lg;
                }
                .form-label {
                    @apply block text-sm font-medium text-gray-300 mb-2;
                }
                .form-select, .form-input {
                    @apply w-full bg-gray-700 border border-gray-600 text-gray-100 rounded px-4 py-2 mb-4 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500;
                }
                .form-select {
                    @apply bg-gray-700 bg-[url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")] bg-no-repeat bg-[right_0.5rem_center] bg-[length:1.5em_1.5em] appearance-none pr-10;
                }
                .form-input::placeholder {
                    @apply text-gray-500;
                }
                .grid {
                    @apply grid grid-cols-1 md:grid-cols-3 gap-4;
                }
            </style>
            <div class="controls-container">
                <h2 class="text-xl font-semibold text-white mb-4">Filter Options</h2>
                <div class="grid">
                    <div>
                        <label for="fabricanteFiltro" class="form-label">Manufacturer</label>
                        <select id="fabricanteFiltro" class="form-select">
                            <option value="todos">All Manufacturers</option>
                        </select>
                    </div>
                    <div>
                        <label for="modeloBusca" class="form-label">Search Model</label>
                        <input type="text" id="modeloBusca" placeholder="Enter model name..." class="form-input">
                    </div>
                    <div>
                        <label for="ordenarPor" class="form-label">Sort By</label>
                        <select id="ordenarPor" class="form-select">
                            <option value="eficiencia_desc">Efficiency (High to Low)</option>
                            <option value="eficiencia_asc">Efficiency (Low to High)</option>
                            <option value="potencia_desc">Power (High to Low)</option>
                            <option value="potencia_asc">Power (Low to High)</option>
                        </select>
                    </div>
                </div>
            </div>
        `;
    }
}
customElements.define('custom-controls', CustomControls);