<div class="form-wrapper" ...attributes>
    <ContentPanel @title={{t "service-area.fields.details"}} @open={{true}} @wrapperClass="bordered-top">
        <div class="space-y-2">
            <InputGroup @value={{@resource.name}} @name={{t "modals.service-area-form.name"}} @helpText={{t "modals.service-area-form.name-text"}} @required={{true}} />
            <InputGroup @name={{t "modals.service-area-form.type"}} @helpText={{t "modals.service-area-form.type-text"}}>
                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                    <PowerSelect
                        @options={{get-fleet-ops-options "serviceAreaTypes"}}
                        @selected={{find-by "value" @resource.type (get-fleet-ops-options "serviceAreaTypes")}}
                        @onChange={{set-model-attr @resource "type"}}
                        @placeholder={{t "modals.service-area-form.select-type"}}
                        @triggerClass="form-select form-input"
                        @disabled={{cannot-write @resource}}
                        as |status|
                    >
                        <div class="text-sm">
                            <div class="font-semibold normalize-in-trigger">{{status.label}}</div>
                            <div class="hide-from-trigger">{{status.description}}</div>
                        </div>
                    </PowerSelect>
                </div>
            </InputGroup>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
                <InputGroup
                    @type="color"
                    @value={{@resource.stroke_color}}
                    @name={{t "modals.service-area-form.border-color"}}
                    @helpText={{t "modals.service-area-form.customize-border-color"}}
                    class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none"
                />
                <InputGroup
                    @type="color"
                    @value={{@resource.color}}
                    @name={{t "modals.service-area-form.area-color"}}
                    @helpText={{t "modals.service-area-form.customize-area-color"}}
                    class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none"
                />
            </div>
            <InputGroup @name={{t "modals.service-area-form.country"}} @helpText={{t "modals.service-area-form.country-text"}}>
                <CountrySelect class="w-full form-input" @value={{@resource.country}} @onChange={{fn (mut @resource.country)}} />
            </InputGroup>
        </div>
    </ContentPanel>

    <ContentPanel @title="Geofence Triggers" @open={{true}} @wrapperClass="bordered-top">
        <div class="space-y-4">
            <p class="text-sm text-gray-500 dark:text-gray-400">
                Configure when this service area fires active geofence events. Entry and exit events are dispatched to
                webhooks, WebSocket channels, and the notification system whenever a driver crosses the service area boundary.
            </p>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                {{! Entry trigger toggle }}
                <div class="flex items-start space-x-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700">
                    <div class="flex-shrink-0 mt-0.5">
                        <Toggle
                            @isToggled={{@resource.trigger_on_entry}}
                            @onToggle={{fn (mut @resource.trigger_on_entry)}}
                        />
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Trigger on Entry</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                            Fire a <code class="font-mono">geofence.entered</code> event when a driver enters this service area.
                        </p>
                    </div>
                </div>

                {{! Exit trigger toggle }}
                <div class="flex items-start space-x-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700">
                    <div class="flex-shrink-0 mt-0.5">
                        <Toggle
                            @isToggled={{@resource.trigger_on_exit}}
                            @onToggle={{fn (mut @resource.trigger_on_exit)}}
                        />
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Trigger on Exit</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                            Fire a <code class="font-mono">geofence.exited</code> event when a driver leaves this service area.
                        </p>
                    </div>
                </div>
            </div>

            <InputGroup
                @name="Dwell Threshold (minutes)"
                @value={{@resource.dwell_threshold_minutes}}
                @type="number"
                @placeholder="e.g. 10"
                @helpText="Fire a geofence.dwelled event after a driver has been inside this service area for this many minutes. Leave blank to disable dwell tracking."
            />

            <InputGroup
                @name="Speed Limit (km/h)"
                @value={{@resource.speed_limit_kmh}}
                @type="number"
                @placeholder="e.g. 50"
                @helpText="Optional speed limit enforced within this service area. Leave blank for no limit."
            />
        </div>
    </ContentPanel>
</div>