<div id="technologyOptionsContainer">
    @php
        $allowTechnologyDelete = $allowTechnologyDelete ?? false;
    @endphp

    @if($technologies->isEmpty())
        <div class="alert alert-warning border-0 rounded-4 mb-0">
            No technologies are available yet. Add technology records first so you can tag this project properly.
        </div>
    @else
        <div class="technology-grid">
            @foreach($technologies as $technology)
                @php
                    $color = $technology->color ?: '#3b82f6';
                    $isChecked = in_array((string) $technology->id, $selectedTechnologies ?? [], true);
                    $linkedProjects = (int) ($technology->projects_count ?? 0);
                    $canDeleteTechnology = $allowTechnologyDelete && $linkedProjects === 0;
                @endphp
                <div class="technology-card-wrap {{ $allowTechnologyDelete ? 'has-delete-action' : '' }}">
                    <label class="technology-option {{ $isChecked ? 'is-selected' : '' }}" style="--tech-color: {{ $color }};" data-technology-option>
                        <input
                            type="checkbox"
                            name="technologies[]"
                            value="{{ $technology->id }}"
                            class="technology-input"
                            {{ $isChecked ? 'checked' : '' }}
                        >
                        <div class="technology-icon-container">
                            <i class="{{ $technology->icon ?: 'bi bi-code-square' }}"></i>
                        </div>
                        <span class="technology-name">{{ $technology->name }}</span>
                    </label>

                    @if($allowTechnologyDelete)
                        <button
                            type="button"
                            class="technology-delete-btn {{ $canDeleteTechnology ? '' : 'is-disabled' }}"
                            @if($canDeleteTechnology)
                                data-technology-delete
                                data-technology-id="{{ $technology->id }}"
                                data-technology-name="{{ $technology->name }}"
                                data-delete-url="{{ route('technologies.destroy', $technology->id) }}"
                                aria-label="Delete {{ $technology->name }}"
                                title="Delete technology"
                            @else
                                disabled
                                aria-label="{{ $technology->name }} is used by {{ $linkedProjects }} project{{ $linkedProjects === 1 ? '' : 's' }}"
                                title="Used by {{ $linkedProjects }} project{{ $linkedProjects === 1 ? '' : 's' }}"
                            @endif
                        >
                            <i class="bi bi-trash3"></i>
                        </button>
                    @endif
                </div>
            @endforeach
        </div>
    @endif
</div>
